Scirra cog

About Us

We're a London based startup that develops Construct 2, software that lets you make your own computer games!

Archives

Browse all our blog posts

Latest Blog Entries

We love brains!

Join us! Joiiinnn ussss! Mooooree brains!

Spriter support in Construct 2

by Ashley | 15th, August 2013

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:

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.

Spriter import: selecting 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.

Spriter import: the added sprites in the layout view

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!

Now follow us and share this

Tags:

Comments

6
Jailson 12.9k rep

Complete tutorial, just what I was looking for! Thanks!

Thursday, August 15, 2013 at 12:26:17 PM
5
madao17 1,340 rep

Lovely
This looks really nice

Thursday, August 15, 2013 at 12:26:54 PM
5
pantherhead 2,546 rep

Great How-to!!

Thursday, August 15, 2013 at 12:31:15 PM
11
Kyatric 73.9k rep

I use it, I love it, I want more Spriter's awesomness.

A little note too, if your scml file (saved in spriter) contains capital letters, the export of C2 will remove this capital letter, which will be troublesome on some servers. Simply rename the exported scml file once you've uploaded it.

I'll also file a bug report to let Ashley know about this issue I've just encountered in my current project.

Thursday, August 15, 2013 at 12:42:26 PM
5
lucid 16.8k rep

Great stuff! Hey Kyatric. Just uploaded a new version of the plugin yesterday that accounts for that

Thursday, August 15, 2013 at 12:45:38 PM
3
Kyatric 73.9k rep

@Lucid, oh I must have missed that !
Great to hear :D

Thursday, August 15, 2013 at 12:59:31 PM
3
NECROKRIEG 4,304 rep

The Spriter animation tool is at a great price too!

Thursday, August 15, 2013 at 1:11:27 PM
4
Schoening 8,433 rep

Very Nice!
But is this not going to affect the FPS very badly?

I mean; That looks like more then TEN TIMES the Polygon Count...

Thursday, August 15, 2013 at 1:23:57 PM
2
vee41 7,242 rep

Glad I got spriter during the kickstarter phase, worth every penny! :)

Thursday, August 15, 2013 at 1:35:23 PM
3
thehorseman007 14.3k rep

I cannot believe on my eyes. Don't Laugh, I am serious.

Great work. I will need something like this in future.

Thursday, August 15, 2013 at 1:35:53 PM
3
emoaeden 9,670 rep

Has great potential for games. Any chance it will be built into a future version of C2, so it's native and not 3rd party plug in?

Thursday, August 15, 2013 at 1:40:32 PM
3
CarHazy 4,495 rep

That sounds really cool.

Thursday, August 15, 2013 at 1:41:43 PM
5
mammoth 8,399 rep

Awesome! I just purchased it. One thing I would absolutely love is to be able to buy stock animations. THat is a run cycle a jump cycle an idle animation. I think that if you had this feature to come with Spriter or have somebody upgrade it would really work. I think most of us just want to be able to drop our art in and have it animated. I think platformer animations or megaman animations would be fantastic to have. I would pay a little extra money for this. ;)

Thursday, August 15, 2013 at 1:44:59 PM
2
Bl4ckSh33p 8,911 rep

Sounds Great! :)

Thursday, August 15, 2013 at 1:44:59 PM
4
lukedirago 3,982 rep

Even when the integration was not an option, spriter is a great tool. If you buy the Pro version you get IK, which is a game changer. Great to see that it becomes more and more integrated with C2. :D

Thursday, August 15, 2013 at 1:53:58 PM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.