Mike at BrashMonkey

Using Spriter animations in Construct 2

Recommended Posts

Hi everyone,

This post is intended to give you all the up to date information and links you need to start using Spriter files in Construct 2.

We'll be sure to update the information any time there's a significant update to Spriter or the scml plug-in.

UPDATE: Hi everyone. I just made a new video explaining the 3 different ways to import Spriter animations into Construct 2:

 

Step one:

Make sure you have the latest build of Spriter installed, which you can always find here.

Spriter now has a feature to automatically check for updates. We recommend you turn this feature on so you'll always have the latest version of Spriter as soon as it becomes availible.

 

Step two:

Make sure you have the latest version of the scml plug-in installed in Program Files\Construct 2\exporters\html5\plugins. You can always find the latest version of the plug-in here.

Unzip the folder and put the folder (and the file inside) into the folder mentioned above.

(While installing, make sure construct2 is currently not running.)

 

Step three:

Open your Spriter file in Spriter, then choose Other File Options/Custom Save Options from Spriter's menu and turn on all three of the "Additional data for Authoring Tools" As seen in the image below.

customfileoptions.jpg

 

Step four:

Use save-as to re-save your Spriter scml file AND use save-as again to save a scon version of your Spriter file into the same folder, with the same exact name as your scml file you just saved.

You should now have identically named scml and scon files in your Spriter project folder.

Keep this folder open for easy access for the next step.

 

Step five:

Load up your capx game or app project in Construct 2. Then go to the layout you'd like to import your Spriter file to, and drag the actual scml file from your Spriter project folder onto the frame.

You'll be asked to also choose which event sheet you'd like the "on initialized" even to be created in. Choose either the event sheet for the that specific frame, or even better, an event sheet specifically for initializing Spriter files which is then included in the main event sheet for every frame which includes the Spriter file (Spriter object).

 

To see this, and my suggested best practices, please watch the tutorial video here:

 

reimporting or updating a spriter file in your Construct 2 project

Step six:

Watch this tutorial which explains how to control your newly imported or updated Spriter object through events in C2:

 

importing and controlling spriter animation files

 

Step seven:

If you want to make use of Spriter's Character Maps feature in Construct 2, please watch this tutorial video:

 

 

Step eight:

Watch this video if you have sound triggering in your Spriter animations and want C2 to playback your sounds at the right times:

 

Step nine:

If you feel there's any information that's missing from this tutorial, please email mike@brashmonkey.comand we'll do our best to add the missing information or make it more clear.

 

Cheers,

The Spriter Team at BrashMonkey
 

Performance Mode:
We will edit this post to streamline this new information, but in the meantime, there is a new direct drawing mode for the plugin.  This mode offers higher performance, with the tradeoff that the individual sprites are not separate C2 objects.  Here is how it works:

Quick note: If your project was created with an older version of the plugin, and you want to continue to use the old mode for the plugin, you will get an error when you launch C2. Please download this version of the plugin if you don't plan to convert your project to the new mode. Again, consider the new mode to be in a beta state, until it's had some time to get tested more extensively by the Scirra community.

To use the new direct drawing mode. Use the following steps:

  • In Spriter, make sure your project is already saved normally.
  • Go to File|Generate spritesheets for project images
  • Select a different folder from your current Spriter project folder to save your spritesheeted project
  • Make sure 'padding' is set to at least 1 pixel or C2's linear smoothing will cause images to bleed into eachother
  • Make sure 'save spritesheeted project' is checked
  • Make sure 'save as scon' is checked
  • Make sure 'embed spritesheet info in project file' is checked
  • Make sure you keep the 'multiple spritesheets' setting to 'Never generate multiple spritesheets' (default setting)
  • All of the above settings (with the exception of the output folder) will be saved after the first time you use them
  • Create a new project with C2
  • Add an scml object in the same way you would any other C2 object (do not drag the scml file into your layout)
  • When the image dialog pops up (or double click the scml object to open it), choose the generated spritesheet image from the output folder you selected
  • In C2's project pane, right-click on 'Files', and select 'Import Files', and choose the scon file from the output folder you selected
  • Select the scml object, and in the object properties pane, for SCML file, type in the filename of your scon file
  • Set 'draw self' to 'true'
  • Run your project, and report any issues or bugs to this thread.

