Construct 2 has traditionally only supported frame-by-frame animations. These can be difficult to get looking really smooth, since it basically swaps between separate images - and the more frames you use, the more memory you end up using.
Spriter is an animation tool made by Brashmonkey which provides an alternative. It allows animated characters to be designed using smoothly moving independent segments, known as "modular" or "bone" animation. Since animations are basically a small set of images with some data about where to move them, they appear far smoother and image memory usage is considerably lower than is practical to achieve with frame-by-frame animations - to the point that you can create animations simply impossible to make with frames! Here's an example:
<iframe src="//www.scirra.com/demos/c2/spriter" style="width: 550px; height: 350px; border: none;"></iframe>
Since r139, it's now a lot easier take advantage of this type of animation in Construct 2 games. So how does it work?
First-time setup
You can download and install Spriter from Brashmonkey's download page. If you just want to try this out quickly, you can also just download the example Spriter file from the same page. I'm going to skip the actual design of an animation in Spriter - the materials on Brashmonkey's website already cover that nicely!
Next you will need to install the Spriter plugin for Construct 2. If you need help installing, see the manual entry on installing third-party addons.
Importing a Spriter animation to Construct 2
To import to Construct 2, there's no need to even export from Spriter. Simply locate your Spriter project folder in Windows Explorer. You'll notice the main project file is a .SCML file. This is also why the Spriter plugin is called "SCML" (...and also partly to avoid confusion with the "Sprite" object!)
With a layout open in Construct 2, simply drag and drop the .SCML file in to the layout. Then you're prompted to choose an event sheet.
This is because Construct 2 generates an event to set up the Spriter object, which is necessary for the animation to work properly, and Construct 2 needs to know where to put the event. Any layout that uses the Spriter animation will need to have this event. If you have a lot of layouts, create a single event sheet with common events and include it on each layout's own event sheet.
Once you've chosen an event sheet, Construct 2 generates a sprite object for each segment, all in their own family, associated in to a container, and placed under a subfolder in the Project Bar.
The .SCML file is also imported as a project file, since it contains the animation data. Since the objects are in a family, it makes it easy to make events that apply to all the segments; and since they are all in a container, events naturally treat all the objects making up the animation as a single unit. Providing you're using the latest version of Spriter, Construct 2 should even arrange all the segments in the layout to correspond to the initial point of the animation, as shown above.
Run the project and you should see your animation live and kicking!
Using Spriter animations
Here are a couple of tips while using imported Spriter animations:
- If you select any single sprite from the imported animation and press W, the entire Spriter character is selected and the selection wrapped. This makes it convenient to manipulate the character as a whole in the Layout View.
- Due to the way Construct 2 treats containers, if you duplicate (Ctrl+Drag) any single segment in the editor, when you preview you'll get another complete Spriter character. To avoid confusion, always duplicate characters by pressing W to select the whole thing, then Ctrl+drag the full selection to get a full new character in the editor as well.
- The SCML object has actions to set the animation and control the Spriter animation.
- Don't rename anything that was imported - the reimport process depends on the names of the things that were imported. See below for more.
Re-importing animations
If you update the animation in Spriter, such as adding new animations or segments, it's easy to update what you've got in Construct 2: just drag-and-drop the SCML file in to Construct 2 again, and it will update the existing import instead of adding it all over again. Note however you must not rename anything that was originally imported, otherwise Construct 2 might not recognise that you are importing the same SCML file again, and then you'll get a new set of objects instead of updating the old ones.
Construct 2 is smart enough to add objects and frames that are new, remove objects and frames that are no longer used, and update the SCML file in the project. One thing it doesn't do though is remove the old initialisation event, so you'll end up with two initialisation events. This shouldn't be a problem - the second one takes priority - but to keep your events tidy you'll probably want to go and delete the old initialisation event. The newest one will be at the bottom of the event sheet.
Conclusion
When publishing, don't forget your server should serve the .scml file extension with the MIME type text/xml. Some servers return '404 Not Found' for files they don't have a MIME type for, and this will break your Spriter animations.
There are a lot more Spriter features on the way as well: character maps, animated hitboxes and control points, animatable variables, sound effect triggering, and more. There's also some extra features for the SCML plugin in the works, such as tweening between animations instead of suddenly changing, and support for ".scon" files (in JSON format) for support in CocoonJS. Spriter is still in beta, but the 1.0 release is coming up soon!
Spriter provides an exciting option for a whole new way to make animations. Spriter + Construct 2 is a powerful combination, so give it a shot and consider if it might work for your next game!