Juegos en Android / Agregando la explosion

Bienvenidos sean a este post, en este post veremos como agregar la explosion que veremos cuando se destruya un enemigo o nos destruyan.

Para lograr esto vamos a utilizar dos clases, una que va a ser la particula y otra que se va a encargar de generar un monton de la primer clase, por esta razon vamos a generar primero la clase encargada de la particula y para ello crearemos una nueva clase como hasta ahora pero con los siguientes datos:

• Nombre: Particula
• Tipo: Class

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

package org.example.invasores;

import android.graphics.PointF;

class Particula {
    PointF mVelocidad;
    PointF mPosicion;

    Particula (PointF direccion){

        mVelocidad = new PointF();
        mPosicion = new PointF();

        mVelocidad.x = direccion.x;
        mVelocidad.y = direccion.y;
    }
}

En esta clase la establecemos como privada, luego declaramos dos objetos de tipo PointF llamados mVelocidad y mPosicion, utilizaremos esta clase porque nos permite contener dos coordenadas de tipo flotante (float), lo siguiente sera crear el constructor para esta clase, en este caso recibe un atributo de tipo PointF al cual llamaremos direccion, lo siguiente sera definir el espacio en memoria a los objetos creados anteriormente, nuestro siguiente paso asignar a las instancias x e y del objeto con el valor de x e y contenido en direccion, nuestro siguiente paso sera agregar estos metodos a la clase:

    void actualizar(){
        mPosicion.x += mVelocidad.x;
        mPosicion.y += mVelocidad.y;
    }

    void setPosicion(PointF posicion){
        mPosicion.x = posicion.x;
        mPosicion.y = posicion.y;
    }

    PointF getPosicion(){
        return mPosicion;
    }

La primera funcion se encarga de mover la particula y para ello lo haremos incrementandolo en base a los valores de x e y en mVelocidad respectivamente, este metodo sera utilizado por medio de la proxima clase y a su vez por las fisicas del juego pero ese sera un tema que veremos mas adelante, el siguiente metodo es el encargado de establecer la posicion de las particula antes de ser iniciada por medio del objeto que recibe como atributo, por ultimo tenemos un metodo que nos devuelve a mPosicion, con esto terminamos la clase encargada de la particula, nuestro siguiente paso sera crear la clase encargada de manejar a cada una de las particulas para lo cual crearemos una nueva clase con los siguientes datos:

• Nombre: SistemaParticula
• Tipo: Class

Una vez creada la clase reemplacemos el codigo existente con el siguiente:

package org.example.invasores;

import java.util.ArrayList;
import java.util.Random;

class SistemaParticula {
    float mDuracion;

    ArrayList<Particula> mParticulas;
    Random random = new Random();
    boolean mEstaCorriendo = false;
}

En este caso vamos a establecer esta clase como privada, luego crearemos cuatro variables:

• La primera sera para la duracion de la explosion
• La segunda sera el array que guarda cada una de las particulas
• La tercera se encarga de generar los valores al azar
• La ultima sera la encargada de informar si el sistema esta corriendo o no

El siguiente paso sera agregar estos dos metodos:

    void iniciar(int numParticulas){
        mParticulas = new ArrayList<>();

        for(int i=0; i < numParticulas; i++){
            float angulo = (random.nextInt(360));
            angulo = angulo * 3.14f / 180.f;
            float velocidad = (random.nextInt(20) + 1);

            PointF direccion;

            direccion = new PointF(
                    (float)Math.cos(angulo) * velocidad,
                    (float)Math.sin(angulo) * velocidad);

            mParticulas.add(new Particula(direccion));
        }
    }

    void actualizar(long fps){
        mDuracion -= (1f/fps);

        for(Particula p : mParticulas)
            p.actualizar();

        if (mDuracion < 0)
            mEstaCorriendo = false;
    }

