Creating sprite with animations, where frames are part of a large atlas

Questions
1

I’m using a large atlas for my game that contains many assets—some are single bitmaps, while others are frames for sprites.

Take a look at the attached sample:

  1. A large atlas
  2. A sprite with 9 frames, each sized 1/8 × 1/8 along both axes

Currently, I’m doing this:

const anims = {
'a': { frames: [ 45, 46, 47, 53, 54, 55, 61, 62, 63],
ordered: true }
}

and run it like so:
sprite.run({label: 'a', time: 0.25, loop: true});

However, I’m encountering a couple of issues:

  1. I want the animation to start on a random frame: for example, frame 5 out of the 9 total frames (it changes from one instance to another), but I can’t figure out how to do that...
  2. It seems like the last frame has a different playtime compared to the others, resulting in a less smooth animation. Is that possible?

image
image1024×1024 98.3 KB

2

With the run() method, as opposed to the CreateJS play() method, we take the Sprite and are feeding it into ZIM animate() to allow some interesting playback alternatives.

The frames are spread spread out across the framerate so the way to handle this is with percentComplete:

sprite.percentComplete = 30;

We found the animate() did not handle looping or rewind perfectly in some animations - probably longer in time than your setting. So we added a tweek parameter set at 1. that would affect a fast moving sprite, obviously. So set this to 0 or a smaller number.

sprite.run({label: 'a', time: 0.25, tweek:0, loop: true});
1 Like