Juegos en Android / Manejando el bate

Bienvenidos sean a este post, hoy agregaremos la capacidad de poder manejar nuestro bate con un evento que ya hemos visto.

Si recordamos a nuestro primer proyecto para poder atacar a los submarinos enemigos utilizamos el metodo onTouchEvent heredada de la clase Activity pero nuestra clase PongJuego no lo es, aunque afortunadamente SurfaceView tambien nos provee el metodo onTouchEvent, para poder trabajar con este metodo vamos a agregar el siguiente bloque en la clase PongJuego:

    @Override
    public boolean onTouchEvent(MotionEvent motionEvent){
        switch (motionEvent.getAction() 
                & MotionEvent.ACTION_MASK){
            case MotionEvent.ACTION_DOWN:
                mPausado = false;
                if(motionEvent.getX() > (mScreenX/2)){
                    mBate.setEstadoMovimiento(mBate.DERECHA);
                } else {
                    mBate.setEstadoMovimiento(mBate.IZQUIERDA);
                }
                break;
            case MotionEvent.ACTION_UP:
                mBate.setEstadoMovimiento(mBate.DETENIDO);
                break;
        }
        return true;
    }

En este metodo volveremos a redefinir el metodo onTouchEvent, luego tendremos un bloque switch donde por medio de getAction y ACTION_MASK, podremos interceptar todas las acciones sobre nuestra pantalla, en este caso en lugar de usar un condicional, como en el primer proyecto, usaremos el switch con los cases para interceptar dos acciones basicas como son ACTION_DOWN (cuando se aprieta la pantalla) y ACTION_UP (cuando se deja de tocar la pantalla).

En el caso de ACTION_DOWN lo primero que hace es setear a mPausado como false para que el juego deje de estar pausado, despues tiene un condicional donde verifica si getX es mayor a la mitad de mScreenX procede a llamar al metodo setEstadoMovimiento con el valor de DERECHA, en caso contrario (es decir se ejecuta el else) llama al mismo metodo pero le envia el valor de IZQUIERDA, con esto ya cubrimos el movimiento de una punta a la otra en la pantalla.

En cambio el siguiente case lo unico que hace es llamar a setEstadoMovimiento con el valor de DETENIDO para justamente detener a nuestro bate, por ultimo despues del switch devolvemos un true con el return true, con esto podriamos pasar a compilar nuestra aplicacion pero antes veamos como quedo hasta ahora nuestro codigo final:

PongJuego.java

package org.example.pong;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.Log;
import android.view.MotionEvent;
import android.view.SurfaceHolder;
import android.view.SurfaceView;

class PongJuego extends SurfaceView implements Runnable {

    private final boolean DEPURANDO = true;

    private SurfaceHolder mNuestroCont;
    private Canvas mCanvas;
    private Paint mPincel;

    private long mFPS;

    private final int MILES_EN_SEGUNDO = 1000;

    private int mScreenX;
    private int mScreenY;

    private int mFontTam;
    private int mFontMargen;

    private Bate mBate;
    private Pelota mPelota;

    private int mPuntaje;
    private int mVidas;

    private Thread mJuegoThread = null;
    private volatile boolean mJugando;
    private boolean mPausado = true;

    public PongJuego(Context contexto, int x, int y){
        super(contexto);

        mScreenX = x;
        mScreenY = y;

        mFontTam = mScreenX / 20;
        mFontMargen = mScreenX /75;

        mNuestroCont = getHolder();
        mPincel = new Paint();

        mPelota = new Pelota(mScreenX);
        mBate = new Bate(mScreenX,mScreenY);

        iniciaNuevoJuego();
    }

    private void iniciaNuevoJuego(){

        mPuntaje = 0;
        mVidas = 3;
        mPelota.reset(mScreenX,mScreenY);
    }

    private void dibujar(){
        if (mNuestroCont.getSurface().isValid()){
            mCanvas = mNuestroCont.lockCanvas();
            mCanvas.drawColor(Color.argb(255,26,128,182));
            mPincel.setColor(Color.argb(255,255,255,255));
            mCanvas.drawRect(mPelota.getmRect(),mPincel);
            mCanvas.drawRect(mBate.getmRect(),mPincel);
            mPincel.setTextSize(mFontTam);
            mCanvas.drawText("Puntaje: " + mPuntaje
                            + "  Vidas: " + mVidas,
                    mFontMargen,mFontTam,mPincel);
            if (DEPURANDO){
                imprimirDepuracion();
            }
            mNuestroCont.unlockCanvasAndPost(mCanvas);
        }
    }

    private void imprimirDepuracion(){
        int debugTam = mFontTam / 2;
        int debugComienzo = 150;
        mPincel.setTextSize(debugTam);
        mCanvas.drawText("FPS: " + mFPS,
                10,
                debugComienzo + debugTam,
                mPincel);
    }

    @Override
    public void run(){
        while(mJugando){
            long frameInicio = System.currentTimeMillis();
            if (!mPausado){
                actualizar();
                detectarColisiones();
            }
            dibujar();
            long esteFrameTiempo = System.currentTimeMillis() - frameInicio;
            if (esteFrameTiempo > 0){
                mFPS = MILES_EN_SEGUNDO / esteFrameTiempo;
            }
        }
    }

    private void actualizar(){
        mPelota.actualizar(mFPS);
        mBate.actualizar(mFPS);
    }

    private void detectarColisiones(){

    }

    public void pause(){
        mJugando = false;
        try{
            mJuegoThread.join();
        } catch (InterruptedException e){
            Log.e("Error","uniendo a thread");
        }
    }

    public void resume(){
        mJugando = true;
        mJuegoThread = new Thread(this);
        mJuegoThread.start();
    }

    @Override
    public boolean onTouchEvent(MotionEvent motionEvent){
        switch (motionEvent.getAction()
                & MotionEvent.ACTION_MASK){
            case MotionEvent.ACTION_DOWN:
                mPausado = false;
                if(motionEvent.getX() > (mScreenX/2)){
                    mBate.setEstadoMovimiento(mBate.DERECHA);
                } else {
                    mBate.setEstadoMovimiento(mBate.IZQUIERDA);
                }
                break;
            case MotionEvent.ACTION_UP:
                mBate.setEstadoMovimiento(mBate.DETENIDO);
                break;
        }
        return true;
    }

}

Ahora con todo esto explicado podemos pasar a probar nuestro juego como se ve en el siguiente video

Como podemos ver todavia seguimos con la misma falla, es decir que al salir del estado pausado la pelota desaparecio (esto ya lo solucionaremos mas adelante) pero podemos observar como a medida que apretamos en pantalla se va desplazando nuestro bate.

En resumen, ya logramos el primer paso importante en nuestro juego como es controlar a nuestro bate, tambien ya podemos observar como de a poco se va completando nuestro juego y en los posts venideros lo iremos mejorando, 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.