Anuncios

Bienvenidos sean a este post, hoy haremos la interfaz que veremos en pantalla ya sea tanto para interactuar con el juego como para mostrar texto en pantalla.

Anuncios

En este caso nuestra interfaz en pantalla o HUD (Head-Up Display) nos mostrara todos los datos en pantalla tales como:

  • Record o Puntaje mas alto
  • Puntaje
  • Las vidas
  • Mensajes en pantalla (Pausado, Game Over o Iniciar)
  • Los botones de movimiento y disparo
Anuncios

Para lograr esto vamos a crear una nueva clase de Java con los siguientes datos:

  • Nombre: HUD
  • Tipo: Class
Anuncios

Una vez creada nuestra nueva clase vamos a reemplazar el codigo generado con el siguiente:

package org.example.invasores;

import android.graphics.Point;
import android.graphics.Rect;

import java.util.ArrayList;

class HUD {
    private int mTextoFormato;
    private int mScreenAlto;
    private int mScreenAncho;

    private ArrayList<Rect> controles;

    static int ARRIBA = 0;
    static int ABAJO = 1;
    static int VUELTA = 2;
    static int DISPARO = 3;
    static int PAUSA = 4;

    HUD(Point tamano){
        mScreenAlto = tamano.y;
        mScreenAncho = tamano.x;
        mTextoFormato = tamano.x / 50;
        prepararControles();
    }
}
Anuncios

En esta nueva clase declaramos primero tres variables las cuales se encargaran de almacenar en el siguiente orden:

  • El tamaño del formato del texto
  • El tamaño del alto de la pantalla
  • El tamaño del ancho de la pantalla
Anuncios
Anuncios

Lo siguiente es un objeto de tipo ArrayList el cual contendra elementos de tipo Rect a la cual llamamos controles y esta como indica su nombre sera para los controles en pantalla, lo siguiente seran cinco constantes para las acciones que estan indicadas en los nombres de los mismos, es decir ARRIBA mueve para arriba, ABAJO para abajo, etc., lo siguiente es el constructor que recibira un atributo de tipo Point para obtener el tamaño de la pantalla, en este constructor iniciaremos a las variables anteriores por medio del atributo recibido y el eje correspondiente, para el tamaño del texto usamos al eje X pero lo dividimos por 50, por ultimo llamamos a un metodo que aun no existe, por esta razon nuestro siguiente paso sera agregar dicho metodo despues del constructor mediante el siguiente bloque:

    private void prepararControles(){
        int botonAncho = mScreenAncho / 14;
        int botonAlto = mScreenAlto / 12;
        int botonPadding = mScreenAncho / 90;

        Rect arriba = new Rect(botonPadding,
                mScreenAlto - (botonAlto * 2)
                        - (botonPadding*2),
                botonAncho + botonPadding,
                mScreenAlto - botonAlto
                        -(botonPadding * 2) );
        Rect abajo = new Rect(botonPadding,
                mScreenAlto - botonAlto
                        - botonPadding,
                botonAncho + botonPadding,
                mScreenAlto - botonPadding);
        Rect vuelta = new Rect(mScreenAncho
                - botonPadding - botonAncho,
                mScreenAlto - botonAlto
                        - botonPadding,
                mScreenAncho - botonPadding,
                mScreenAlto - botonPadding);
        Rect disparo = new Rect(mScreenAncho
                - botonPadding - botonAncho,
                mScreenAlto - (botonAlto*2)
                        - (botonPadding*2),
                mScreenAncho - botonPadding,
                mScreenAlto - botonAlto
                        - (botonPadding * 2));
        Rect pausa = new Rect(mScreenAncho
                - botonPadding - botonAncho,
                botonPadding,
                mScreenAncho - botonPadding,
                botonPadding + botonAlto);
        controles = new ArrayList<>();
        controles.add(ARRIBA,arriba);
        controles.add(ABAJO,abajo);
        controles.add(VUELTA,vuelta);
        controles.add(DISPARO,disparo);
        controles.add(PAUSA,pausa);
    }
Anuncios

Para este metodo primero crearemos tres variables que seran para el ancho, el alto y la separacion de texto de los botones, para cada uno de ellos los valores obtenidos en el constructor y dividido cada uno por un valor distinto, despues crearemos cinco objetos de tipo Rect donde seran para cada uno de los botones que tendremos en pantalla, recuerden que los cuatro parametros para crear el Rect son en el siguiente orden:

  • left
  • top
  • right
  • bottom
