Juegos en Android / Animadora

Bienvenidos sean a este post, hasta el post anterior hemos hecho la base de nuestro juego pero a partir de este se comienza a complicar la cosa.

Para realizar las animaciones vamos a trabajar con lo que se llama lamina de animaciones, sprite sheet, la cual en realidad es una sola imagen que contendra las distintos frames de la animacion y nuestra tarea sera cambiar rapidamente la imagen dibujada dando la sensacion de que se mueve, tal como si fuera un dibujo animado o cartoon, para lograr esto vamos a crear una clase que se encargara de hacer el efecto de animacion por nosotros, procedamos a crear una nueva clase con las siguientes caracteristicas:

• Nombre: Animadora
• Tipo: Class

Una vez creada la nueva clase modificamos el codigo existente con el siguiente:

package org.example.pepeaventura;

import android.graphics.Rect;

class Animadora {
    private Rect mRectFuente;
    private int mCuentaFrame;
    private int mActualFrame;
    private long mCorazonFrame;
    private int mPeriodoFrame;
    private int mAnchoFrame;

    Animadora(float alturaFrame,
              float anchoFrame,
              int cuentaFrame,
              int pixelsPorMetro){

        final int ANIM_FPS = 10;

        this.mActualFrame = 0;
        this.mCuentaFrame = cuentaFrame;
        this.mAnchoFrame = (int) anchoFrame * pixelsPorMetro;

        alturaFrame = alturaFrame * pixelsPorMetro;

        mRectFuente = new Rect(
                0,0,
                mAnchoFrame,
                (int)alturaFrame);

        mPeriodoFrame = 1000 / ANIM_FPS;
        mCorazonFrame = 0L;
    }
}

Al principio de nuestra clase vamos a tener la declaracion de las siguientes variables:

• mRectFuente, de una forma resumida contendra el Rect del sprite que usaremos para la animacion
• mCuentaFrame, sera para inidicar la cantidad de frames que hay en la lamina de animaciones
• mActualFrame, indica cual es el frame actual de la animacion
• mCorazonFrame, contendra la cantidad de tiempo que el cuadro actual ha estado siendo utilizado
• mPeriodoFrame, contiene el valor en milisegundos de cuando se tiene que mostrar un frame
• mAnchoFrame, contendra el ancho en pixels del frame de la animacion

Como podran ver aca tenemos los datos basicos para poder crear el frame de nuestra animacion, nuestro siguiente paso sera el constructor, el cual usaremos principalmente para iniciar las variables antes mencionadas, para ello recibiremos cuatro atributos:

• alturaFrame, indicaremos la altura en pixels del frame
• anchoFrame, idem al anterior pero con el ancho del frame
• cuentaFrame, indicara la cantidad de frames de nuestra animacion
• pixelsPorMetro, el cual usaremos para transformar los pixels en metros virtuales

Dentro del constructor tendremos una constante, ANIM_FPS, para indicar la cantidad de frames que se intercambiaran por cada segundo, en este caso usamos 10 porque es una medida arbitraria pero funciona bien, despues setearemos cual va a ser nuestro cuadro actual inicial (mActualFrame) y para la ocasion sera 0, luego iniciamos a mCuentaFrame con el valor informado en cuentaFrame, para despues definir a mAnchoFrame en base al anchoFrame recibido y multiplicado por pixelsPorMetro que nos servira para hacer la escala, reescalaremos a alturaFrame gracias a pixelsPorMetro.

El siguiente paso sera crear al rectangulo donde estara nuestro sprite, mRectFuente, y para ello le pasaremos como left y top a 0 porque es donde debera empezar y luego pasaremos el ancho y el alto del frame, tengamos en cuenta que al trabajar en este instante siempre sera el primer frame, para iniciar a mPeriodoFrame dividimos 1000 por ANIM_FPS lo cual nos dara un valor de 100 y nos servira para cambiar los frames cada 100 ms, y mCorazonFrame sera iniciada con 0 para contar hasta 100, con esto concluimos la primera parte pasemos a agregar el siguiente metodo:

    Rect getTiempoActual(long tiempo){
        if (tiempo > (mCorazonFrame + mPeriodoFrame)){
            mCorazonFrame = tiempo;
            mActualFrame++;
            if (mActualFrame >= mCuentaFrame)
                mActualFrame = 0;
        }

        this.mRectFuente.left = mActualFrame * mAnchoFrame;
        this.mRectFuente.right = this.mRectFuente.left + mAnchoFrame;

        return mRectFuente;
    }

Con este metodo obtendremos el momento actual de nuestro juego, donde primero chequearemos si tiempo es mayor a la suma de mCorazonFrame con mPeriodoFrame, si es verdadero asignaremos el valor de tiempo a mCorazonFrame e incrementaremos a mActualFrame, despues tendremos un condicional donde si mActualFrame es mayor o igual a mCuentaFrame procede a reiniciarlo seteandolo con cero, despues de realizada estas modificaciones (en caso de que se hayan hecho) las usaremos para modificar los valores de left y right de mRectFuente para nuestra lamina de animaciones, es decir que se encargara de pasar al siguiente frame de nuestra animacion, como podran observar no necesitamos modificar la altura sino simplemente el ancho de la misma que queda establecida por left y right, por ultimo devolvemos el nuevo «sprite» de la animacion almacenado en mRectFuente, con esto ya tenemos una clase que se encarga de animar a nuestros objetos animados veamos como quedo el codigo final hasta ahora:

Animadora.java

package org.example.pepeaventura;

import android.graphics.Rect;

class Animadora {
    private Rect mRectFuente;
    private int mCuentaFrame;
    private int mActualFrame;
    private long mCorazonFrame;
    private int mPeriodoFrame;
    private int mAnchoFrame;

    Animadora(float alturaFrame,
              float anchoFrame,
              int cuentaFrame,
              int pixelsPorMetro){

        final int ANIM_FPS = 10;

        this.mActualFrame = 0;
        this.mCuentaFrame = cuentaFrame;
        this.mAnchoFrame = (int) anchoFrame * pixelsPorMetro;

        alturaFrame = alturaFrame * pixelsPorMetro;

        mRectFuente = new Rect(
                0,0,
                mAnchoFrame,
                (int)alturaFrame);

        mPeriodoFrame = 1000 / ANIM_FPS;
        mCorazonFrame = 0L;
    }

    Rect getTiempoActual(long tiempo){
        if (tiempo > (mCorazonFrame + mPeriodoFrame)){
            mCorazonFrame = tiempo;
            mActualFrame++;
            if (mActualFrame >= mCuentaFrame)
                mActualFrame = 0;
        }

        this.mRectFuente.left = mActualFrame * mAnchoFrame;
        this.mRectFuente.right = this.mRectFuente.left + mAnchoFrame;

        return mRectFuente;
    }
}

En resumen, hoy hemos creado la clase que se encargara de hacer las animaciones, hemos visto como es su modalidad de trabajo, hemos creado el metodo que realmente se encargara de hacer la funcion y como en los proximos posts podremos ponerlo en practica, 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.