Anuncios

Bienvenidos sean a este post, continuando con el post anterior hoy veremos como crear nuestra primera interfaz tambien conocida como HUD y otras modificaciones mas.

Anuncios

Para comenzar vamos a tomar nuestro proyecto, vamos a ir al metodo dibujar y lo modificaremos 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);
        pincel.setTextSize(tamBloque * 1.5f);
        pincel.setColor(Color.argb(255,0,0,255));
        canvas.drawText("Disparos realizados: " +
                disparos + " - Distancia del submarino: " +
                distDesdeSub, tamBloque, tamBloque * 1.75f, pincel);

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

En este caso, solo agregamos este bloque nuevo dentro de la funcion:

        pincel.setTextSize(tamBloque * 1.5f);
        pincel.setColor(Color.argb(255,0,0,255));
        canvas.drawText("Disparos realizados: " +
                disparos + " - Distancia del submarino: " +
                distDesdeSub, tamBloque, tamBloque * 1.75f, pincel);
Anuncios

En el cual primero setearemos el tamaño del texto para nuestro pincel, en este caso multiplicaremos el valor del tamaño del bloque por 1.5, si se preguntan por la f es para identificar que es de tipo float, la segunda linea es para setear el color del pincel y por ultimo usaremos el drawText para escribir un mensaje en pantalla, si lo probamos ser vera asi

Anuncios

Nuestra siguiente modificacion sera en la funcion imprimirDebug, la cual modificaremos de la siguiente manera:

    void imprimirDebug()
    {
        pincel.setTextSize(tamBloque);
        canvas.drawText("numHorPixels = " + numHorPixels,
                50, tamBloque * 3, pincel);
        canvas.drawText("numVerPixels = " + numVerPixels,
                50, tamBloque * 4, pincel);
        canvas.drawText("tamBloque = " + tamBloque,
                50, tamBloque * 5, pincel);
        canvas.drawText("ancGrilla = " + ancGrilla,
                50, tamBloque * 6, pincel);
        canvas.drawText("altGrilla = " + altGrilla,
                50, tamBloque * 7, pincel);
        canvas.drawText("subHorPosicion = " + subHorPosicion,
                50, tamBloque * 8, pincel);
        canvas.drawText("subVerPosicion = " + subVerPosicion,
                50, tamBloque * 9, pincel);
        canvas.drawText("horizTocado = " + horizTocado,
                50, tamBloque * 10, pincel);
        canvas.drawText("verTocado = " + vertTocado,
                50, tamBloque * 11, pincel);
        canvas.drawText("impacto = " + impacto,
                50, tamBloque * 12, pincel);
        canvas.drawText("depuracion = " + depuracion,
                50, tamBloque * 13, pincel);
    }
Anuncios
Anuncios

Esta es una funcion sencilla, primero estableceremos el tamaño del texto para nuestro pincel, despues usaremos a drawText para escribir texto en el canvas, primero mostraremos indicando la variable, luego le concatenamos el valor de la variable, seguido de un eje x igual para todos, despues usamos a tamBloque multiplicado por un numero para el eje y, en este caso por cada linea incrementaremos el multiplicador, finalmente ira el pincel para escribirlo, usaremos un drawText para cada variable, tal como se ve en el codigo, si lo compilamos y probamos veremos lo siguiente

Anuncios

Con esto tenemos nuestro metodo para hacer depuracion de los valores de nuestro programa, para nuestra ultima modificacion vamos a dibujar la grilla y para ello vamos a aplicar esta modificacion dentro de la funcion dibujar:

    void dibujar()
    {
        juegoVista.setImageBitmap(bitmapBlanco);
        canvas.drawColor(Color.argb(255,255,255,255));
        pincel.setColor(Color.argb(255,0,0,0));
        for(int i=0; i < altGrilla; i++) {
            canvas.drawLine(0, tamBloque * i,
                    numHorPixels - 1, tamBloque * i, pincel);
        }
        for(int i =0; i < ancGrilla; i++){
            canvas.drawLine(tamBloque * i,0,
                tamBloque * i, numVerPixels -1, pincel);
        }
        pincel.setTextSize(tamBloque * 1.5f);
        pincel.setColor(Color.argb(255,0,0,255));
        canvas.drawText("Disparos realizados: " +
                disparos + " - Distancia del submarino: " +
                distDesdeSub, tamBloque, tamBloque * 1.75f, pincel);

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

En esta funcion la nueva modificacion es la siguiente:

        for(int i=0; i < altGrilla; i++) {
            canvas.drawLine(0, tamBloque * i,
                    numHorPixels - 1, tamBloque * i, pincel);
        }
        for(int i =0; i < ancGrilla; i++){
            canvas.drawLine(tamBloque * i,0,
                tamBloque * i, numVerPixels -1, pincel);
        }
Anuncios

En este caso usaremos un bucle for para repetir las lineas encargadas de dibujar tanto las lineas horizontales como las verticales, en el primer bucle lo usaremos para dibujar todas las lineas horizontales, donde multiplicaremos a tamBloque por el valor que incrementamos en i, lo mismo hacemos para el segundo bucle pero en este caso se encargara de repetir las lineas verticales, si lo compilamos y probamos veremos la pantalla de esta forma

Anuncios

Ahora no solamante tenemos los datos del juego sino tambien la grilla que usaremos para ubicar a nuestro submarino, un dato a tener en cuenta es que los datos pueden variar dependiendo de su emulador o dispositivo pero esto les servira como referencia para saber que van por el camino correcto.

Anuncios

En resumen, con esto no solamente hemos implementado Canvas a nuestro proyecto, hemos generado la interfaz basica para ver los disparos efectuados y a que distancia del submarino fue el disparo, despues modificamos a imprimirDebug para ver los datos del juego y por ultimo hemos creado la grilla para ubicar a nuestro submarino, 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.

Anuncios

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.

Tambien podes donar

Es para mantenimiento del sitio, gracias!

$1.00