Saturday 22 September 2012

#1.6 Tutorial (LibGDX & MTX) Test4_Animations

Important: Please download the latest test project


TEST SCREEN

I removed all the buttons from previous screen and created a clean screen, added a bat and hulk test model (Hulk test model has do nothing but extending abstract actor) and I added two buttons. DO NOT WORRY ABOUT BUTTON TEXTURES, I forgot the create new textures for the buttons. Left button turns bruce to hulk and right button turns hulk to bruce.






-
























ANIMATION CREATOR

I have always needed to quickly implement my animations, with less code writing and fast like a lighting, then I created animation creator, this is extremely helpful.

There are 3 type of animation sheets:

  1. Each frame saved as individual .png files
  2. Single .png file has one row animation
  3. Single .png file has multi row animations








-












Animation creator has 3 methods at the moment, one for to get multi frames from individual textures, one for getting single row animation texture and other one for getting multi row animation texture. Those may have many parameters it is all documented and easy to understand. Anyway, we got all our animations from 3 type of animation sheets (all embedded in texture atlas) very quickly and saved tons of time.

 
 private void setUpAnimations() {
  // Bruce - Hulk Animations (Single Sheet multiple rows)
  animBruceWalk = AnimationCreator.getAnimationFromSingleTextureMultiRows(Assets.getAtlas(), "animhulkbruce", 8, 22, 4, 0, 0.08f);
  animHulkWalk = AnimationCreator.getAnimationFromSingleTextureMultiRows(Assets.getAtlas(), "animhulkbruce", 8, 22, 4, 1, 0.08f);
  animBruceToHulk = AnimationCreator.getAnimationFromSingleTextureMultiRows(Assets.getAtlas(), "animhulkbruce", 21, 22, 4, 2, 0.08f);
  animHulkToBruce = AnimationCreator.getAnimationFromSingleTextureMultiRows(Assets.getAtlas(), "animhulkbruce", 18, 22, 4, 3, 0.08f);
 
  // Sinlge row animation
  animBatFlyRight = AnimationCreator.getAnimationFromSingleTexture(Assets.getAtlas(), "animbatflyright", 6, 0.065f);
 
  // Multi frame .png animation
  animBatSantaFlyRight = AnimationCreator.getAnimationFromMultiTextures(Assets.getAtlas(), "batsanta", 6, 0.065f);
 }
-




ABSTRACTACTOR ANIMATION MANAGEMENT

Our actor is very clever and can manage animations easily and quickly by using setAnimation() & setAnimationMomentary() methods

Setting Animation:

If you wanna set to your actor animation it is very simple. I set all the animation we created previously to our bat, batsanta and hulk.

 private void setUpGameElements() {
  //
  hulk = new Hulk(getStage().getWidth() / 2 - 48, 120, 96, 96);
  hulk.setSize(hulk.HULK_SIZE ,hulk.HULK_SIZE * 2);
  hulk.setAnimation(animBruceWalk, true, true);
  getStage().addActor(hulk);
  
  //
  batsanta = new Bat(10, 100, 80, 80);
  batsanta.setAnimation(animBatSantaFlyRight, true, true);
  getStage().addActor(batsanta);
  
  
  // 
  bat = new Bat(20, 20, 80, 80);
  bat.setAnimation(animBatFlyRight, true, true);
  getStage().addActor(bat);
 }


Setting Animation Momentary:

This is a cool feature that I created for myself, it can be very handy in time. So what is it then ? Think about like these scenarios;

  • Character walks and get shot and it dies
  • Character transforming to another being
  • Character vanishing
  • Character blinking eye
  • So many other things...

All those happens one time, then chracters goes back to its regular animation or goes to another animations or animation stops at all. If you want one these you will love this method.

I created two buttons to transform hulk and bruce, I used setAnimationMomentary() method.
  1. Default animaton is bruce walking
  2. Then I set the momentary animation as "animBruceToHulk", so it changes to hulk, also I set the next animation "animHulkWalk" in the same method parameter, so bruce can turn into hulk, then hulk can walk as default animation, If I set the next animation as null, then after momentary animation completed, it will go back its default animation. Confused ha ? Just play with paramaters and tested, you will see.
  3. Last parameter is about killing all animations, if it set true, after momentary animation completed, all animations will  not be drawn anymore.


  // Listeners
  // ####################################################
  btnBruceToHulk.addListener(new ActorGestureListener() {
   @Override
   public void touchUp(InputEvent event, float x, float y,
     int pointer, int button) {
    super.touchUp(event, x, y, pointer, button);
    
    hulk.setSize(hulk.HULK_SIZE ,hulk.HULK_SIZE * 2);
    hulk.setAnimationMomentary(animBruceToHulk, true, animHulkWalk, true, false);
    
    //
    btnBruceToHulk.setTextureLocked(Assets.btnBatLocked, true);
    btnHulkToBruce.setLockActive(false);
    
    // 
   }   
  });
  tableButtons.add(btnBruceToHulk).pad(5);


NOTE:

Things can be confusing, but do not worry, project has very less code, it is very easy to understand after practice, our aim to write effective code with the minimum amaount.

6 comments:

  1. Hello , you should try the "Texturepacker2" tools in libgdx : it's very convenient .

    and you can create an Animation directly from the atlas ( no need to know the number of frames ) . here my method :

    public static Animation getAnimFromAtlas (TextureAtlas textureAtlas, String name, float frameDuration) {
    Array frames = textureAtlas.findRegions(name);
    Animation animation = new Animation(frameDuration, frames);
    return animation;
    }

    ReplyDelete
    Replies
    1. Thanks for the info.

      The last method of AnimationCreator already use your method, AnimationCreator.getAnimationFromMultiTextures()

      But, what if I do not have seperate animation textures in my atlas, what if I have one png animation spritesheet which has all animations, and I add this spritesheet to my textureatlas whithout seperating each frame ? This is why I did create the AnimationCreator, its very fast, no need to seperate frame by frame animations from spritesheed before adding to textureatlas.

      Delete
    2. Ok , i see what you mean . Actally , I'm just using idividuals images.

      In the past , i used to separate multiple images (a lot !) from a big PNG whith Gimp : it was painfull !!! Now i have your methods !
      thank you .

      Delete
  2. Awesome Tutorial and Superb Mini Plug-in.
    I am a beginner... have a little doublt
    what is the concept behind imageatlas.txt... Is it confusing me?
    How to generate it for my sprite sheet.

    ReplyDelete
  3. how to make single .png file with multi row animations?

    ReplyDelete
  4. Merhabalar. framework ü nerden nasıl indirebiliriz. teşekkür ederim.

    ReplyDelete