Canvas Components, Controls and more!
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/code/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:
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.
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.
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.