SpriteSheets in ZIM – canvas coding with #JavaScript and #CreateJS
SpriteSheets let you animate graphics by loading one graphic and providing data for the frames. CreateJS has SpriteSheet and Sprite support. ZIM uses these as a base and then adds a couple extra features.
Here is an example: http://zimjs.com/spritesheet. The example uses a common TexturePacker spriteheet. You can select export to EaselJS / CreateJS – choose the Basic Algorithm rather than MaxRects.
The example mimics a PhaserJS tutorial but the ZIM example is 63% of the size. Also ZIM uses the power of zim.animate() to play the Sprite – with the run() method. This allows you to:
- set a time in milliseconds to run the animation
- use wait and call a function when done
- use loop, loopCount, loopWait, loopCall
- use rewind, rewindWait, rewindCall
- use different easing types like “back” and “elastic”
- pause and play the animation
Here is a video Tutorial: https://youtu.be/WWEms6qy9KA. You can also play labelled animations. CreateJS Sprite and SpriteSheet support even more operations but these have not been brought in to the run() method. You can still use the CreateJS play(), gotoAndPlay(), gotoAndStop() methods with a ZIM Sprite, but you may be limited to one frame rate.
We also have found that for teaching Sprites, there are a lot of Sprite sheets out there without data – or with data that is not made for CreateJS. A ZIM Sprite can easily read create SpriteSheet data for these spritesheets as long as the frames are the same size. See the ZIM Sprite Docs for more information.
UPDATE!
Here is a new version of the TexturePacker CapGuy on a Skateboard! This features the animation series technique new to zim.animate() – but now also available on the run() method of the Sprite. This allows pausing and stopping by ID – including using the id with zim.animate() and move() animations. It also allows for a sequenced series of labels or frame numbers to be played in conjunction with the traditional transformation properties, etc. such as scale, rotation, skew, position, etc.
http://zimjs.com/spritesheet/skateboard.html
UPDATE 2
See this post on a DYNAMO – which is a Dynamic Sprite – so a Sprite that can change speed depending on mouse or key input for instance! This can be operated by an Accellerator which can increase or decrease the whole scene including Sprites and Scrollers.
ZIM JavaScript Framework 
This is great, thanks! To access a static image from your TexturePacker Spritesheet, you can do this (example json is for alphabets images packed into 1 sheet)
var sprite = new zim.Sprite({json:frame.asset(“alphabet.json”)})
var theFrame = sprite.animations.r.frames[0];
zog(sprite)
sprite
.center(stage)
.gotoAndStop(theFrame)
LikeLike
Make sure you:
frame.assets.load("alphabet.json");frame.on("complete", function() {
//do code
});
// Also - you might just try:
sprite.run(null, "r");
// or whatever the label is
// the first parameter is time to play
// but with one frame - it will just stay there
// you can also use:
sprite.run({label:"r"}); // the ZIM 4TH method
// or perhaps
sprite.gotoAndStop("r");
Note: in ZIM, you should try the run() method on sprites first – this should work for most spritesheets except perhaps nested labels – in which case, you can use CreateJS commands. You should not really need nested labels if you use the animation series provided by run().
This is all pretty new in ZIM so, please let us know how it goes. Thanks! And thanks for the post, Stacey 😉
LikeLike
Sorry in this case [r] is the name of the letter I want. I can add any letter there in the var theFrame and it will get just that image.
LikeLike
Pingback: ZIM 4.7.0 Launches with Animation Series, Sprite Improvements and More for HTML Canvas Coding with JavaScript and CreateJS | ZIM js JavaScript Framework