Tutorial 2 Andengine - Sprites, Sprites Animados

Hoy se animaran y moveran imagenes :D. Por fin no? Bueno el tema de hoy es como cargar imágenes, estáticas y animadas. Lo primero es entender que es un sprite. Un sprite es una imagen maniobrable. Como esta, en este caso animada:









Pero esas imágenes se suelen estructurar y animar en tiempo de ejecución, y se estructura de esta manera:



Primero lo básico y luego progresamos. Para poder poner una imagen en la pantalla de su celular, primero deben cargarla y para cargarla Andengine nos ofrece una muy buena práctica que son los Atlases.

Un Atlas es una hoja de imagenes, cargada en memoria en la cual ordenamos nuestras texturas para acceder a ellas de una manera más eficiente.

Para poder cargar imagenes debemos alojarla en la carpeta /assets en su proyecto de android, si no existe, la creamos:



Veamos el cargado de un sprite en código, crearemos un Atlas y una textura primero:

private BitmapTextureAtlas miAtlas;
private ITextureRegion texturaChar;



Luego, debemos crear el sprite a partir de nuestra textura:

private Sprite charSprite;



Obtendremos algo así:



Desde aquí, podemos escalar a muchas cosas, conseguir un set de sprites y construir un mapa, etc. Pero mejor animarlo no? Bueno el proceso solo cambia un poco, para usar Sprites animados, primero necesitamos uno, yo les facilito este:



Los spritesheets, como se llaman estos dibujos, constan de filas y columnas, a las cuales podemos referenciar desde el motor para que se efectuen los cortes automaticos y las animaciones, según las frecuencias deseadas. Por ejemplo el spritesheet de arriba tiene 10 columnas y 10 filas, muchas vacias pero no importa, porque las podemos usar en el futuro para poner más animaciones.
Bueno primero crearemos una textura para nuestra animación:

private ITiledTextureRegion texturaAnimada;

Para luego cargarlo en nuestro atlas, el cual necesita ahora más tamaño, porque las medidas de la textura son 320 x 640 y debemos ubicarlo de manera que no tape la textura anterior osea 76 en x, 0 en y:



Luego creamos el objeto para nuestro Sprite animado:

private AnimatedSprite spriteAnimado;



Tengamos en cuenta esto :



Ejecutamos y obtenemos algo parecido a esto:



El código de la sesión lo pueden encontrar aquí y las imagenes en este mismo post, solo clickeenlas.

No duden en dejar sus preguntas, hasta la proxima.