Juegos en Android / La clase Pepe

Bienvenidos sean a este post, hasta nuestro post anterior hemos visto como crear una lluvia de balas y como van a rebotar en pantalla pero todavia no tenemos a la victima…

Antes de comenzar descarguen el siguiente archivo que va a ser ni mas ni menos que Pepe

Una vez descargado, lo extraen, seleccionan el archivo y presionen Ctrl+C, para copiarlo, luego van al Android Studio y mas exactamente a la carpeta res -> drawable y presionen Ctrl+V para pegar este archivo, nos aparecera el siguiente cuadro

En este caso seleccionaremos el destino, para este caso usaremos el seleccionado en la imagen y presionaremos Ok para pasar al siguiente cuadro, el cual nos aparecera por si deseamos cambiarle el nombre pero nosotros no haremos ninguna modificacion, presionamos Ok para proceder con la copia final, una vez hecho nos quedara de la siguiente manera

Con esto ya tenemos nuestro recurso agregado, nuestro siguiente paso sera empezar a confeccionar la clase Pepe para ello agregaremos las variables que usaremos:

class Pepe {
    RectF mRect;
    float mPepeAltura;
    float mPepeAncho;
    boolean mTeleporte = false;
    Bitmap mBitmap;
}

Lo primero que haremos sera convertir a nuestra clase en tipo privada quitando la palabra public, en nuestro nuevo bloque la primera linea sera para crear nuestro objeto RectF, como vinimos haciendo hasta ahora, luego tenemos las dos variables para la altura y el ancho del personaje jugable, ma conocido como Pepe, la siguiente linea sera para indicar si se teletransporta o no, la iniciamos como false y por ultimo tenemos un objeto de tipo Bitmap que en breve veremos para que nos va a servir, nuestro siguiente paso sera agregar el constructor de la clase, y para ello agregaremos el siguiente bloque:

    public Pepe(Context contexto, float screenX, float screenY) {
        mPepeAltura = screenY / 10;
        mPepeAncho = mPepeAltura / 2;
        mRect = new RectF(screenX / 2,
                screenY / 2,
                (screenX / 2) + mPepeAncho,
                (screenY / 2) + mPepeAltura);
        mBitmap = BitmapFactory.decodeResource(
                contexto.getResources(), R.drawable.pepe);
    }

En este caso iniciaremos tanto la altura como el ancho de Pepe, para el primero usaremos a la division de screenY con 10 y a este resultado lo dividiremos a la mitad para asignarselo al ancho, el siguiente objeto es la definicion de las cuatro propiedades del objeto mRect:

• el primero sera para left
• el segundo para top
• el tercer para right
• el cuarto para bottom

Como pueden ver para las ultimos dos parametros es sumar el ancho y el alto a los valores asignados a left y top respectivamente, en nuestra ultima linea asignaremos al recurso que agregamos, pepe.png, por medio de la clase BitmapFactory y el metodo decodeResource, primero usamos a getResources a traves del contexto en que estamos, o mejor dicho que le informamos al constructor, y tambien le pasamos el path de nuestro recurso, con este constructor iniciaremos todos las variables que declaramos anteriormente, recuerden que un objeto no deja de ser una variable tambien, nuestro siguiente paso sera agregar un nuevo metodo:

    boolean teleTransporte(float nuevoX, float nuevoY){
        boolean exito = false;

        if (!mTeleporte){
            mRect.left = nuevoX - (mPepeAncho/2);
            mRect.top = nuevoY - (mPepeAltura/2);
            mRect.right = mRect.left + mPepeAncho;
            mRect.bottom = mRect.top + mPepeAltura;
            mTeleporte = true;
            exito = true;
        }

        return exito;
    }

