GameClosure: sprite animation

Question

I've some problems with sprite animations. Is the first time that I'm trying to use them and they don't work.

The code is really short: https://gist.github.com/xxZap/7642660

The errors are:

Uncaught Error: Animation frame does not exist: null. SpriteView.js:191

GET http://xxx.x.x.x/simulate/pokemonAnimation/native-ios/resources/images/player2/pokemon/venusaur 404 (Not Found) Image.js:143

And here is my path screen: http://tinyurl.com/npq39jb

score 3 · Accepted Answer · answered Jan 14 '14 at 23:34

The typical naming convention for images in a sprite view is this:

spriteName-animationName-frameNumber.png

Then, when initializing the sprite, you need to set defaultAnimation to whatever the default animation is.

In your case, currently your "animation name" would be "frame". I am guessing that is not intentional, but if you want to simply see this work without having to rename your image try this:

GC.app.venusaur.activeSprite = new SpriteView({
    superview: GC.app.venusaur.view, 
    x: 0, 
    y: 0,
    autosize: true,
    image: 'resources/images/player2/pokemon/venusaur',
    opacity: 1,
    defaultAnimation: 'frame'
  });

Note that I added this to your code:

    defaultAnimation: 'frame'

It is likely that you want to call that something other than "frame".

Also, I see that you are inserting your animation over a static ImageView when it is clicked. You can do this all at once with a since sprite view if you set the default image.

You might have a single frame sprite like this (instead of the ImageView):

venusaur-idle-01.png

And your animation code like this:

venusaur-walk-01.png
venusaur-walk-02.png
venusaur-walk-03.png
etc.

Then you could init your sprite like this:

var mySprite = new SpriteView({
    superview: GC.app.venusaur.view, 
    x: 0, 
    y: 0,
    autosize: true,
    image: 'resources/images/player2/pokemon/venusaur',
    opacity: 1,
    defaultAnimation: 'idle'
  });

And then you can animate it like this (on click or whenever you want):

mySprite.startAnimation('walk');

To loop the animation do this:

mySprite.startAnimation('walk');

And to stop the loop, do this:

mySprite.resetAnimation();

The documentation here is very helpful: http://docs.gameclosure.com/api/ui-spriteview.html

GameClosure: sprite animation

1 Answers1