Sprite animation doesn't work without animate?

Questions
1

Regarding the sprite.run method:

Is it possible that if we don’t use the animate method, the frames won’t advance?

For example, in this case:

https://zimjs.com/spritesheet

If we remove the .animate part, will the frames stop advancing?

What about a “static” sprite that doesn’t animate properties but still needs to run?

2

Yes - do you mean for a TextureAtlas type sprite?

If you do not run, the latest version of ZIM makes the sprite goes to and stops on a random frame.

If you want to stop on a specific frame use sprite.run({frame:2}); or sprite.frame = 2.

If you want the sprite to play without run() which uses ZIM animate() then I think you can still use the createjs methods of play() goToAndPlay() etc.

3

What i mean is a sprite like this:

const animation = new Sprite({
      image:"boom.png",
      cols:8,
      rows:6,
      animations:{mid:[10,20], end:[30,40]} // optional animations with labels
      // see CreateJS SpriteSheet docs for the various animation format as there are a few different ones!
   })
      .center()
      .run(2, "mid"); // plays the frames of the Sprite over 2 seconds (master time)

I don't see the sprite running, but rather frozen on a single frame.
If i do add animate (which i don't need), i do see the sprite running...

4

run() is what calls animate() in behind the scene. If your code is not working then it might be a bug on our side. It should run from frame 10 to 20. We just recently did some work there and perhaps it messed up the label. Will test now.

5

We just tested and it works like we expect. It plays frames 10-20 in 2 seconds. And if we change to "end" it plays the end frames. Did you preload the sprite image?

6

So i guess im doing something wrong here...

Here's a minimal test:
https://zimjs.com/editor/E_W2P37

Using this spritesheet:

2048×1536 732 KB

Where i try to do this:

// Run animations
sprite.run({ time: 2, });   // works just fine
await new Promise(resolve => setTimeout(resolve, 4000));
sprite.run({ time: 2, });   // works just fine
await new Promise(resolve => setTimeout(resolve, 4000));
sprite.run({ label: 'all', time: 2 });  // fails...
await new Promise(resolve => setTimeout(resolve, 4000));
sprite.run({ label: 'start', time: 2 });  // fails...

Appreciate you help here :slight_smile:

7

Yes - just something simple - you need to pass the animations into the Sprite. So add animations to the {}

1 Like
8

You are right, of course :slight_smile: my bad...

1 Like