Anuncios

Para entender el concepto porque si lo vemos en el codigo directamente no queda muy claro vamos a tomar el Rect arriba y explicar cada uno de los valores:

  • El primer valor indica que estara a la izquierda y para ello le pasamos el botonPadding que sera el ancho de la pantalla dividido 90
  • El segundo valor indica a que altura (top) estara el elemento, para ello usaremos el alto de la pantalla y le restaremos el tamaño de dos botones y el padding de dos botones
  • El tercer valor indica su valor de final a la derecha, para ello usa la suma del ancho del boton y el padding
  • El cuarto valor el valor de final inferior, para ello vuelve a usar la altura de la pantalla le resta un solo boton pero resta dos veces el padding
Anuncios

Con esto tenemos todos los parametros definidos de nuestro boton, lo mismo hacemos para el resto tanto para ubicarlos como para definir sus limites, si los observan bien se daran cuenta que no son tan complejos, por ultimo definimos el ArrayList para los controles y por medio de add, agregamos la clave que sera la constante y luego el valor que es el objeto con el mismo nombre en cada uno de los casos, pasemos a nuestro siguiente metodo agregando el siguiente bloque:

    void dibujar(Canvas c, Paint p, GameState gs){
        p.setColor(Color.argb(255,255,255,255));
        p.setTextSize(mTextoFormato);
        c.drawText("Top:" + gs.getPuntajeAlto(),
                mTextoFormato,mTextoFormato,p);
        c.drawText("Puntaje:" + gs.getPuntaje(),
                mTextoFormato,mTextoFormato*2,p);
        c.drawText("Vidas:" + gs.getNumNaves(),
                mTextoFormato,mTextoFormato*3,p);
        if (gs.getGameOver()){
            p.setTextSize(mTextoFormato * 5);
            c.drawText("PRESIONA PLAY",
                    mScreenAncho/6,mScreenAlto/2,p);
        }
        if (gs.getPausado() && !gs.getGameOver()){
            p.setTextSize(mTextoFormato * 5);
            c.drawText("PAUSADO",
                    mScreenAncho/3,mScreenAlto/2,p);
        }
        dibujaControles(c,p);
    }
Anuncios

Este metodo como lo indica su nombre se encarga de dibujar el HUD, en este caso recibiremos tres atributos, un Canvas, un Paint y otro de tipo GameState, en el bloque lo primero que haremos es setear el color del Pincel (Paint), despues iremos escribiremos los tres valores del juego:

  • El puntaje mas alto
  • El puntaje actual
  • La cantidad de vidas
Anuncios
Anuncios

Esto lo haremos por medio del Canvas recibido para ubicarlo lo unico que variamos es el valor del eje Y multiplicando por la cantidad de elementos que queremos evitar, el primero no necesita, el segundo es por dos porque nos debemos ubicar debajo del anterior y el ultimo por tres para ubicarnos debajo de los dos anteriores, despues viene un condicional donde verifica si el estado de GameOver es verdadero y en caso de ser cierto modifica el tamaño del texto del pincel y muestra el mensaje para presionar PLAY y para ubicarlo divide el eje X por cuatro y el eje Y por dos, seguido a este condicional tenemos uno que verifica si el estado Pausado es verdadero y el de GameOver es falso, esto significa que el juego no esta terminado sino en pausa por lo tanto hacemos lo mismo que en el otro condicional pero mostrarmos el mensaje de pausado y por ultimo llamamos al metodo dibujaControles al cual le pasamos el Canvas y el Pincel, nuestro siguiente paso sera agregar el metodo faltante y para ello agregaremos a continuacion del anterior el siguiente bloque:

    private void dibujaControles(Canvas c, Paint p){
        p.setColor(Color.argb(100,255,255,255));
        for(Rect r: controles){
            c.drawRect(r.left, r.top, r.right, 
                r.bottom, p);
        }
        p.setColor(Color.argb(255,255,255,255));
    }
Anuncios

