Juegos en Android / Aplicando Canvas al proyecto

Bienvenidos sean a este post, en este post continuaremos con nuestro primer proyecto donde por ahora creamos solamente la base de nuestro juego.

En el post anterior hablamos sobre la clase Canvas donde vimos como podiamos no solamente dibujar sino escribir texto, modificar los colores, etc, hoy veremos las primeras incursiones graficas, para ello vamos a agregar el siguiente bloque entre los objetos y variables declarados al comienzo de la clase MainActivity:

    ImageView juegoVista;
    Bitmap bitmapBlanco;
    Canvas canvas;
    Paint pincel;

Al igual que vimos en este post, estos son todos los objetos necesarios para graficar en nuestro ImageView por medio de Bitmap, Canvas y Paint.

Nota: Recuerden seleccionar el paquete de cada una de las clases, sino se las sugiere presionen Alt+Enter sobre la clase para que se agreguen automaticamente.

Nuestra siguiente modificacion sera en el metodo nuevo donde primero modificaremos la siguiente linea:

depuracion = false;

De la siguiente forma:

depuracion = true;

Con esto habilitaremos la depuracion de nuestro juego, ya se daran cuenta a que me refiero, nuestra siguiente modificacion sera agregar el siguiente bloque despues de las definiciones que agregamos anteriormente:

        bitmapBlanco = Bitmap.createBitmap(numHorPixels,
                numVerPixels, Bitmap.Config.ARGB_8888);
        canvas = new Canvas(bitmapBlanco);
        juegoVista = new ImageView(this);
        pincel = new Paint();
        setContentView(juegoVista);

En este caso primero definiremos a bitmapBlanco donde para el ancho y el alto usaremos a numHorPixels y numVerPixels respectivamente, y el ultimo campo sera como usaremos los colores, hablamos de esto en este post, luego crearemos el canvas que usaremos y le asignaremos a bitmapBlanco, nuestro siguiente paso sera definir a juegoVista y le asignaremos la vista actual, despues contruimos a pincel y por ultimo establecemos la vista con juegoVista, nuestra ultima modificacion sera reemplazar todas las lineas de Log por el siguiente bloque:

        Log.d("Depurando","En el nuevo()");

Donde simplemente dejaremos al Log para indicarnos en que metodo esta, para despues llamar a dibujar, por ultimo modificaremos a dibujar de la siguiente manera:

    void dibujar()
    {
        juegoVista.setImageBitmap(bitmapBlanco);
        canvas.drawColor(Color.argb(255,255,255,255));
        Log.d("Depurando","En el dibujar()");
        imprimirDebug();
    }

En la primera linea estableceremos el bitmap para la vista juegoVista, luego por medio de canvas lo pintaremos de blanco, seguimos con el Log para indicar donde esta y por ultimo llamaremos a imprimirDebug pero por ahora no hara nada, la verdadera ultima modificacion sera en onCreate donde eliminaremos la linea que llama a dibujar, si lo probamos veremos algo como esto

Como pueden ver hasta aca implementamos un Canvas basico para poder utilizar, con esto podemos graficar, mostrar textos, etc.

Para nuestra ultima modificacion dibujaremos un par de lineas, para ello modificaremos a la funcion dibujar de la siguiente manera:

    void dibujar()
    {
        juegoVista.setImageBitmap(bitmapBlanco);
        canvas.drawColor(Color.argb(255,255,255,255));
        pincel.setColor(Color.argb(255,0,0,0));
        canvas.drawLine(0,tamBloque * 1,
                numHorPixels -1, tamBloque * 1, pincel);
        canvas.drawLine(tamBloque * 1,0,
                tamBloque * 1, numVerPixels -1, pincel);

        Log.d("Depurando","En el dibujar()");
        imprimirDebug();
    }

En esta funcion primero estableceremos a bitmapBlanco para la vista juegoVista, luego por medio de Canvas la pintaremos de blanco, nuestra siguiente linea sera establecer a pincel con el color negro, luego usaremos dos veces el metodo drawLine para dibujar primero una linea horizontal en la pantalla, las primeras dos coordenadas seran para indicar donde comienza los ejes X e Y respectivamente, las siguientes dos coordenadas seran para indicar donde finaliza la linea con los ejes X e Y respectivamente, por ultimo pasamos el pincel para dibujarla, la siguiente linea hace exactamente lo mismo pero para dibujar una linea en vertical, pueden notar que la unica diferencia fue la ubicacion de los datos para modificar el eje X o Y dependiendo de que linea queremos dibujar, despues tenemos la notificacion del Log y la llamada a imprimirDebug pero por ahora no hace nada, veamos como esta hasta ahora

En resumen, hasta aqui hemos visto como aplicar un Canvas a nuestro proyecto, como nos hizo el fondo de pantalla, hemos establecido los primeros metodos, tambien hemos habilitado la proxima depuracion en nuestro juego asi como tambien hemos visto como dibujar sobre el mismo para crear nuestro primer bloque de la grilla, 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.