To change your existing project to use the new direct drawing mode:

  • Follow all of the above steps until you get to the part where you would start a new C2 project.
  • BACK UP YOUR CURRENT PROJECT TO A NEW FILENAME IN CASE ANYTHING GOES WRONG
  • Remove all the sprite objects associated with your Spriter object from the project
  • Remove the previously generated initialization event from your project
  • Remove the previously imported scml and scon file from your project
  • Start from the step above where you double click your scml object to choose the spritesheet image
  • If your project was started with the previous version of the plugin you will most likely get an error when you run it. This has to do with the previous version of the plugin having no image. To fix this, simply save your project, and reload it.

To use bounding boxes precalculated in Spriter for correct clipping and effects, in Spriter, simply click on the box icon on the animation widget. Use settings roughly like what you see below:

bbox1.png

framerate: In order to calculate a bounding box that takes tweening into account, Spriter will go through the animation at a set framerate. 60 is recommended.

padding: Extra pixels added to each side of the bounding box to ensure that frames in between the above calculated don't go slightly outside. 0 is probably fine for most cases, but 1 or 2 pixels isn't going to affect your performance and makes doubly sure.

 

The best workflow would probably be to run the calculation once on all animations the first time you use it, and each time you add an animation. After that, only bother recalculating the bounding box if new animation changes massively affect the bounding box, or if you notice any clipping at runtime. And of course, run it once before shipping or demoing your game.



Lastly, if you'd like to use features that required the full import (such as sound or collision boxes), there is an advanced method to use both the manual import method and the new performance mode.   First, save your project normally, and then save a spritesheeted project. Import your non-spritesheeted project the old way by dragging the scml or scon file into the C2 layout.   Follow the old to new style project conversion steps, but this time only delete everything except collision boxes, and other sprites you want to test for collisions. This should self draw the animation, but also animate the separate sprites and collision boxes you kept. Keep in mind, the zorder will not place sprites correctly inside the self-drawing scml object, so it's probably only useful for making invisible sprite objects for collision detection. 

Share this post


Link to post
Share on other sites

Hi, I figured out what the reason is, although I don't have a solution yet.

Like I wrote in another post, I use very large images for body parts, so when I imported the SCML, the image was huge and covered the entire screen, only showing about a fourth of the character. So I changed "Size" on the spriter/scml-object from the default 50,50 to 3,3. This made the character become small, like 150x130 px.

This causes the aliasing issue. It seems to be worse the smaller I resize the spriter object.

Is there another way to decrease the size of the spriter object without this happening? In case I resize my sprites to 25%, they would still be very large, and need to be resized, so there hopefully exists a better way to do this?

Share this post


Link to post
Share on other sites

I recreated the issue with resizing the sprite here:

http://www.nicmar.nu/spel/ball

The rightmost is scaled to 25,25 (50%) and looks fine. The middle is 10,10 and looks a bit jagged. The leftmost is 5,5 and looks like it doesn't have any antialiasing at all.

Here is the C2 project:

http://www.nicmar.nu/spel/ball/ball.zip

I'm thinking that I need to resize my sprites, and redo the animations, but any ideas would be helpful so I don't end up here again.

I also notice a similar aliasing issue when there isn't any padding around a sprite image file, and the sprite has straight lines on the edge of the sprite. I remember you mentioned that there should be some padding in the sprite file in case we change the sprite size in the future, but apparently the aliasing could be an issue.

Share this post


Link to post
Share on other sites

Hi nicmar,

Sorry for the delayed reply.

Its extremely wasteful of memory space, draw calls etc to use massive images for your characters. I suggest you create a scaled down clone of your entire Spriter project from within Spriter (a Pro feature) and then reimport it into Construct2.

If the images become slightly degraded by Spriters automatic scaled export you can use a batch process in a program like Photoshop or perhaps Irfanview(which is free) to re-scale down the images to their needed size. using the following steps:

1) Create a complete copy of the entire Spriter project (folder with scml file and all needed images)

2) In Spriter choose to create a scaled version of the entire project to whatever scale makes sense.

3) Load the new scaled version in Sprite rand see if it looks good.

4) If the images are not great, then copy the full sized ones from the original non-reduced Spriter project folder and paste them into the new folder, over the scaled versions.

5) Use a batch process to scale all the full sized images down by the required percentage.

6) Reload the scaled down Spriter project and see if the end results are to your liking.

This is the best I can advise in the matter.

cheers,

Mike at BrashMonkey

Share this post


Link to post
Share on other sites

Hey! I'm having a few issues. When an event for a new animation is added and I start the game, I get the following error:

Hlv0Ma60PenKo8dn

Then when the animation is triggered, I get this error:

pZEvzwBg8qLh6RhD

Say the name of the animation in Spriter is "Running" for example. When I try to trigger this by name, it crashes. At the same time, I can set the default animation to "Running" and it plays fine. It's only when I try to trigger it within events that the game crashes.