El primer metodo sera el encargado de hacer toda la «magia» porque primero definiremos a mParticulas luego tendremos un bucle for que contara desde cero hasta el numero de particulas que informamos en el argumento numParticulas, lo primero que haremos en este bloque sera definir una nueva variable de tipo float y le asignamos un numero al azar entre 0 y 359, lo siguiente sera multiplicar este numero por 3.14 dividido 180, esto convertira el numero de grados a radianes lo cual nos permitira ser usado mas adelante por la clase Math, nuestra ultima variable llamada velocidad es asignada con un numero al azar entre 1 y 20, esto es gracias al mas uno que tiene despues del nextint.

Nota: En la division de transformacion de grados a radianes, la f que pasamos al final de cada numero es para indicarle al lenguaje que es de tipo float sino asume que es double y nos devolvera un error al compilarlo.

El siguiente paso sera crear un objeto de tipo PointF que llamaremos direccion, ya tenemos el objeto y tambien dos variables con el angulo y la velocidad lo proximo sera convertirlo en vectores para que podamos utilizarlos pero antes debemos definir a nuestro objeto direccion, para ello usaremos el constructor y para cada eje usaremos a coseno y seno para los ejes X e Y respectivamente, en ambos casos aplicaremos sus respectivas funciones matematicas al valor en angulo y lo multiplicaremos por velocidad, ya que con el angulo definiremos en que direccion saldra y con el otro a cual velocidad, por ultimo con todo esto calculado podremos agregarlo para crear una nueva particula.

El siguiente metodo es actualizar, este recibe el parametro de los fps de nuestro dispositivo, lo primero que haremos es disminuir la duracion y para ello divide uno por el valor informado en fps y se lo resta al valor en duracion, luego tenemos un for mejorado donde pasa por todas las particulas y las almacena en p y actualiza a cada una de ellas, el siguiente es un condicional donde si duracion es menor a cero establece a mEstaCorriendo como false, para nuestro siguiente paso agregaremos el siguiente metodo:

    void emitirParticulas(PointF posicionInicial){
        mEstaCorriendo = true;
        mDuracion = 1f;

        for(Particula p : mParticulas)
            p.setPosicion(posicionInicial);
    }

Este sera el metodo encargado de emitir las particulas, para ello recibiremos la posicion inicial como argumento, lo primero que haremos sera establecer en true a mEstaCorriendo luego el valor de mDuracion, lo siguiente sera un for mejorado para pasar por todas las particulas que tenemos y estableceremos la posicion inicial de cada una de ellas, nuestro ultimo metodo sera el siguiente:

    void dibujar(Canvas canvas, Paint pincel){
        for(Particula p : mParticulas){
            pincel.setColor(Color.argb(255,
                    random.nextInt(256),
                    random.nextInt(256),
                    random.nextInt(256)));
            canvas.drawRect(p.getPosicion().x,
                    p.getPosicion().y,
                    p.getPosicion().x+25,
                    p.getPosicion().y+25,
                    pincel);
        }
    }

En este metodo recibiremos un Canvas y un Paint, despues en el bloque tendremos un for mejorado para pasar nuevamente por todas las particulas, el primer bloque sera para establecer el color de las particulas, en este caso vamos a usar numeros al azar para cada uno de los componentes rgb y de esta forma tener colores completamente distintos para cada particula, lo siguiente sera el drawRect que usamos siempre con Canvas, para el left y top usamos al eje X e Y de cada particula, respectivamente, para el right y el bottom usamos los mismos ejes pero le incrementamos en 25, con esto ya terminamos nuestra clase pasemos a ver como quedo nuestro codigo:

SistemaParticula.java

package org.example.invasores;

import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PointF;

import java.util.ArrayList;
import java.util.Random;

class SistemaParticula {
    float mDuracion;

    ArrayList<Particula> mParticulas;
    Random random = new Random();
    boolean mEstaCorriendo = false;

    void iniciar(int numParticulas){
        mParticulas = new ArrayList<>();

        for(int i=0; i < numParticulas; i++){
            float angulo = (random.nextInt(360));
            angulo = angulo * 3.14f / 180.f;
            float velocidad = (random.nextInt(20) + 1);

            PointF direccion;

            direccion = new PointF(
                    (float)Math.cos(angulo) * velocidad,
                    (float)Math.sin(angulo) * velocidad);

            mParticulas.add(new Particula(direccion));
        }
    }

