Bienvenidos sean a este post, en el post de hoy crearemos la clase que servira de interfaz para nuestro usuario mas conocido como HUD.
Sera de forma similar al visto en el proyecto anterior pero tendra una sutil diferencia con respecto a este, antes de comenzar vamos a descargar el siguiente archivo con las imagenes que usaremos en el juego:
Una vez descargado los extraen a la pc, los seleccionan y presionan Ctrl+C para copiarlos, van al Android Studio y en el recurso res/drawable pegan mediante Ctrl+V los archivos, debera aparecer un cuadro lo dejan como esta y presionen Ok para copiarlos, una vez hecho debera quedar asi
Nota: Cuando aparece el cuadro deben seleccionar drawable (sino esta elegido) y no deben elegir drawable-v24
Con todo esto realizado podemos comenzar con la creacion de una nueva clase con estas caracteristicas:
- Nombre: HUD
- Tipo: Class
Con la nueva clase creada modifiquemos su codigo con el siguiente:
package org.example.pepeaventura;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Point;
import android.graphics.Rect;
import java.util.ArrayList;
class HUD {
private Bitmap mBitmapMenu;
private int mFormateoTexto;
private int mAlturaPantalla;
private int mAnchoPantalla;
final float UN_TERCIO = .33f;
final float DOS_TERCIOS = .66f;
private ArrayList<Rect> mControles;
static int IZQUIERDA = 0;
static int DERECHA = 1;
static int SALTAR = 2;
HUD(Context contexto, Point tamano){
mAlturaPantalla = tamano.y;
mAnchoPantalla = tamano.x;
mFormateoTexto = tamano.x / 25;
prepararControles();
mBitmapMenu = BitmapFactory.decodeResource(
contexto.getResources(),
R.drawable.menu);
mBitmapMenu = Bitmap.createScaledBitmap(
mBitmapMenu,
tamano.x,
tamano.y,
false);
}
}Primero crearemos un Bitmap para nuestro menu, luego tendremos tres variables para almacenar como formatear el texto, la altura y el ancho de la pantalla respectivamente, despues tendremos dos constantes que las usaremos mas adelante con otro metodo de esta clase, lo siguiente es la primera curiosidad donde tendremos un ArrayList para almacenar los Rect de nuestros controles y por ultimo tres variables de tipo estatica que nos permitiran ser accedidas desde otras clases y permitiran saber que accion tomamos para el jugador es decir si lo movemos a la izquierda, derecha o lo hacemos salter, pero de todo esto hablaremos proximamente, depues tenemos el contructor de la clase.
Este recibira el dato del contexto y las coordenadas de la pantalla a traves del atributo de tipo Point, gracias a este asignaremos el valor maximo del eje X e Y al ancho y alto respectivamente,, despues estableceremos a mFormateoTexto mediante la division del ancho de la pantalla con 25, luego llamamos a un metodo para preparar los controles, pero inmediatamente despues cargaremos la imagen que usaremos para menu en mBitmapMenu por medio de decodeResource y por medio de createScaledBitmap la crearemos, ahora vamos a agregar el metodo encargado de preparar los controles:
private void prepararControles(){
int anchoBoton = mAnchoPantalla / 14;
int altoBoton = mAlturaPantalla / 12;
int rellenoBoton = mAnchoPantalla / 90;
Rect izquierda = new Rect(rellenoBoton,
mAlturaPantalla - altoBoton - rellenoBoton,
anchoBoton + rellenoBoton,
mAlturaPantalla - rellenoBoton);
Rect derecha = new Rect(
(rellenoBoton * 2) + anchoBoton,
mAlturaPantalla - altoBoton - rellenoBoton,
(rellenoBoton * 2) + (anchoBoton * 2),
mAlturaPantalla - rellenoBoton );
Rect saltar = new Rect(
mAnchoPantalla - rellenoBoton - anchoBoton,
mAlturaPantalla - altoBoton - rellenoBoton,
mAnchoPantalla - rellenoBoton,
mAlturaPantalla - rellenoBoton);
mControles = new ArrayList<>();
mControles.add(IZQUIERDA,izquierda);
mControles.add(DERECHA,derecha);
mControles.add(SALTAR,saltar);
}Primero definiremos tres variables para almacenar el ancho, alto y separacion de los botones respectivamente, despues crearemos tres variables de tipo Rect para generar los «botones» que serviran para movernos a la izquierda, a la derecha o saltar, en este caso en base a los valores definidos al comienzo iremos definiendo las coordenadas left, top, right y bottom respectivamente, una vez creado los botones definiremos a mControles y agregaremos a cada uno de ellos y las posiciones las definiremos por medio de las variables definidas al comienzo que representan a los mismos, el objeto sera los creados anteriormente, con esto ya tenemos nuestros controles preparados, ahora solo nos resta el metodo encargado de dibujarlos y para ello usaremos el siguiente metodo:
void dibujar(Canvas c, Paint p, GameState gs){
if (gs.getGameOver()){
c.drawBitmap(mBitmapMenu,0,0,p);
p.setColor(Color.argb(100,26,128,182));
c.drawRect(0,0,
mAnchoPantalla,mFormateoTexto * 4,p);
p.setColor(Color.argb(255,255,255,255));
p.setTextSize(mFormateoTexto);
c.drawText("Cueva",
mFormateoTexto,
mFormateoTexto*2,
p);
c.drawText("Montaña",
(mAnchoPantalla * UN_TERCIO) + mFormateoTexto,
mFormateoTexto * 2,
p);
c.drawText("Ciudad",
(mAnchoPantalla * DOS_TERCIOS) + mFormateoTexto,
mFormateoTexto * 2,
p);
p.setTextSize(mFormateoTexto/1.8f);
c.drawText("RECORD: " + gs.getCuevaMasRapida() + " segundos",
mFormateoTexto,
mFormateoTexto * 3,
p);
c.drawText("RECORD: " + gs.getMontanaMasRapida() + " segundos",
mAnchoPantalla * UN_TERCIO + mFormateoTexto,
mFormateoTexto * 3,
p);
c.drawText("RECORD: " + gs.getCiudadMasRapida() + " segundos",
mAnchoPantalla * DOS_TERCIOS + mFormateoTexto,
mFormateoTexto * 3,
p);
p.setColor(Color.argb(100,26,128,182));
c.drawRect(0,
mAlturaPantalla - mFormateoTexto * 2,
mAnchoPantalla,
mAlturaPantalla,
p);
p.setColor(Color.argb(255,255,255,255));
p.setTextSize(mFormateoTexto * 1.5f);
c.drawText("TOCA DOS VECES UN NIVEL PARA JUGAR",
UN_TERCIO + mFormateoTexto * 2,
mAlturaPantalla - mFormateoTexto / 2,
p);
} else {
p.setColor(Color.argb(100, 0, 0, 0));
c.drawRect(0, 0, mAnchoPantalla,mFormateoTexto, p);
p.setTextSize(mFormateoTexto / 1.5f);
p.setColor(Color.argb(255,255,255,255));
c.drawText("Tiempo: " + gs.getTiempoActual()
+ "+" + gs.getMonedasRestantes() * 10,
mFormateoTexto / 4,
mFormateoTexto / 1.5f,
p);
dibujarControles(c,p);
}Este metodo parece complejo pero no lo es tanto, en primera instancia vamos a tener un condicional que verifica si el juego esta en estado Game Over o terminado, en caso de ser verdadero nos mostrara la imagen que tenemos como Menú principal, para ello lo hara por medio de drawBitmap, luego tendremos este bloque:
p.setColor(Color.argb(100,26,128,182));
c.drawRect(0,0,
mAnchoPantalla,mFormateoTexto * 4,p);
Esto dibujara un bloque en la parte superior de la pantalla para resaltar el texto que pondremos ahi, luego tenemos este bloque:
p.setColor(Color.argb(255,255,255,255));
p.setTextSize(mFormateoTexto);
c.drawText("Cueva",
mFormateoTexto,
mFormateoTexto*2,
p);
c.drawText("Montaña",
(mAnchoPantalla * UN_TERCIO) + mFormateoTexto,
mFormateoTexto * 2,
p);
c.drawText("Ciudad",
(mAnchoPantalla * DOS_TERCIOS) + mFormateoTexto,
mFormateoTexto * 2,
p);
En este caso primero modificaremos el color del Pincel, luego setearemos el tamaño del texto y por ultimo escribiremos en cada una de las imagenes el nombre del nivel y en esta ocasion utilizaremos las dos constantes que definimos al principio para saber en que tercio de la pantalla debemos ubicarlo, la accion es la misma para todos es decir «dibujar» el texto como vinimos haciendo hasta ahora, luego tenemos este otro bloque:
p.setTextSize(mFormateoTexto/1.8f);
c.drawText("RECORD: " + gs.getCuevaMasRapida() + " segundos",
mFormateoTexto,
mFormateoTexto * 3,
p);
c.drawText("RECORD: " + gs.getMontanaMasRapida() + " segundos",
mAnchoPantalla * UN_TERCIO + mFormateoTexto,
mFormateoTexto * 3,
p);
c.drawText("RECORD: " + gs.getCiudadMasRapida() + " segundos",
mAnchoPantalla * DOS_TERCIOS + mFormateoTexto,
mFormateoTexto * 3,
p);
Este bloque se encargara de escribir los records o los mejores tiempos de cada nivel, tambien lo hara sobre el cuadro que dibujamos en la parte superior, veamos el siguiente bloque:
p.setColor(Color.argb(100,26,128,182));
c.drawRect(0,
mAlturaPantalla - mFormateoTexto * 2,
mAnchoPantalla,
mAlturaPantalla,
p);
Este dibujara un bloque pero en la parte inferior de la pantalla y tendra la misma utilidad que es resaltar el texto que pondremos a continuacion mediante el siguiente bloque:
p.setColor(Color.argb(255,255,255,255));
p.setTextSize(mFormateoTexto * 1.5f);
c.drawText("TOCA DOS VECES UN NIVEL PARA JUGAR",
UN_TERCIO + mFormateoTexto * 2,
mAlturaPantalla - mFormateoTexto / 2,
p);
Con esto escribiremos el mensaje para que el jugador pueda acceder a algun nivel mediante el doble toque en pantalla, con esto cubrimos el bloque encargado de mostrar el menu cuando estemos en Game Over o fuera del juego, pasemos al caso contrario.
Lo primero que haremos sera dibujar un recuadro para resaltar el texto, luego mostraremos el HUD, en realidad en el cuadro creado anteriormente graficaremos el tiempo y las monedas restantes, luego por ultimo llamamos al metodo encargado de dibujar a los controles, con esto ya tenemos cubierto el metodo dibujar falta poco para terminar, pasemos a agregar el metodo encargado de dibujar los controles:
private void dibujarControles(Canvas c, Paint p){
p.setColor(Color.argb(100,255,255,255));
for(Rect r : mControles )
c.drawRect(r.left, r.top, r.right, r.bottom, p);
p.setColor(Color.argb(255,255,255,255));
}Este metodo recibira el Canvas y el Pincel (Paint), lo primero que haremos es setear el color para el pincel, luego por medio de un bucle for mejorado pasamos por todos los objetos en mControles y lo dibujaremos, por ultimo volvemos a reestablecer el color del pincel, con esto ya dibujamos los controles en nuestra pantalla, agreguemos el ultimo metodo:
ArrayList<Rect> getControles(){
return mControles;
}Este metodo se encarga de devolver el objeto mControles que hemos creado, con esto ya tenemos nuestra interfaz creada para el usuario veamos como es su codigo final:
HUD.java
package org.example.pepeaventura;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Point;
import android.graphics.Rect;
import java.util.ArrayList;
class HUD {
private Bitmap mBitmapMenu;
private int mFormateoTexto;
private int mAlturaPantalla;
private int mAnchoPantalla;
final float UN_TERCIO = .33f;
final float DOS_TERCIOS = .66f;
private ArrayList<Rect> mControles;
static int IZQUIERDA = 0;
static int DERECHA = 1;
static int SALTAR = 2;
HUD(Context contexto, Point tamano){
mAlturaPantalla = tamano.y;
mAnchoPantalla = tamano.x;
mFormateoTexto = tamano.x / 25;
prepararControles();
mBitmapMenu = BitmapFactory.decodeResource(
contexto.getResources(),
R.drawable.menu);
mBitmapMenu = Bitmap.createScaledBitmap(
mBitmapMenu,
tamano.x,
tamano.y,
false);
}
private void prepararControles(){
int anchoBoton = mAnchoPantalla / 14;
int altoBoton = mAlturaPantalla / 12;
int rellenoBoton = mAnchoPantalla / 90;
Rect izquierda = new Rect(rellenoBoton,
mAlturaPantalla - altoBoton - rellenoBoton,
anchoBoton + rellenoBoton,
mAlturaPantalla - rellenoBoton);
Rect derecha = new Rect(
(rellenoBoton * 2) + anchoBoton,
mAlturaPantalla - altoBoton - rellenoBoton,
(rellenoBoton * 2) + (anchoBoton * 2),
mAlturaPantalla - rellenoBoton );
Rect saltar = new Rect(
mAnchoPantalla - rellenoBoton - anchoBoton,
mAlturaPantalla - altoBoton - rellenoBoton,
mAnchoPantalla - rellenoBoton,
mAlturaPantalla - rellenoBoton);
mControles = new ArrayList<>();
mControles.add(IZQUIERDA,izquierda);
mControles.add(DERECHA,derecha);
mControles.add(SALTAR,saltar);
}
void dibujar(Canvas c, Paint p, GameState gs){
if (gs.getGameOver()){
c.drawBitmap(mBitmapMenu,0,0,p);
p.setColor(Color.argb(100,26,128,182));
c.drawRect(0,0,
mAnchoPantalla,mFormateoTexto * 4,p);
p.setColor(Color.argb(255,255,255,255));
p.setTextSize(mFormateoTexto);
c.drawText("Cueva",
mFormateoTexto,
mFormateoTexto*2,
p);
c.drawText("Montaña",
(mAnchoPantalla * UN_TERCIO) + mFormateoTexto,
mFormateoTexto * 2,
p);
c.drawText("Ciudad",
(mAnchoPantalla * DOS_TERCIOS) + mFormateoTexto,
mFormateoTexto * 2,
p);
p.setTextSize(mFormateoTexto/1.8f);
c.drawText("RECORD: " + gs.getCuevaMasRapida() + " segundos",
mFormateoTexto,
mFormateoTexto * 3,
p);
c.drawText("RECORD: " + gs.getMontanaMasRapida() + " segundos",
mAnchoPantalla * UN_TERCIO + mFormateoTexto,
mFormateoTexto * 3,
p);
c.drawText("RECORD: " + gs.getCiudadMasRapida() + " segundos",
mAnchoPantalla * DOS_TERCIOS + mFormateoTexto,
mFormateoTexto * 3,
p);
p.setColor(Color.argb(100,26,128,182));
c.drawRect(0,
mAlturaPantalla - mFormateoTexto * 2,
mAnchoPantalla,
mAlturaPantalla,
p);
p.setColor(Color.argb(255,255,255,255));
p.setTextSize(mFormateoTexto);
c.drawText("TOCA DOS VECES UN NIVEL PARA JUGAR",
UN_TERCIO + mFormateoTexto * 2,
mAlturaPantalla - mFormateoTexto / 2,
p);
} else {
p.setColor(Color.argb(100,0,0,0));
c.drawRect(0,0, mAnchoPantalla,mFormateoTexto, p);
p.setTextSize(mFormateoTexto / 1.5f);
p.setColor(Color.argb(255,255,255,255));
c.drawText("Tiempo: " + gs.getTiempoActual()
+ "+" + gs.getMonedasRestantes() * 10,
mFormateoTexto / 4,
mFormateoTexto / 1.5f,
p);
dibujarControles(c,p);
}
}
private void dibujarControles(Canvas c, Paint p){
p.setColor(Color.argb(100,255,255,255));
for(Rect r : mControles )
c.drawRect(r.left, r.top, r.right, r.bottom, p);
p.setColor(Color.argb(255,255,255,255));
}
ArrayList<Rect> getControles(){
return mControles;
}
}En resumen, hoy hemos creado la interfaz para jugar, en realidad hemos hecho los controles, tambien hemos creado un condicional que verifica si estamos jugando o no, en caso de no estar jugando nos mostrara el menu en la pantalla, en caso contrario (es decir estamos jugando) nos crea la interfaz en pantalla, si bien no podemos probarlo aun proximamente lo haremos, espero les haya gustado 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.
Donación
Es para mantenimento del sitio, gracias!
$1.00
El blog de Tinchicus 