TexturePacker: how to add additional Animations?

50 views
Skip to first unread message

Matthias Guth

unread,
Aug 2, 2016, 1:15:51 PM8/2/16
to melonJS - A lightweight HTML5 game engine
Hi all,

I'm playing around with TexturePacker and wonder how to add additional animations to the animation "stack". Probably a quite simple thing, but I just won't get the correct way.

Using the boilerplate the Texture JSON is automatically imported and using createAnimationFromName() the tiles are accessible by their name.
My code (relevant part):

        this.renderable = game.texture.createAnimationFromName([
               
"stand"
           
]);
       
this.renderable.addAnimation(
           
"walk", [
               
"walk1",
               
"walk2",
               
"walk3"
           
]);


What I want:
1. a default animation (here just one tile "stand")
2. a "walk" animation with tiles not contained in the previously generated anim, but it is in the Texture.

The above Snipped does not work and the addAnimation() examples I found (i.e. https://www.codeandweb.com/texturepacker/tutorials/using-sprite-sheets-with-melonjs-tutorial ) only work with tiles loaded through the createAnimationFromName method.

Cheers,
Matthias

melonJS

unread,
Aug 2, 2016, 10:10:47 PM8/2/16
to melonJS - A lightweight HTML5 game engine
the only difference i see missing compared to the platformer example :

is either the key frame name is missing the extension, or that you just define a 'walk" animation, but never activate it through the "setCurrentAnimation" function.

Matthias Guth

unread,
Aug 3, 2016, 3:49:33 AM8/3/16
to melonJS - A lightweight HTML5 game engine
Hi,

the framenames are ok (no extension in the json file), but they are not handled as a frame name when using addAnimation but imo as a filename or at least not relating to the json file. I also did the 'setCurrentAnimation("walk")' which lead to a JS exception because that frame is not found.

It works, if I do it that way:

        this.renderable = game.texture.createAnimationFromName([
               
"stand",
                "walk1",
               
"walk2",
               
"walk3"
            ]);
       
this.renderable.addAnimation(
           
"walk", [
               
"walk1",
               
"walk2",
               
"walk3"
           
])

Meaning: adding all the relevant Frames to the default animation by "createAnimationFromName" and then create the additional animations by adressing the framename. This leads to a "default" anim with all the frames from all animations as well as additional animations referencing these frames. But I don't think, this is intended like that?! 
In my novice thinking I would expect the "default" animation ie as "stand", in this case only one frame. So I was wondering if there is an additional parameter for createAnimationFromName() where you define the animation name, but looking at the docs and the sourcecode it does not seem so.


aaron.g...@gmail.com

unread,
Aug 3, 2016, 9:45:55 AM8/3/16
to melonJS - A lightweight HTML5 game engine
If you're calling setCurrentAnimation("walk") after your addAnimation call, it should work. me.AnimationSheet creates a default animation with all frames, but from there you can add as many "sub animations" as you want, and switch between them as often as you want.

If you look back and you're still having an error, can you post the full code for the entity, and how you're adding it to the scene?

Matthias Guth

unread,
Aug 7, 2016, 7:57:40 AM8/7/16
to melonJS - A lightweight HTML5 game engine, aaron.g...@gmail.com

 [...] me.AnimationSheet creates a default animation with all frames [...]

Ah so  the "default" animation is indeed a container for all frames. Thank you, that was exactly the information, I was looking for :)

I really enjoy playing around with melonJs. Many thanks for your support!
Reply all
Reply to author
Forward
0 new messages