Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Android / Animación con sprites y LibGDX

Animación con sprites y LibGDX

Autor jc mouse viernes, septiembre 6, 2013

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

palito animado

Sprite animado

muevelo

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

kawaii

baile.gif

cool

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

animacion android

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

sony xperia

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!!! 🙂

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

También Te Podría Interesar

JLabel circular

JLabel circular

En este post crearemos un swing Label personalizado que tendrá la forma circular en su borde, con esto obtendremos un bo...

Programación Shell: Estructuras de control

Programación Shell: Estructuras de control

Las estructuras de control de Shell son muy parecidos a otras lenguajes de programación. Las estructuras disponibles en...

Rompecabezas en C# (Tutorial)

Rompecabezas en C# (Tutorial)

En este tutorial crearemos un sencillo rompecabezas de un tamaño de 4×6 con 24 piezas que se podrán mover haciendo...

Crea un “Juego de Memoria” en java

Crea un “Juego de Memoria” en java

En este tutorial crearemos un sencillo juego de memoria en lenguaje java. Necesitamos IDE Netbeans 7.x Editor de imágene...

Conectar java con Firebird

Conectar java con Firebird

En este tutorial veremos la forma de conectarse a una base de datos de Firebird utilizando el lenguaje Java y el IDE Net...

Crear archivos JNLP con Netbeans

Crear archivos JNLP con Netbeans

¿Que son los archivos JNLP? Java Network Launching Protocol (JNLP) es una especificación usada por Java Web Start. Esta...

6 comentarios en “Animación con sprites y LibGDX”

  1. Pablo Dante dice:

    Hola.
    Estoy reproduciendo el ejercicio pero, no logro reproducir el efecto de acuerdo a lo que se explica en este desarrollo.
    Si hay alguna posibilidad de ir corrigiendolo por partes me gustaría contactarme con usted a efecto de poder comprender mejor MVC.
    Un saludo cordial.

    1. Mouse dice:

      mmmm dime en que parte tienes problemas así voy actualizando el post 🙂

  2. edward arevalo dice:

    grax nene esta muy bueno tu ejemplo la verdad me sirve de mucho

  3. Arturo Valencia dice:

    Muy bien tu aportación.
    Resulta que yo las almaceno en una Base de Datos el problema es que mi Base de Datos es en Red y Cuando quiero ver esa imagen desde otra maquina no se visualiza.
    ¿Que solución me recomiendas? He pensado en usar sockets pero la verdad no se Gracias

    1. Mouse dice:

      pero comprueba que las imágenes si se estén cargando

  4. nicolas dice:

    te hago una pregunta: para que sirve ob_start() al crear la tabla de salida???

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

Comparte lo que sabes

Categorias

Últimas entradas

Si quieres cambiar el nombre de tus atributos sin tener que reescribir código java por X o Y razón, GSON te permite reno...

Un JList nos permite almacenar objetos en una lista y mostrarlos gráficamente en una serie vertical en el cual el usuari...

El proyecto “Java Decompiler” tiene como objetivo desarrollar herramientas para descompilar y analizar byte...

En este post aprenderemos lo que es un JSON Web Token, como crear nuestro propio token de acceso y como usarlo en un Ser...

Android Bolivia

Bandera en Alto