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.
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();
}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);
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
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);
}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
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();
}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);
}
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
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.
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.
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
El blog de Tinchicus 