Esta funcion se encargara de verificar si Pepe se teletransporto o no, al cual le daremos la posibilidad de recibir dos argumentos para las nuevas coordenadas de los ejes X e Y, lo primero dentro bloque sera la creacion de una variable de tipo boolean llamada exito al cual le asignaremos el valor false, el condicional verifica si mTeleporte es distinto de true, en este caso asignara valores a las cuatro propiedades del objeto mRect, seteara a mTeleporte como true y a exito como true, luego devolvera el valor de exito, donde en caso de haberse teletransportado sera true y en caso contrario devolvera false, nuestro siguiente paso sera agregar los siguientes tres metodos:

    void setTeleporteDisponible(){
        mTeleporte = false;
    }

    RectF getRect(){
        return mRect;
    }

    Bitmap getBitmap(){
        return mBitmap;
    }

La primera funcion se encarga de setear si podemos teletransportarnos o no, como seteamos a mTeleporte en false hara que el condicional de la funcion que hablamos anteriormente se ejecute y modifique las propiedades de mRect, las siguientes dos funciones son las que usamos para devolver los objetos mRect y mBitmap respectivamente, con esto ya completamos nuestra clase, antes de continuar veamos como es su codigo final hasta ahora:

Pepe.java

package org.example.balacera;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.RectF;

class Pepe {

    RectF mRect;
    float mPepeAltura;
    float mPepeAncho;
    boolean mTeleporte = false;
    Bitmap mBitmap;


    public Pepe(Context contexto, float screenX, float screenY) {
        mPepeAltura = screenY / 10;
        mPepeAncho = mPepeAltura / 2;
        mRect = new RectF(screenX / 2,
                screenY / 2,
                (screenX / 2) + mPepeAncho,
                (screenY / 2) + mPepeAltura);
        mBitmap = BitmapFactory.decodeResource(
                contexto.getResources(), R.drawable.pepe);
    }

    boolean teleTransporte(float nuevoX, float nuevoY){
        boolean exito = false;

        if (!mTeleporte){
            mRect.left = nuevoX - (mPepeAncho/2);
            mRect.top = nuevoY - (mPepeAltura/2);
            mRect.right = mRect.left + mPepeAncho;
            mRect.bottom = mRect.top + mPepeAltura;
            mTeleporte = true;
            exito = true;
        }

        return exito;
    }

    void setTeleporteDisponible(){
        mTeleporte = false;
    }

    RectF getRect(){
        return mRect;
    }

    Bitmap getBitmap(){
        return mBitmap;
    }

}

Para chequear su funcionamiento haremos una breve implementacion y para ello iremos a la clase BalaceraJuego donde primero agregaremos esta linea con el resto de las variables:

private Pepe mPepe;

Esta creara el objeto que sera nuestro jugador, luego agregaremos esta linea en nuestro constructor antes de la llamada a la funcion iniciaJuego:

mPepe = new Pepe(contexto, mScreenX, mScreenY);

En este caso llamamos al constructor de la clase y le pasamos tres datos, el contexto, el tamaño del eje X y el tamaño del eje Y, y por ultimo agregaremos este bloque al metodo dibujar ubiquenlo despues del bucle que usamos para dibujar las balas y el condicional para mostrar la depuracion:

            mCanvas.drawBitmap(mPepe.getBitmap(),
                    mPepe.getRect().left,mPepe.getRect().top,mPincel);

En este caso usaremos un metodo que nos provee Canvas, drawBitmap la cual nos permitira dibujar un bitmap o imagen, primero usaremos a getBitmap para que nos devuelva el objeto, los siguientes dos datos seran left y top de mRect en la clase Pepe, esto gracias a getRect, por ultimo usaremo a mPincel para dibujarlo, si lo compilamos y probamos veremos una pantalla como esta

Como pueden ver ya tenemos a nuestra victim… perdon, heroe para ver como sobrevivira a la balacera, para nuestro siguiente post agregaremos todo lo que nos falte.

En resumen, hoy hemos confeccionado la clase Pepe, hemos visto como Canvas nos permite utilizar imagenes tambien, esto gracias a la clase Bitmap para almacenar la imagen, en el caso de Canvas se usara el metodo drawBitmap para manejar el objeto que creamos con la otra clase, tambien hemos visto como se implementa y como queda por ahora, espero les haya sido util sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.

Tengo un Patreon donde podes acceder de manera exclusiva a material para este blog antes de ser publicado, sigue los pasos del link para saber como.