En este post veremos una pequeña introducción a lo que son las animaciones con LibGDX y el uso de sprites.
¿Que es la animación con sprites?
Es una técnica utilizada en los videojuegos para dar la sensación de movimiento a los personajes que hacen parte de ella, el archivo consiste en una serie de imágenes (frames) del personaje en diferentes poses, cuando se muestran cada una de ellas se crea la ilusión de que el personaje se mueve (camina, corre, baila, pelea, etc)
Archivo sprite
Sprite animado
Herramientas
– Eclipse Indigo con Android y LibGDX instalado y configurado
– 2 imagenes, puedes buscar algunos por internet, pero OJO, para poder usarlos en LibGDX, las dimensiones de estos deben ser obligatoria mente potencia de 2, puedes utilizar algún editor de imágenes para lograr esto, si lo prefieres puedes usar las imágenes de abajo.
nobaile.gif
baile.gif
Descargate los sprites en tamaño original AQUI
Tiempo: 15 minutos
Nivel: Java Intermedio, Android intermedio
Implementacion de la animación en Eclipse
Nuestro objetivo sera crear un proyecto android que haga uso de dos animaciones que se cambiaran entre ellas cuando se presione la pantalla del dispositivo, la acción que realizara sera el de un «baile kawaii» 🙂
1.Crea un nuevo Application Android Project con la siguiente configuración:
Application Name: LibGDX Sprites
Project Name: LibGDXSprites
Package Name: com.bolivia.libgdxsprites
Activity: Blank Activity
Activity Name: MainActivity.java
Layout Name: activity_main.xml
2. Añade las siguientes librerías y carpetas a la carpeta LIBS/ del proyecto después actualiza para hacer efectivos los cambios (Refresh o F5).
– gdx.jar
– gdx-backend-android.jar
– armeabi-v7a/
– armeabi/
Selecciona gdx.jar y gdx-backend-android.jar con el mouse, clic derecho -> Build Path -> Add to build path para agregar las librerías al proyecto.
3. Crearemos la estructura del proyecto de la siguiente forma:
– Añade las imágenes «baile.gif» y «nobaile.gif» a la carpeta assets
– Crea una clase llamada MyAnimation.java en el paquete com.bolivia.libgdxsprites
4. El código de la clase MyAnimation es el siguiente:
01 package com.bolivia.libgdxsprites; 02 03 import com.badlogic.gdx.ApplicationListener; 04 import com.badlogic.gdx.Gdx; 05 import com.badlogic.gdx.graphics.GL10; 06 import com.badlogic.gdx.graphics.Texture; 07 import com.badlogic.gdx.graphics.g2d.Animation; 08 import com.badlogic.gdx.graphics.g2d.SpriteBatch; 09 import com.badlogic.gdx.graphics.g2d.TextureRegion; 10 11 public class MyAnimation implements ApplicationListener{ 12 //animaciones 13 private Animation bailaAnimation; 14 private Animation nobailaAnimation; 15 //tecturas 16 private SpriteBatch spriteBatch; 17 private TextureRegion currentFrame; 18 //control de tiempo 19 private float stateTime; 20 //bandera para cambio de estado 21 private boolean baila = false; 22 23 @Override 24 public void create() { 25 //carga las animaciones y la duracion entra cada una de ellas 26 bailaAnimation = new Animation( 0.1f, getSprites("baile.jpg",8,8) ); 27 nobailaAnimation = new Animation( 0.2f, getSprites("nobaile.jpg",8,2) ); 28 //inicia valores 29 spriteBatch = new SpriteBatch(); 30 stateTime = 0f; 31 } 32 33 @Override 34 public void dispose() { /* ... */ } 35 36 @Override 37 public void pause() { /* ... */ } 38 39 @Override 40 public void render() { 41 Gdx.gl.glClearColor( 1, 1, 1, 1); 42 Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT); 43 44 //Suma el tiempo transcurrido desde el ultimo frame 45 stateTime += Gdx.graphics.getDeltaTime(); 46 47 //cuando se toque la pantalla cambia el estado del personaje 48 if( Gdx.input.isTouched() ) 49 { 50 baila = !baila; 51 } 52 53 if( baila ) 54 { 55 currentFrame = bailaAnimation.getKeyFrame( stateTime, true ); 56 } 57 else 58 { 59 currentFrame = nobailaAnimation.getKeyFrame( stateTime, true ); 60 } 61 //pinta la textura en pantalla 62 spriteBatch.begin(); 63 spriteBatch.draw(currentFrame, 50, 50, 500, 500); 64 spriteBatch.end(); 65 } 66 67 @Override 68 public void resize(int arg0, int arg1) { /* ... */ } 69 70 @Override 71 public void resume() { /* ... */ } 72 73 /** 74 * Carga la textura y divide la imagen segun el numero de columnas y filas para colocar 75 * por frames individuales en un array 76 * @param file: String Nombre del archivo imagen en la carpeta ASSETS 77 * @param cols: numero de columnas 78 * @param rows: numero de filas 79 * @return TextureRegion[] 80 * */ 81 private TextureRegion[] getSprites( String file, int cols, int rows ) 82 { 83 Texture texture = new Texture( Gdx.files.internal(file) ); 84 TextureRegion[][] tmp = TextureRegion.split( texture, texture.getWidth() / cols, texture.getHeight() / rows); 85 TextureRegion[] Frames = new TextureRegion[cols * rows]; 86 int index = 0; 87 for (int i = 0; i < rows; i++) { 88 for (int j = 0; j < cols; j++) { 89 Frames[index++] = tmp[i][j]; 90 } 91 } 92 return Frames; 93 } 94 95 96 }//-->fin clase
#13,14 declaramos dos variables de tipo animation, uno para que el personaje baile, y otro para que se quedo quieto
#26,27 Cargamos las animaciones y la duración de cada una de ellas con Animation
Animation (float frameDuration, TextureRegion keyFrames)
#81,93 Definimos una función privada (getSprites) que nos ayudara a cargar los sprites, extraer cada frame y asignar a un array de tipo TextureRegion.
#48 implementamos el evento isTouched() para cuando el usuario presione la pantalla se cambia el estado de la animación.
#53,60 dependiendo del estado, el personaje se pondrá a bailar o se quedara quieto.
#63 pintamos la animación
5. Implementamos la clase anterior en nuestra clase MainActivity:
package com.bolivia.libgdxsprites; import com.badlogic.gdx.backends.android.AndroidApplication; import android.os.Bundle; public class MainActivity extends AndroidApplication { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); initialize( new MyAnimation(), false ); } }
Ejecuta y comienza a bailar
Realmente sencillo verdad, de la misma forma, se puede agregar mas eventos para que el personaje realice muchas mas animaciones, pero hay que tener cuidado con las dimensiones de los sprites y la cantidad de frames que estos tengan, ya que consumen mucha memoria.
Bajate el proyecto completo en este enlace michi
enjoy!!! 🙂
Estructura Interna de un archivo SVG. <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD[...]
JavaFX un producto de Sun Microsystems/Oracle Corporation que salio a la luz para competir con tecnologías como Flash o[...]
Java2d nos permite manipular imagenes y asi poder crear animaciones sencillas como muestra el siguiente video. Puedes de[...]
Aplicación en Java realida con el IDE de Netbeans 6.9 para trabajar con images en Base de Datos en Access 2003, el progr[...]
Magic Button, es un botón animado para android bajo licencia del MIT desarrollado por Bloder (Brasil), el proyecto esta[...]
Tink es una biblioteca de cifrado desarrollada por un grupo de criptógrafos e ingenieros de seguridad de Google lanzado[...]