En este caso lo primero que haremos sera modificar el color de nuestro pincel y luego por medio de un bucle for avanzado pasaremos por todos los controles, en este post hablamos sobre este bucle pero de forma mas especifica vayan a este post, y cada uno de los objetos los almacenaremos en r, en este caso dibujaremos en el Canvas con drawRect por medio de los cuatro valores que contiene el objeto r en ese momento, por ultimo volvemos a establecer el color original del pincel, ahora procederemos a agregar nuestro ultimo metodo:

    ArrayList<Rect> getControles(){
        return controles;
    }
Anuncios

Esta funcion solamente devuelve una referencia al objeto llamado controles, esto nos sera util para cuando debamos saber cuando se esta tocando alguno de ellos, con esto completamos nuestra clase HUD pero por ahora si lo probamos no veremos ninguna diferencia, antes de finalizar veamos el codigo final:

HUD.java

package org.example.invasores;

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 int mTextoFormato;
    private int mScreenAlto;
    private int mScreenAncho;

    private ArrayList<Rect> controles;

    static int ARRIBA = 0;
    static int ABAJO = 1;
    static int VUELTA = 2;
    static int DISPARO = 3;
    static int PAUSA = 4;

    HUD(Point tamano){
        mScreenAlto = tamano.y;
        mScreenAncho = tamano.x;
        mTextoFormato = tamano.x / 50;
        prepararControles();
    }

    private void prepararControles(){
        int botonAncho = mScreenAncho / 14;
        int botonAlto = mScreenAlto / 12;
        int botonPadding = mScreenAncho / 90;

        Rect arriba = new Rect(botonPadding,
                mScreenAlto - (botonAlto * 2)
                        - (botonPadding*2),
                botonAncho + botonPadding,
                mScreenAlto - botonAlto
                        -(botonPadding * 2) );
        Rect abajo = new Rect(botonPadding,
                mScreenAlto - botonAlto
                        - botonPadding,
                botonAncho + botonPadding,
                mScreenAlto - botonPadding);
        Rect vuelta = new Rect(mScreenAncho
                - botonPadding - botonAncho,
                mScreenAlto - botonAlto
                        - botonPadding,
                mScreenAncho - botonPadding,
                mScreenAlto - botonPadding);
        Rect disparo = new Rect(mScreenAncho
                - botonPadding - botonAncho,
                mScreenAlto - (botonAlto*2)
                        - (botonPadding*2),
                mScreenAncho - botonPadding,
                mScreenAlto - botonAlto
                        - (botonPadding * 2));
        Rect pausa = new Rect(mScreenAncho
                - botonPadding - botonAncho,
                botonPadding,
                mScreenAncho - botonPadding,
                botonPadding + botonAlto);
        controles = new ArrayList<>();
        controles.add(ARRIBA,arriba);
        controles.add(ABAJO,abajo);
        controles.add(VUELTA,vuelta);
        controles.add(DISPARO,disparo);
        controles.add(PAUSA,pausa);
    }

    void dibujar(Canvas c, Paint p, GameState gs){
        p.setColor(Color.argb(255,255,255,255));
        p.setTextSize(mTextoFormato);
        c.drawText("Top:" + gs.getPuntajeAlto(),
                mTextoFormato,mTextoFormato,p);
        c.drawText("Puntaje:" + gs.getPuntaje(),
                mTextoFormato,mTextoFormato*2,p);
        c.drawText("Vidas:" + gs.getNumNaves(),
                mTextoFormato,mTextoFormato*3,p);
        if (gs.getGameOver()){
            p.setTextSize(mTextoFormato * 5);
            c.drawText("PRESIONA PLAY",
                    mScreenAncho/6,mScreenAlto/2,p);
        }
        if (gs.getPausado() && !gs.getGameOver()){
            p.setTextSize(mTextoFormato * 5);
            c.drawText("PAUSADO",
                    mScreenAncho/3,mScreenAlto/2,p);
        }
        dibujaControles(c,p);
    }

    private void dibujaControles(Canvas c, Paint p){
        p.setColor(Color.argb(100,255,255,255));
        for(Rect r: controles){
            c.drawRect(r.left, r.top, r.right, r.bottom, p);
        }
        p.setColor(Color.argb(255,255,255,255));
    }

    ArrayList<Rect> getControles(){
        return controles;
    }
}
Anuncios

En resumen, hoy hemos hecho la clase que se encargara de dibujar la interfaz de nuestro juego, tanto sea para ver los valores de nuestro juego (puntaje, puntaje record, vidas), asi como tambien los controles del juego, como los mensajes dependiendo del estado del juego, 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.

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