Libgdx Animation Sprite

Jun 16th 2014, 09:44

Libgdx has it's own class Animation, however that is a basic animation. In the game I've developed some of the animation needs mode advanced frame ordering using a single spritesheet.

 

Here is the example of the animation spritesheet 

 

Animation Spritesheet

 

 

And here is the frames of animation I want to accomplish

 

frame number is started from 0 (top left)

Walk frames : 0,1,2,3,4,3,2,1 (loop)

Attack frames : 5,6,7,7,7,7  --> the character stays on frame 7 for a while

Dizzy and sprawl : 17,18,19,18,17,18,19,18,13,14,15,16  (17 to 19 for dizzy animation, the rest is for Sprawling)

 

So I wrote my own class to handle that task, Because everyday I use scene2d, I decided to extend the Actor class, then please welcome ... ActorClip ...

 

Using the Class

 

Step 1:

Create an animation spritesheet that will be linked with the actor, it should have same cell size on every animation frame, see above example every cell has 100x100 size in px.

 

Step 2:

Your character/actor must extends the ActorClip class, In your extended ActorClip class, create the Clip object with the parameters are TextureRegion of the animation, and animation grid size 

 

Character.java

Show Plain Text
  1. package com.boontaran.example;
  2.  
  3. import com.badlogic.gdx.Gdx;
  4. import com.badlogic.gdx.graphics.Texture;
  5. import com.badlogic.gdx.graphics.g2d.TextureRegion;
  6. import com.boontaran.games.ActorClip;
  7. import com.boontaran.games.Clip;
  8.  
  9. public class Character extends ActorClip {
  10.     private Clip clip;
  11.    
  12.    
  13.     public Character() {
  14.         //define the spritesheet,
  15.         // in this example it's 500 x 500 (each cells is 100x100 px)  in image.png
  16.         TextureRegion region = new TextureRegion(new Texture(Gdx.files.internal("assets/image.png")), 500, 500);
  17.        
  18.         //create the clip, grid/cell size is 100x100
  19.         clip = new Clip(region, 100, 100);
  20.        
  21.         //assign the clip to this actor
  22.         setClip(clip);
  23.         clip.setFPS(12);
  24.        
  25.         //other things you may need to adjust ...
  26.         //clipOffsetX = ...
  27.         //clipOffsetY = ...
  28.            
  29.         //you can also monitor the clip state
  30.         clip.addListener(new Clip.ClipListener() {
  31.            
  32.             //called when animation reach every keyframe
  33.             @Override
  34.             public void onFrame(int num) {
  35.                 // ... 
  36.             }
  37.             //called on every animation completed
  38.             @Override
  39.             public void onComplete() {
  40.                 // ...  example :
  41.                 /*    
  42.                                         //reset state
  43.                     state = IDLE;
  44.  
  45.                 */
  46.             }
  47.         });
  48.     }
  49.    
  50.     //these methods will control the clip
  51.         public void walk() {
  52.         //attention!! you may add a guard to make sure the methods is just called once ..
  53.         // like this :
  54.        
  55.         /*
  56.         if(state == WALK) return;
  57.         state = WALK;
  58.         */
  59.        
  60.         //frames 0,1,2,3,4,3,2,1  loop     
  61.         clip.playFrames(new int[]{0,1,2,3,4,3,2,1}, true);
  62.     }
  63.     public void attack() {
  64.         //frames 5,5,5,5,6,7,7,7,7 no loop
  65.         clip.playFrames(new int[]{5,5,5,5,5,6,7,7,7,7}, false);
  66.     }
  67.     public void die() {
  68.         clip.playFrames(new int[]{17,18,19,18,17,18,19,18,13,14,15,16}, false);
  69.     }
  70.         public void stand() {
  71.         clip.singleFrame(2);
  72.         }
  73. }

 

 

Step 3:

Done, now you have a custom actor with animation inside it and ready to be animated. Here is the example of the game screen using scene2d with the Actor Clip animation

 

Show Plain Text
  1. package com.boontaran.example;
  2.  
  3. import com.badlogic.gdx.Gdx;
  4. import com.badlogic.gdx.Screen;
  5. import com.badlogic.gdx.graphics.GL20;
  6. import com.badlogic.gdx.scenes.scene2d.Stage;
  7.  
  8. public class TestScreen implements Screen {
  9.     private Stage stage;
  10.    
  11.     public TestScreen() {
  12.         stage = new Stage();
  13.        
  14.         //create character, add to stage
  15.         Character character = new Character();
  16.         stage.addActor(character);
  17.         character.setPosition(200, 200);
  18.  
  19.                 //play the animation
  20.                 character.walk();
  21.         //character.die();
  22.         //character.attack();
  23.                
  24.     }
  25.  
  26.     //  ... ....
  27.  
  28. }

Download the ActorClip

comments powered by Disqus