Your thoughts wanted on how to handle animations

[rich]

Hi all,

 

Right now Phaser uses the Flixel method of defining animations. I.e. you create a label for the animation (walk, run, fire) and then tell it which frames to use. The frames can be either an index for the frame number, i.e.: [ 1,2,3,4,5 ] which is what you use if you've got a sprite sheet. Or they can be an array of frame names, i.e.: [ 'run1', 'run2', 'run3' ] - which is what you have with Texture packed files.

 

Right now you're limited in that an animation cannot span multiple images, you also can't define a speed per frame either - so every frame is played back at the same speed

 

What I'm asking is:

 

1) How would you like to declare animation frames (from a code perspective)

2) What features do you feel you need from it?

[cheapdevotion]

I like the method you have now. From a best practices standpoint, having an animation that spans multiple sheets seems like a really bad idea anyway. I know you have a desire to no make assumptions, but extra work to support bad practices seems like a bad idea.

 

Here is a couple of things I would like to see (I am new to Phaser, so some of it may already exist).

• Frame Rate (playback speed)
• Animation WrapMode (play once, loop, ping pong)
• Animation Callbacks (start, frame, end)

[rich]

It supports all of those already (the only exception being 'ping pong').

 

The reasoning behind animations spread over multiple images is for example when creating an atlas with texture packer it would allow you to use its MultiPack feature. I ran into the issue today - the animation wouldn't fit onto a single 1024x1024 texture, it would have needed 2 texture files but as Phaser doesn't support that atm I had to just cut frames out until it fit on one.

[ooflorent]

I prefer having an animation registry to store all animations and the attach the specified animations to my sprites.

// Define a new animationgame.animations.define("run", ...);// Attach the 'run' animation to the spritesprite.animations.add("run");

I like declaring animation frames using the following syntax: 

"0-1(8), 2(12), 3-6(5)"

This is the EBNF grammar:

digit = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"number = digit, { digit }frame = number, [ "-", number ]duration = "(", number, ")"animation = frame, duration, {",", frame, duration}

Duration is specified in hertz.

 

Update: Fix EBNF grammar.

[mrspeaker]

ooflorent - that's a really cood idea. Think I'll steal that for my library

[benny!]

Not really sure - but frameduration is a must IMHO

[rich]

I quite like the idea of using EBNF but the notation becomes very convoluted when you need to deal with frame names and not indexes. I think using a json structure might make more sense - will have a play now and see. Using a common Animation store was already on my list though I liked the way that each sprite could use the same animation but a different playback speed, but they don't all need the whole package of animation data to do that.

[triptych]

I don't even know if you can already do this, but having support for Spriter would be really awesome: http://www.brashmonkey.com/spriter.htm

(Edit, does the Spine support from Pixi.js carry over into Phaser? http://www.goodboydigital.com/pixi-js-spine-animation/ )

[rich]

Spine support in Pixi is currently a bit broken (see the issues re: texture cache conflicts), but once those are resolved I'll support it for sure.

[Mike]

Well, i don't have much to say about the format but I personally prefer to have the frame names rather than just numbers, but maybe if is more complex animation like:

1,2 frame and then 10,11,12, and then 5,4 and so on maybe the EBNF will be far better...

 

Also a JSON object sound good and a way to combine 2,3 frame sets like: "0-1(8), 2(12), 3-6(5)"

 

And after quick search what do you think about their format:

http://www.coronalabs.com/blog/2012/10/02/animated-sprites-and-methods/ 

 

More importantly is to make animations work as expected  

[rich]

The Corona method is exactly what I was thinking. Nice and clean. I'm not a massive fan of "magic objects" but I think in this case it would work.

[mwatt]

I quite like the idea of using EBNF but the notation becomes very convoluted when you need to deal with frame names and not indexes. I think using a json structure might make more sense - will have a play now and see. Using a common Animation store was already on my list though I liked the way that each sprite could use the same animation but a different playback speed, but they don't all need the whole package of animation data to do that.

 

Plus 1 for JSON over EBNF.

[Jorge]

The Corona method is exactly what I was thinking. Nice and clean. I'm not a massive fan of "magic objects" but I think in this case it would work.

I really like the Corona method, too. Very intuitive.

[ooflorent]

Plus 1 for JSON over EBNF.

 

EBNF is a language to represent grammars, not a way to declare animations  

[mwatt]

EBNF is a language to represent grammars, not a way to declare animations  

 

My terse comment was imprecise.  Allow me to expand.

 

The passing of a literal, JSON-like object to specify configuration/options/initialization/data is a standard and well-accepted technique.  The syntax that you proposed is compact and has a degree of built-in functionality.  It is good, but an argument can be made  that a literal object, while more verbose, would allow a greater range of functionality and flexibility and just plain seems more thematic to JavaScript.

[ooflorent]

Maybe both syntax could be added using a parser:

// Using native JSanimations.define("run", [...]);// Using a parseranimations.define("run", AnimationJSONParser.parseDefinition(myJSONDef));animations.define("run", AnimationStringParser.parseDefinition(myStringDef));

[Mike]

Тha last idea is cool one, best of two worlds and I approve it once the JSON model is defined.

[InsaneHero]

I would definitely like to have a "quick and dirty" alternative to bypass any system that requires careful construction or external utilities.

While it's obviously crucial to have the animation control be clean and manageable for complex cases, the vast majority of game animation is trivial: play from this frame to that frame at this speed, then stop or repeat... with optional callback at the looping check-point.

 

I don't know if it's common practice but I'm using tween for almost all my (tile based) movement... so being able to link animation speed directly to the tween duration would be great... although I can always do the division manually it involves storing the tween and recovering the duration which seems a bit messy.

 

"Move from X to Y whilst playing animation Z, N times."  That's a pretty common use case I would say.

[mwatt]

If we are trying to just address the example case as the common case, here's a possible alternative that should provide faster execution, rivals the simplicity of the original example (assuming there are not a lot of frames to specify), and is more javascripty:

 

original: "0-1(8), 2(12), 3-6(5)"

 

alternative: [8,8,12,5,5,5,5]

 

Just thinking out loud - I'm new to the game programming world and could easily overstep my nascent level of understanding and make a schmuck of myself. 

[rich]

You can already do that You can repeat frames as many times as you like when setting up an Animation, and in any order you like. What you can't do is specify an actual time for the frame, so if you wanted a frame to appear 4x longer than another, you'd have to put it in 4 times.

[onedayitwillmake]

Does phaser currently support Cocos2D style output for animations?

For example if i output the animations with TexturePacker i'm wondering how I can import those into Phaser.

 

Any info would be appreciated, I tried to look around but but there's not too much info on this

[onedayitwillmake]

Nevermind, the texture atlas example does the trick:

 

Shortversion, create your atlas with TexturePacker setting the format as "Json(Hash)"

[rich]

Yeah TexturePacker animations need to be either the JSON Hash or JSON Array format. Either will work. Or if you're coming from Flash, Starling XML is supported too.