![\"runner\"](\"http:\/\/www.pixnbgames.com\/blog\/wp-content\/uploads\/2015\/08\/runner.gif\")
<\/a>Por ejemplo, si queremos mostrar un personaje corriendo, deber\u00edamos tener\u00a0una serie de im\u00e1genes, cada una con peque\u00f1o avance sobre la imagen anterior; de forma que al mostrarlas una detr\u00e1s de otra, podamos ver como el personaje se mueve:<\/p>\n La clase encargada de gestionar nuestras animaciones cuadro por cuadro es B\u00e1sicamente esta clase necesita conocer estos cuatro elementos:<\/p>\n Normalmente, en un videojuego, cada personaje tendr\u00e1 varias animaciones y se dibujar\u00e1 una animaci\u00f3n u otra dependiendo del estado del personaje (andando, corriendo, saltando, golpeando, etc.). Para hacer este ejemplo lo m\u00e1s claro posible, voy a olvidarme de los estados y s\u00f3lo mostrar\u00e9 un \u00fanico elemento con una sola animaci\u00f3n en pantalla.<\/p>\n <\/p>\n Para este ejemplo utilizar\u00e9 un archivo (charset.png<\/a>) que contiene todas las im\u00e1genes que componen la animaci\u00f3n:<\/p>\n De esta forma, podemos obtener f\u00e1cilmente todos los cuadros que componen la animaci\u00f3n:<\/p>\n <\/p>\n Una vez tenemos cargadas las im\u00e1genes que componen la animaci\u00f3n, podemos construirla. Para este ejemplo repetiremos la animaci\u00f3n de indefinidamente, as\u00ed que usamos el modo <\/p>\n A la hora de dibujar, el objeto <\/p>\n As\u00ed queda la clase cuando unimos todo lo anterior:<\/p>\n <\/p>\n <\/p>\n Puedes descargar el proyecto de ejemplo de mi repositorio de GitHub<\/a>.<\/p>\n <\/p>\n Saludos,<\/p>\n","protected":false},"excerpt":{"rendered":" Introducci\u00f3n A la hora de animar los elementos\u00a0de nuestros videojuegos, uno de los\u00a0m\u00e9todos con los que contamos son las animaciones cuadro por cuadro (frame by frame).\u00a0Es el m\u00e9todo cl\u00e1sico de animaci\u00f3n, y consiste en dibujar una serie de im\u00e1genes de Seguir leyendo Animaciones cuadro por cuadro en LibGDX<\/span><\/a><\/p>\n
\n <\/p>\nAnimaciones cuadro por cuadro en LibGDX<\/h1>\n
La clase Animation<\/h2>\n
Animation<\/code>. El trabajo de esta clase consiste en calcular el frame (cuadro) que debe pintarse en cada momento, siendo nosotros los encargados finales de dibujar el resultado.<\/p>\n\n
Animation.PlayMode<\/code>, e indica a nuestro objeto Animation<\/code> qu\u00e9 orden deben seguir las im\u00e1genes para conseguir la animaci\u00f3n deseada. Los modos posibles son:\n\n
NORMAL<\/code>: Los cuadros se dibujan del primero al \u00faltimo. Sin repetici\u00f3n. Es decir, una vez se alcance el \u00faltimo cuadro, siempre se dibujar\u00e1 este \u00faltimo cuadro.<\/li>\nREVERSED<\/code>: Los cuadros se dibujan del \u00faltimo al primero. Sin repetici\u00f3n.<\/li>\nLOOP<\/code>: Los cuadros se dibujan del primero al \u00faltimo. Una vez llegado al \u00faltimo cuadro, se vuelve a empezar por el primero y as\u00ed sucesivamente.<\/li>\nLOOP_REVERSED<\/code>: Los cuadros se dibujan del \u00faltimo al primero. Una vez alcanzado el primer cuadro, se vuelve a comenzar por el \u00faltimo y as\u00ed sucesivamente.<\/li>\nLOOP_PINGPONG<\/code>: Los cuadros se dibujan del primero al \u00faltimo. Una vez llegado al \u00faltimo cuadro, se comienza a dibujar hac\u00eda atr\u00e1s, del \u00faltimo al primero. Al llegar otra vez al primero, se vuelve a dibujar hac\u00eda delante, y as\u00ed sucesivamente.<\/li>\nLOOP_RANDOM<\/code>: Los cuadros se dibujan aleatoriamente, sin un orden definido.<\/li>\n<\/ul>\n<\/li>\n
\n <\/p>\nEjemplo<\/h2>\n
Im\u00e1genes<\/h3>\n
<\/a>Adem\u00e1s crear\u00e9 el archivo charset.atlas<\/a>, sabiendo que cada cuadro de la animaci\u00f3n ocupa 80 p\u00edxeles de ancho por 120 de alto. En el atlas, utilizar\u00e9 el mismo nombre para todos los cuadros, asign\u00e1ndoles un \u00edndice a cada uno de ellos. Quedar\u00e1 algo as\u00ed:<\/p>\ncharset.png\r\nformat: RGBA8888\r\nfilter: Linear,Linear\r\nrepeat: none\r\nrunning\r\n rotate: false\r\n xy: 0, 0\r\n size: 80, 120\r\n orig: 80, 120\r\n offset: 0, 0\r\n index: 0\r\nrunning\r\n rotate: false\r\n xy: 80, 0\r\n size: 80, 120\r\n orig: 80, 120\r\n offset: 0, 0\r\n index: 1\r\nrunning\r\n rotate: false\r\n xy: 160, 0\r\n size: 80, 120\r\n orig: 80, 120\r\n offset: 0, 0\r\n index: 2\r\n(contin\u00faa)\r\n<\/pre>\n
public class GdxAnimationExample extends ApplicationAdapter {\r\n ...\r\n \/\/ Atlas con todos los cuadros definidos en \"charset.atlas\"\r\n private TextureAtlas charset;\r\n ...\r\n \r\n @Override\r\n public void create () {\r\n ...\r\n \/\/ Carga de todas las imagenes definidas en \"charset.atlas\"\r\n charset = new TextureAtlas( Gdx.files.internal(\"charset.atlas\") );\r\n \r\n \/\/ Obtencion de las imagenes de la animacion \"running\"\r\n ArrayConstruir la animaci\u00f3n<\/h3>\n
PlayMode.LOOP<\/code>:<\/p>\npublic class GdxAnimationExample extends ApplicationAdapter {\r\n ...\r\n \/\/ Tiempo que permanece visible cada cuadro de la animacion\r\n private static float FRAME_DURATION = .05f;\r\n\r\n \/\/ Animacion del personaje corriendo\r\n private Animation runningAnimation;\r\n ...\r\n \r\n @Override\r\n public void create () {\r\n ...\r\n \/\/ Construcci\u00f3n de la animacion\r\n runningAnimation = new Animation(FRAME_DURATION, runningFrames, PlayMode.LOOP);\r\n ...\r\n }\r\n ...\r\n}\r\n<\/pre>\nDibujar cada cuadro<\/h3>\n
runningAnimation<\/code> nos devoler\u00e1 el cuadro que debe ser dibujado en funci\u00f3n del tiempo que haya transcurrido. Por ello, tenemos la variable local elapsed_time<\/code> donde vamos acumulando el tiempo transcurrido desde que la animaci\u00f3n comenz\u00f3:<\/p>\npublic class GdxAnimationExample extends ApplicationAdapter {\r\n ...\r\n \/\/ Cuadro que debe ser dibujado en cada momento\r\n private TextureRegion currentFrame;\r\n\r\n \/\/ Acumulador del tiempo que lleva representada una animacion\r\n private float elapsed_time = 0f;\r\n\r\n \/\/ Variables auxiliares para saber donde pintar la imagen para que quede centrada\r\n private float origin_x, origin_y;\r\n ...\r\n \r\n @Override\r\n public void render () {\r\n ...\r\n \/\/ Se acumula el tiempo transcurrido\r\n elapsed_time += Gdx.graphics.getDeltaTime();\r\n \r\n \/\/ Se obtiene el cuadro que debe ser dibujado\r\n currentFrame = runningAnimation.getKeyFrame(elapsed_time);\r\n\r\n \/\/ Dibujo en pantalla\r\n batch.begin();\r\n batch.draw(currentFrame, origin_x, origin_y);\r\n batch.end();\r\n ...\r\n }\r\n ...\r\n}\r\n<\/pre>\nEjemplo completo<\/h3>\n
\/**\r\n * Ejemplo de animacion frame-by-frame (cuadro por cuadro) con LibGDX:\r\n * \r\n * http:\/\/www.pixnbgames.com\/blog\/libgdx\/animaciones-cuadro-por-cuadro-en-libgdx\r\n * \r\n * @author angel\r\n *\/\r\npublic class GdxAnimationExample extends ApplicationAdapter {\r\n \r\n \/\/ Tiempo que permanece visible cada cuadro de la animacion\r\n private static float FRAME_DURATION = .05f;\r\n \r\n \/\/ Para dibujar en pantalla\r\n private SpriteBatch batch;\r\n \r\n \/\/ Atlas con todos los cuadros definidos en \"charset.atlas\"\r\n private TextureAtlas charset;\r\n \r\n \/\/ Cuadro que debe ser dibujado en cada momento\r\n private TextureRegion currentFrame;\r\n \r\n \/\/ Animacion del personaje corriendo\r\n private Animation runningAnimation;\r\n \r\n \/\/ Acumulador del tiempo que lleva representada una animacion\r\n private float elapsed_time = 0f;\r\n \r\n \/\/ Variables auxiliares para saber donde pintar la imagen para que quede centrada\r\n private float origin_x, origin_y;\r\n \r\n \r\n @Override\r\n public void create () {\r\n batch = new SpriteBatch();\r\n \r\n \/\/ Carga de los cuadros definidos en \"charset.atlas\"\r\n charset = new TextureAtlas( Gdx.files.internal(\"charset.atlas\") );\r\n \r\n \/\/ Se obtienen todas las imagenes para la animacion del personaje corriendo. Para hacer esto\r\n \/\/ lo mas facil posible, hemos definido todos los cuadros con el mismo nombre, \"running\", y\r\n \/\/ hemos asignado un indice (propiedad \"index\") a cada cuadro (ver \"charset.atlas\")\r\n ArrayC\u00f3digo fuente<\/h2>\n