New ImpactJS Exporter for Leshy SpriteSheet Animator

Posted by Doug Haber on 2014-01-09

Introduction


Leshy SpriteSheet Animator now supports the ImpactJS animation-importer plugin. Using this makes it possible to export animations and then load them directly into ImpactJS, without requiring further modification.

I was contacted by Andrew Eades who created this ImpactJS plugin and provided a sample of what the export format should look like. The prior ImpactJS exporter attempted to create code to define the animations, but it did it by creating an "animations" objects where the keys are the names of the animations. This is not ideal for most people's needs or directly compatible with multiple sets of animations, and so editing the export by hand would often be necessary.

The prior approach was chosen, because ImpactJS itself does not provide a standard mechanism for registering animations. The animation-importer plugin solves this issue by handling that and in doing so makes it possible for the exports defining the animations to be dropped into place without need for further modification.

Usage

In Leshy SpriteSheet Animator the new exporter is accessed by pressing the "ImpactJS" button. The old exporter is still fully supported and is the default. A "Mode" option now exists in the bottom left corner of the ImpactJS Exporter. This defaults to "Standard" for the old format, but may be changed to "Animation-Importer Plugin" to use the new format.

For notes on usage within ImpactJS, please see the GitHub page for the plugin.

Format

Example export file:
ig.module('game.animations.fire')
   .requires('plugins.animationimporter')
   .defines(function() {
      AnimationImporter.addAnimationSheet({
         filename: "fire.png",
         frameWidth: 48,
         frameHeight: 96,
         animations: {
            "normal": {
               frameTime: 0.05, // 20 fps
               sequence: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
            },
            "slow": {
               frameTime: 0.125, // 8 fps
               sequence: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
            }
         }
      });
   };

Other Changes

While rolling out this release a few other changes were made:
  • The "File Name" in the ImpactJS and CreateJS exporters now defaults to the name of the image. For example, "scary_monster.png" will cause the filename to default to "scary_monster.js". In earlier versions the default name was "animations.js".
  • In the ImpactJS and CreateJS exporters, auto-spell-check was disabled on the text input. In earlier versions, browsers that support spell-check by default would have highlighted many words as being misspelled, which wasn't very useful for since the text area contains code.