    void actualizar(long fps){
        mDuracion -= (1f/fps);

        for(Particula p : mParticulas)
            p.actualizar();

        if (mDuracion < 0)
            mEstaCorriendo = false;
    }

    void emitirParticulas(PointF posicionInicial){
        mEstaCorriendo = true;
        mDuracion = 1f;

        for(Particula p : mParticulas)
            p.setPosicion(posicionInicial);
    }

    void dibujar(Canvas canvas, Paint pincel){
        for(Particula p : mParticulas){
            pincel.setColor(Color.argb(255,
                    random.nextInt(256),
                    random.nextInt(256),
                    random.nextInt(256)));
            canvas.drawRect(p.getPosicion().x,
                    p.getPosicion().y,
                    p.getPosicion().x+25,
                    p.getPosicion().y+25,
                    pincel);
        }
    }
}

Y veamos el codigo de la clase Particula:

Particula.java

package org.example.invasores;

import android.graphics.PointF;

class Particula {
    PointF mVelocidad;
    PointF mPosicion;

    Particula (PointF direccion){

        mVelocidad = new PointF();
        mPosicion = new PointF();

        mVelocidad.x = direccion.x;
        mVelocidad.y = direccion.y;
    }

    void actualizar(){
        mPosicion.x += mVelocidad.x;
        mPosicion.y += mVelocidad.y;
    }

    void setPosicion(PointF posicion){
        mPosicion.x = posicion.x;
        mPosicion.y = posicion.y;
    }

    PointF getPosicion(){
        return mPosicion;
    }
}

Nuestro ultimo paso sera implementar la clase de SistemaParticula en nuestro GameEngine, para ello declararemos un objeto de esta clase al lado de los otros objetos de la clase GameEngine:

SistemaParticula mSistemaParticula;

El siguiente paso sera definirla en el constructor y llamar al metodo iniciar:

        mSistemaParticula = new SistemaParticula();
        mSistemaParticula.iniciar(1000);

Al metodo iniciar le pasamos el valor de 1000 para que genere 1000 particulas, como esta va a ser una prueba vamos a modificar el metodo onTouchEvent para emitir las particulas cuando toquemos la pantalla y para ello vamos a agregar este bloque:

        mSistemaParticula.emitirParticulas(
                new PointF(500,500));

Esto hara que nuestras particulas comiencen desde la posicion 500 de ambos ejes.

Importante: Las modificaciones que haremos a continuacion son estrictamente de prueba, les recomiendo que una vez testeada la explosion vuelvan todo para atras porque de lo contrario tendremos una serie de errores en nuestro juego, una vez aclarado esto prosigamos.

La primera modificacion la haremos en el metodo run donde cambiaremos esta linea:

mRenderer.dibujar(mGameState,mHud);

De la siguiente forma:

mRenderer.dibujar(mGameState,mHud,mSistemaParticula);

Esto ocasionara un error, para solucionarlo debemos ir a nuestra clase Renderer y modificaremos esta linea:

void dibujar(GameState gs, HUD hud){

De la siguiente forma:

void dibujar(GameState gs, HUD hud, SistemaParticula sp){

Con esto ya solucionamos el error, nuestra ultima modificacion sera agregar en el metodo dibujar el siguiente condicional:

            if (sp.mEstaCorriendo)
                sp.dibujar(mCanvas,pincel);

En este caso simplemente verifica si mEstaCorriendo esta en estado verdadero y procede a llamar al dibujar de SistemaParticulas y le pasa el Canvas y el pincel, con esto ya podemos probar nuestra modificacion como se ve en el siguiente video

Si se estan preguntando por la explosion, esta fallo porque todavia no tenemos una clase que controle las fisicas del juego si prestan atencion pueden ver como el punto va cambiando de color porque es la representacion de las 1000 particulas siempre en la misma posicion pero de las fisicas las veremos en nuestro proximo post.

En resumen, hoy hemos visto como crear una explosion, primero creamos la clase para cada una de las particulas, una clase para cada una de ellas, la hemos implementado en nuestra clase GameEngine y hemos hecho una modificacion temporal para poder probarla, 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.