ZIM js JavaScript Framework

Canvas Components, Controls and more!

SpriteSheets in ZIM – canvas coding with #JavaScript and #CreateJS

spritesheet

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:

  • 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/code/spritesheet/skateboard.html

spritesheetpromo

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.

dynamo

Advertisements

4 comments on “SpriteSheets in ZIM – canvas coding with #JavaScript and #CreateJS

  1. Stacey Reiman
    January 19, 2017

    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)

    Like

    • Dan Zen
      January 22, 2017

      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 😉

      Like

  2. Stacey Reiman
    January 19, 2017

    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.

    Like

  3. 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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Information

This entry was posted on January 14, 2017 by in animation, Comparison, javascript, tutorials and tagged , , , , , , , , , , , , .
%d bloggers like this: