4-Direction animation based on velocity
This article explains how to get Construct 2 to switch to the right animation with 4 animations. The method allows for easy adjustment to 8 directional animation, if necessary. For this example we use the 8 direction movement behavior and we check the X and Y vector to determine the correct animation. This method is independently from which device is used to control the object.
Prerequisites
- A Sprite object
- 4 different animations for each direction
- 4 Idle animations for each direction
- Direction movement behavior on the object
Let's do this
First off, make sure your animations have the correct properties. Do this by right-clicking the object, then select "Edit animations". Check every animation so you don't run into any problems later on.
Next, We're going to add the correct Events.
We'll need to know in which direction the object is moving. To accomplish this, we compare the current X and Y vectors.
1. Click "Add event" and select "System" -> "Compare two values"
2. Fill in: First value: Object.8Direction.VectorX, Comparison: > Greater than Second value: 20
The result should look like this:
Note: You can use a global (constant) variable to set the margin (20). This way it's easier to edit should you need to.
What this does is, compare the current X vector (how fast the object is moving on the X-axis) to 20. If it's higher, do something. The X vector will be higher than 0 when it's going right, and less than 0 when it's going left. we use 20 instead of 0 to prevent some twitching in the animations.
When dealing with up and down, we use the Y vector instead of the X vector. In this case, a number greater than 0 means going down and a number smaller than 0 means going up.
Now we're going to duplicate the just create event for each direction (Up, Down, Left, Right)
1. Click "Add event" and select "System" -> "Compare two values"
2. Fill in: First value: Object.8Direction.VectorX, Comparison: < Less than Second value: -20
3. Click "Add event" and select "System" -> "Compare two values"
4. Fill in: First value: Object.8Direction.VectorY, Comparison: > Greater than Second value: 20
5. Click "Add event" and select "System" -> "Compare two values"
6. Fill in: First value: Object.8Direction.VectorY, Comparison: < Less than Second value: -20
The result should look like this:
NOTE: You can add some comments to keep track of which event is which direction.
Now, we're adding the set animation actions to each of these events:
Click "Add action" and go to Object -> Set Animation
Set animation to "[insert the name of your animation for this direction]"
In my case, I used: "RunLeft", "RunRight", "RunUp" and "RunDown".
Just to make sure we're on the same level, this is what it should look like:
You might think to just set the correct animation at each event and it'll work, but there's one issue: Diagonal movement. When you move both up and right, these event would switch between 2 animations every tick. It's messy and certainly not what we want. Let's fix that.
To decide which animation should be used when the player is moving diagonal, we need to compare another 2 values. This 1 condition will provide us with what we need to know: is the player moving more on the X-axis than on the Y-axis? This is where it get's a little technical.
We'll start with the first event (Right).
1. Click "Add condition" and select "System" -> "Compare two values"
2. Fill in: First value: abs(Object.8Direction.VectorY), Comparison: < Less than Second value: abs(Object.8Direction.VectorX)
We use the abs() function here to make sure the values are compared correctly. This way we can use the same condition for Left. The Up and Down events should have < Greater than instead of < Less than.
This is what it looks like after you've added all 4 extra conditions.(I rezised the window so the events fit)
For most games this will do. So for now, we're going to focus on setting the Idle animation and do the optimisation at the end. If we don't, the Object will still have the running animation, even though he's not. We're going to start with a very handy condition that is provided by the 8direction behavior.
Press "Add event" and select Object -> Is moving
Invert the condition by clicking on it and pressing "i"
Like this:
In this event, we're going to add 4 subevents, since we have 4 idle animations.
1. Select the event and press "B" to make a new subevent
2. Add a condition to a subevent: Select Object and then "Is Playing"
3. Fill in: "[insert the name of your animation for this direction]" e.g. "RunRight"
4. Add action: Object -> Set animation: "[insert the name of your IDLE animation for this direction]" e.g. "IdleRight"
Repeat these steps for each direction, which should look like this:
So now, whenever the Object isn't moving, and the animation is set to a run animation, Construct sets the corresponding idle animation.
Congratulations, You have your 4-Direction animation set up.
Tips and Optimisations
There are a few things that we can do to make this event sheet a little more efficient and neat. First of all there's 2 duplicate conditions. 1 in up and down and 1 in left and right. We can make this more neat (and probably faster) by making the other condition a subevent of the duplicate one. Thereby removing the duplicate.
This may sound a little confusing so I'm just going to show you:
Another thing you can do is make these 2 events (1 and 4) a subevent of Object -> "Is moving".
Tip: make left/right more dominant than up/down or vice versa
To make one axis more dominant as to what animation should play you can add a multiplier to abs(Object.8Direction.VectorX) and abs(Object.8Direction.VectorY) in event 1 and 4 (see image above).
For instance: If we put Object.8Direction.VectorX times 1.2 and Object.8Direction.VectorY times0.8 in both events, The left and right animation will always be used when going diagonal. Try this out for yourself! (it won't put an asterisk so I just put times)
A good reason for doing this is because on keyboard, you will often go exactly diagonal, which in the default setting vectorX and vectorY will be equal. So if you hit up and right at the exact right time, you will have an idle animation. To solve this, set the dominance up for one of the directions or make one of the directions Greater or equal instead of > Greater than (or Less or equal instead of Less than).
Optimisation: Don't set an animation already playing
Now I know Construct 2 doesn't set an animation already playing on its own, but I just think it's cleaner to check this ourselves. For each event that sets an animation, I use a Object -> is playing condition to check whether that animation is already playing.
Thanks for reading my tutorial. It's my first one and rather lengthy. I'll upload the .capx of my project for reference. Let me know what you think in the comments!