Jump to content

Your thoughts wanted on how to handle animations


rich
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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)
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 :) 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

  • 3 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...