Any ideas what I'm doing wrong?

Share this post


Link to post
Share on other sites

Hi AnD4D,

 

No idea what's going on there, I'd have to see the capx. Can you email it to Mike@BrashMonkey.com ?

 

Thanks

,Mike at BrashMonkey

 

Hey! I'm having a few issues. When an event for a new animation is added and I start the game, I get the following error:

https://copy.com/Hlv0Ma60PenKo8dn

Then when the animation is triggered, I get this error:

https://copy.com/pZEvzwBg8qLh6RhD

Say the name of the animation in Spriter is "Running" for example. When I try to trigger this by name, it crashes. At the same time, I can set the default animation to "Running" and it plays fine. It's only when I try to trigger it within events that the game crashes.

Any ideas what I'm doing wrong?

Share this post


Link to post
Share on other sites

Is it possible to use Spriters triggered sounds in Construct 2? The "On sound triggered"-event seems to detect the sound correclty, but no sound is played (might be because it changes the file type from .wav to .ogg and .m4a when I import the .scml).

Share this post


Link to post
Share on other sites

Thanks Mike, I've got the sound working now and have another question:

As I understand it detection boxes in Spriter are imported as regular sprites in Construct 2, and I can check if they overlap other sprites etc - but is there any simple way to check which scml-instance the triggering box is part of? For example, if I have two Spriter objects of the same type and the detection box from one of them is overlapping a certain object, how can i detect which scml-instance the triggering box belongs to?

Share this post


Link to post
Share on other sites

@Toroquin, the import process puts all of the objects making up the character into a container, so when the collision box gets picked it automatically picks the rest of the objects that make up that character.
 

On collision with MySpriterHitBox-----Set MyScmlObject Position to 500,500

Even if there are several MyScmlObjects, then this would move only the one associated with the MySpriterHitBox involved in the collision. 

Share this post


Link to post
Share on other sites

Hello,

I am French and I bought Spriter and Construct 2.

For the moment I use the images imported into Construct 2 and I do not use the plugin to C2 because I'm afraid it is no longer supported someday.

Can you reassure me about it?

When is it a future transition to Construct 3 for example?

Share this post


Link to post
Share on other sites

