by Jon (Updated on 2015-10-20)
- What are Animations?
- How To: Importing Animations
- Collision Data
- Switching Animations
- Controlling Playback
- Design Problem - More Animations vs. More Actor Types
What are Animations?
Animations bring actors to life. They represent the visuals of an actor, its collision bounds and the notion of being in a certain "state" - such as running, walking and jumping.
What are examples of animation states?
- A platformer hero's states (Stand, Walk, Run, Jump)
- Destructible Objects that "break" when hit by something else (Broken, Not Broken) treasure-chest-animation
- Treaure Chest (Opened, Not Opened)
What does an Animation Consist of?
Each Animation state consists of 2 separate parts:
- Frames (how it looks)
- Collision Bounds (its collision shape)
Frames are like pages in a flipbook. Each frame represents a a different image or "page" in the book. When these images change quickly over a period of time, the result is an animation.
Collision Bounds determine the physical shape(s) that an an actor assumes in a particular Animation state.
How To: Importing Animations
Now that you understand what animations are, let's go over the import process. You can import animations in one of several ways.
- Pick an image.
- Drag and Drop.
Method 1: Pick an Image
In this instance, we're assuming you've already got an Actor open in the Actor Editor.
Click on Click here to add frame under the Frames pane.
You'll now see this dialog. Click the Choose an Image... button and pick out the desired image. Want to follow this exact example? Use this image.
Now, configure columns and rows to break up the image, as appropriate depending on how many cells it has in those directions.
If applicable, enter in values for the border and spacing fields. The majority of images do not need to worry about these fields.
- Click Add to complete the process. That's it.
After importing frames, you can give the Animation a name, alter frame durations and other properties we described above.
Note: Mobile games have to import images at quadruple their size in order to accomodate larger resolution displays. Read our Scaling article for details.
Method 2: Drag and Drop
You can drag and drop an image into Stencyl while the Actor Editor is open. Doing this will bring up the dialog you see in Step (2) of the standard method.
- Dragging in an animated GIF will bypass the dialog and immediately import the frames.
- Dragging in an image to the Dashboard or an editor that is not the Actor Editor will have varying effects, none which will import a new animation for the current Actor.
Working with Animations
Now that you've imported an image, you'll see its details, We'll step through what each part means.
Each animation state is given a name, which you use when you want to switch animations.
Frames can be set to loop or play through just once.
Synchronized animations will animate in at the same time as each other. To put this more concretely, think about the coins in a Mario game. Have you noticed that their animations always look the same no matter what? If this weren't the case, it would look disconcerting.
An Animation can also have a designated origin point. The origin point is used to determine the point by which an actor rotates or scales. By default, this is set to the center point.
Every frame can be given a different duration (in milliseconds). Double-click each frame's box to edit the duration.
Notes: The minimum duration is 10ms. To edit multiple frame durations at a time, select multiple frames (using SHIFT or CTRL/Command) and click Edit Frame in the bar below.
Editing in an External Editor
Individual animation frames can be edited in an external editor. This is useful for making small tweaks to the graphics, without having to re-import the whole animation.
Double-click a frame's box to bring up its edit dialog. Then, click the Edit Image button to open it up an external editor.
Note: You set the External Editor from Stencyl's Preferences dialog. By default, we use an image editor that we bundle in, but you can set it to any app you like, such as Photoshop, GIMP or Paint.NET.
Collision Bounds determine the physical shape(s) that an an actor assumes in a particular Animation state.
To define Collision Bounds, flip to the "Collisions" page of the Actor Editor. There, you will be able to edit your Animation's Collision Bounds on a per-animation basis.
We cover how to define Collision Bounds in our Collisions article.
All of these blocks are found under Actor > Drawing.
This block switches the actor's animation to the one you specify.
Note: Do not type in the animation name directly. Instead, use the "as animation" block and type the name into that.
What's the current Animation?
This block returns the animation that is currently playing. Note that this returns the animation, not the textual name of the animation.
Is the current Animation still playing?
true if the current animation is still playing, otherwise it returns
false. This is only useful for animations that aren't set to loop.
Switch to Frame
This block lets you skip around an animation or reset an animation to its starting frame. Specify the frame index you wish to jump to.
Note: Frame indices are displayed in the gray boxes and start from 0. Switching to an invalid frame leads to nothing happening.
Current Frame Index
This block reports the index that the animation is currently playing.
Tip: This is useful when you want to tie some logic that's triggered when a certain index is reached. In animation terms, this is called a keyframe.
Total Frame Count
This block reports the total number of frames in the current animation.
Design Problem: More Animations or More Actors?
There is no limit to the number of animations an actor may have. However, it's best to consider when it's appropriate to go with more animations or whether it's better to create a brand new actor.
The "Zelda" Dilemma
The "Zelda" Dilemma is a classic game design problem you run into when making an Adventure game and decide how you want to create your Hero character.
So suppose that we start with just the basic animations.
Not to bad so far. But Link holds a sword! So we have to add 2 more sets of animations, one for holding the sword and one for slashing it.
- Walk + Sword
- Walk + Slashing Sword
But wait, there's more! Link changes swords throughought the game. He can hold the plain sword, the Master Sword and the Golden Sword, and they all look different! That would triple the animation count.
And what about the Bow and Arrow, holding a shield and... you get the picture.
The Bottom Line
In cases like these, it's better to create a new actor rather than add more animations. This is particularly applicable when an actor equips items that don't alter his animation and could be convincingly drawn separately.
There are other benefits to having "attachments" as different actors.
- Easier to define collision bounds, particularly for weapons.
- Confines extra behaviors to the separate actor, rather than creating 1 monolithic actor with everything.
It's best if all animations are the same size.
It's often necesary to ensure that all animations of an actor are equal in size. Making animations different sizes, for the same actor, could have a negative impact, especially if the origin point is different in each animation.
Two common scenarios are:
- The actor magically jumps to a slightly off-center location when you switch animations.
- The actor's collisions mess up because the new animation has the collision bounds located in a different part of the animation.
Animations, Blocks & Attributes
Note that when using the "switch animation" block, you cannot type text directly into the blank. Instead, you have to wrap that text inside an "as animation" block like the following.
Reminder: All animation-related blocks are located under Actor > Draw.
Actors with No Animations
Actors with no animations at all may crash the game. We'll address this in a future version of Stencyl. Note that this is different from an Actor with a single blank (0 frame) animation, which will work just fine.
- Animations are states, such as standing, walking and running.
- Animations consist of frames (how it looks) and collision bounds.
- Exercise good judgement in deciding whether to go with an actor with many animations versus several actors with fewer animations.
Challenge: Equipment for an Adventure Game
We talked about the "Zelda Dilemma" above. Now's your chance to see this for yourself and do things the right way.
Create a simple walkaround demo in which the character can equip different items that show up in that character. Do this the right way, by making those items each their own actors.
Print Article Edit Article How to Edit an Article
can i draw the actor and use it ??????
Just always set x and y of Sword actor to Link actor after making the animation frame
of the Sword the same size as the corresponding Link animation frame.
You still have to make the animations of the sword, just synch them up.
The Challenge is just saying to separate the sword's animations from the character's animations.
Two separate actors rather than just one actor with ridiculous amount of animations.
The hard Part would be what some of these guys are trying to do because they misunderstood the challenge.
(Or perhaps it was worded differently back then? Just noticed this challenge thing was like 2 years ago, lol)
What they are trying to do from what I gather is to make just a one-frame graphic of a Sword, set it's hotspot to a spot
on the Link actor, and then have it rotate and/or move in certain ways to animate it.
I actually used this way back in The Games Factory and it worked well, but The Games Factory had 2 kinds of hotspots.
There was the Origin Hotspot and then there was a Spare Hotspot upon which I would place a weapon.
Does Stencyl have 2 hotspots and the ability to simply place one actor to another actor's hotspot?
If so then the task is not so hard to accomplish afterall, because you can change the hotspot in each frame of Link
to move the sword's position and then change the angle. But without the hotspot method you are going to have to
move the sword in relation to the origin point for each frame rather than simply setting it to a moveable hotspot
like was available in The Games Factory.
Are animations still stored in lines? I was under the impression the were now stored as rectangles.
how bout just tell us how to make actors follow each other? that is the main difficulty in the challenge and it has nothing to do with the rest of the article.
darrigaz - No you haven't missed anything. I ran into the exact same problem coming from unity myself. You need to make a behaviour that updates the childrens' positions. When doing so I have NEVER got it to work while using origin point in the center for the children. Use top left instead and use trigonometry to get it right. And don't forget to turn off physics for the children :)
The equipment challenge is absurdly difficult in stencyl.
It's easy enough to make some global attributes for player x and y and move your equipment actor to those co-ordinates. However it's completely impractical to try and do that for enemies as well. In unity you'd just set the equipment up as a component of the enemy/player/whatever but as far as I can see stencyl doesn't have a way to create "parent/child" relationships between actors.
Have I missed something?
Mad Bomber - I've updated the article to point the answer to that oft-asked question.
How many frames can one animation have? I have a large actor whose default animation has 24 frames(a rotating planet), and Stencyl flatly refuses to draw it at runtime.
Follow-up: Losian has implemented an example solution for the challenge here: http://community.stencyl.com/index. php/topic,23331.0.html
"Challenge: Equipment for an Adventure Game"
A challenge indeed! While this section does tell us to make separate actors for this, it doesn't show us how to call and display them together.
As it happens, this is just the sort of thing I need to be able to do for my project.