The plug-in is still very much supported, and a bug fix was made very recently. There's just been a delay for a major update until we finish another important task. Construct 3 is just a new editor.  As far as I know, all C2 files and plug-ins will work exactly the same with no changes needed. If this is not the case, we'll work with Ashley (C2 and C3's developer) to do whatever is needed to get the plug-in fully-functional in C3 as well.

 

Cheers,

Share this post


Link to post
Share on other sites

Good evening,

Thank you for your reply, I started with Spriter tested, for use with Construct 2 after you have reassured me. Thank you a lot.

I followed this tutorial and I got there. 

 

The sound is not great, but between the information on the screen and the little that I understand English, I managed the tutorial.

Good night

 

Bonne nuit !

Share this post


Link to post
Share on other sites

Hello! First time poster! I was hoping to animate all of my characters in one Spriter file and then spawn them at each instance of player/enemy/whatever on the creation of those instances, then set the entity and animation based on that instance. I've run into trouble right at the onset. While my player instance works fine, nothing else becomes visible. Do I need to have a separate Spriter file for each instance type (enemy etc.) or can I have everything in Spriter one file? If there is a tut on this, can someone lease point me to it? 

 

Thanks!

Share this post


Link to post
Share on other sites
4 hours ago, ultrafop said:

Hello! First time poster! I was hoping to animate all of my characters in one Spriter file and then spawn them at each instance of player/enemy/whatever on the creation of those instances, then set the entity and animation based on that instance. I've run into trouble right at the onset. While my player instance works fine, nothing else becomes visible. Do I need to have a separate Spriter file for each instance type (enemy etc.) or can I have everything in Spriter one file? If there is a tut on this, can someone lease point me to it? 

 

Thanks!

I recommend against this... its better to have a separate Spriter file for each character...unless perhaps you're just using character maps to turn the player animations into enemies etc.

Without seeing exactly what you're trying in events, it's impossible to help troubleshoot.  I suggest you create a loop at the start of your frame which creates any of the Spriter objects you need, one at a time and assigns the appropriate entity/animation to it.  You should also have a variable for each of them that you can set, (in the same event that creates it) to "label"/keep track of which Spriter object is represent which character.

Finally, don't just copy and paste or clone the sprites that are created in your canvas when you import a Spriter object. This will get you no-where... those are just sprites the Spriter object uses to recreate the animations.

cheers.

-Mike at BrashMonkey

Share this post


Link to post
Share on other sites

Hi BrashMonkey,

First things first,

Just found you yesterday.  Your work here is amazing, and your video tutorials even better---big new fan here

and looks like I'll be following BrashMonkey very closely in the hopes of developing my own game.

Here is my question.  

I took advantage of your Spriter Pro discount yesterday off my Steam account,

I'm finding it difficult finding the folder to insert the scml.rar file you speak of Step 2 --- 

is it because Steam is controlling the download?  is there another forum post that answers as I didn't see it addressed here?

Thanks for your help!

~Renee

Share this post


Link to post
Share on other sites
8 hours ago, BrashAdmin said:

I recommend against this... its better to have a separate Spriter file for each character...unless perhaps you're just using character maps to turn the player animations into enemies etc.

Without seeing exactly what you're trying in events, it's impossible to help troubleshoot.  I suggest you create a loop at the start of your frame which creates any of the Spriter objects you need, one at a time and assigns the appropriate entity/animation to it.  You should also have a variable for each of them that you can set, (in the same event that creates it) to "label"/keep track of which Spriter object is represent which character.

Finally, don't just copy and paste or clone the sprites that are created in your canvas when you import a Spriter object. This will get you no-where... those are just sprites the Spriter object uses to recreate the animations.

cheers.

-Mike at BrashMonkey

Hey!

 

Okay, I'll port my animations to different files and try that out - thank you very much for the speedy reply! I did attempt to use variables to determine which entities should go where but unfortunately all that did was make my game start shaking like there was an earthquake going on haha. I'd like to share my thought process for the event:

-On player/enemy created (For Each): System ->spawn spriter object at player or enemy.x/y. Set Spriter variable to (whatever the object name is).

If Spriter object has variable (whatever object is) then set entity to (that object),

--Sub command - Every tick - set position and angle to (object)

(I must confess, I'm writing that from memory since I deleted it after a few tries on this idea)

What I'm getting though is that only one entity type is available at a time (I'm understanding that correctly, right?). Also, to have one entity work for multiple enemies, would I need to make use of variables at that point or would Contruct be able to connect the dots if I use the "For Each" command t spawn Spriter objects?

Share this post


Link to post
Share on other sites

This is far too complex an issue for general language summaries of what you're doing to suffice for getting feedback or help debugging.

In general it sounds like you have the right idea, but I'm worried you're not distinguishing EACH character Spriter object with EACH character C2 Sprite that you are creating... You are associating the general character type (entity) but NOT the SPECIFIC association with each specific C2 Sprite.  You might need two variables, one for entity, one for the specifc Unique id number for each C2 Sprite.

I have a feeling ALL of your Spriter objects are being controlled all at once by all events because they ALL have the same exact variable set... or at least per entity/character type.

Again, though, if you want real help, post your actual capx or screen shots of every event.

 

Share this post


Link to post
Share on other sites

Hey there!

I appreciate your help! I was able to get another instance of the Spriter on an enemy and working a tad bit. When displaying multiple enemies however, Construct spawned tons of redundant animations. I'm sure there's a way to figure that issue out. Either way though (thinking of your first reply to my inquiries), will figuring this out lead to a breakdown further down the road? If I can successfully et everything running from one Spriter file will things break down as I spawn bunches of enemy types?

 

Here is an image of the capx. 

TygroTv.png

 

Share this post


Link to post
Share on other sites

I would reorder the conditions so that you are always comparing the UID of the sprite to the ID of the Spriter object first, and then comparing if it's flipped etc..

I think the order you are using might loose track of which one you're talking about... it might fail (always or sometimes) to keep them properly paired together etc.

There's no reason everything should fall apart if you make sure things are rock solid before you pile more stuff on top. Get what you have working perfectly first, with no redundant or unneeded events, variables etc, then move on and you should be fine.

 

Share this post


Link to post
Share on other sites
25 minutes ago, BrashAdmin said:

I would reorder the conditions so that you are always comparing the UID of the sprite to the ID of the Spriter object first, and then comparing if it's flipped etc..

I think the order you are using might loose track of which one you're talking about... it might fail (always or sometimes) to keep them properly paired together etc.

There's no reason everything should fall apart if you make sure things are rock solid before you pile more stuff on top. Get what you have working perfectly first, with no redundant or unneeded events, variables etc, then move on and you should be fine.

 

Sweeeeeet. Thanks very much for assisting me :) Will post back with a progress update. 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.