Animation assets

Even after we have made all the code we need, it is still not enough to get the character running in the game; and doing exactly what the code is saying. The code is just a way to do things, but in order to see it needs some way of being visualized.

In Chapter 1, Preparing for a Big Project, we managed to import some of the free assets to the game, one of those assets was the warriors in the free packages from Unreal Marketplace. If you haven't added it to the project, then follow the steps we have used in Chapter 1, Preparing for a Big Project, and add those characters to the game.

Adding sockets to the skeleton

Double-click on the character you want to use in order to open it in the animation editor, Persona, and there you need to switch to the Skeleton tab in the upper-left corner. From there, you have access to the entire skeleton.

Because I know that my player will be using his right hand to hold weapons, I wanted to visualize this so it becomes very easy for me to understand how, exactly, the animation looks.

Select the hand_r joint from the bones list and by right-clicking you can choose Add Socket; this will add a socket that can hold items. I named my socket sword, name the one you made as you wish!

Now you right-click again, but this time on the socket itself (the socket we have just created), and choose to Add Preview Asset.

That will open a small menu for you to choose an asset to use as a preview. Pick one choice but keep in mind that the asset you choose will only be a preview, only appears inside the character editor, and will not be spawned in-game, or even in any other editors; it is just a preview asset to test your animations.

Keep moving the socket, and position and rotate it until you get a good result. It has to be very accurate, as this position will be used later to hold weapons.

Creating the blend space

Now it is time to create the animation blueprint. In order to be able to create the fully working animation blueprint we still need to create one more thing: an animation blend.

The animation blend is meant to implement a blend between several animations, and the goal we want to achieve here is to blend between the idle, walk, and run animations.

Using animation blend is one of the most fun, yet simple, tasks you can do with Unreal Editor. By simply creating an animation blend 1D asset from the content browser, you are half-way there.

Right-click inside the content browser and choose Blend Space 1D from the Animation section; this will pop up a window for you to choose the targeted character skeleton. Choose it, and name the animation blends as you wish.

Open the animation blend space. The way it works is that a vertical line in the middle represents the blend over time.

On the right-hand side you can see all the animations listed for the character; by simply dragging and dropping animations into the space, you are assigning them. I simply put the walk animation at the bottom and the running animation at the top, then the walk animation in the middle, but shifted it a little to the bottom to make sure the blend between the idle and walk is quick, but the blend between the running and walk takes more time and inputs.

If everything is OK and you like the result then hit Save and Close this Editor window, as we are going to create the animation blueprint.

The animation blueprint

As the name implies, the animation blueprint is a way to handle the relationship between animations in the form of diagrams, charts or whatever you call it.

Creating an animation blueprint asset is as easy as creating the blend space. From the same animation section of the contextual right-click menu of the content browser, you can choose Animation Blueprint.

The animation blueprint is a special type of blueprint; however as long it has the word blueprint in it, this means that it has to share some characteristics of the normal blueprint. This means that the animation blueprint not only contains a bunch of animation nodes, graphs, and state machines, it also has variables, functions, events, and almost anything you can find within a typical blueprint, such as an actor blueprint for example.

Because the best use of the animation blueprint is to utilize almost each section of it, which means a huge part of the animation handling process will be involving code or logic creations, in order to do that I managed to add some variables that will be used to build the logic.

Those variables are:

• inAir: This is a Boolean variable that gets the in air value from the character class.
• movementSpeed: This is a float variable that is going to control the movement speed; based on that, we will be handling the animation blend space we made earlier in the previous step.
• isAttacking: This is a Boolean variable that stores the original value we get from the gladiator class.
• isStllAlive: This is a Boolean variable that stores the original value we get from the gladiator class.
• attackAnimationIndex: Because I'm planning to have more than just an attacking animation, I wanted to have an integer index; based on that index I'll be loading a certain animation. We are going to add logic to randomly give an index.
  

Once everything is alright, we can start building some logic within the animation blueprint. This logic will be mainly focusing on updating some statues and storing values inside the previously created set of variables.

The logic is simple! As you can see, all that it is doing is getting the character controllers that are using this animation blueprint instance, and then getting the is falling status and applying it to the local variable inAir, and then doing the same thing with the velocity but applying it to the local variable movementSpeed. Finally it calls a custom event called UpdateStauts. All this happens with every single frame.

The Update Status event is not doing anything special, in fact, it is doing almost the same thing, but this time it is not accessing the character controller; instead, it accesses the gladiator class of the character that is using this animation blueprint instance.

Then it gets the isAttacking and the isStillAlive values from there and assigns them to the local variables. Finally, it makes a random number between two values; the maximum value matches the number of the attacking animations I want to shuffle between.

So, why do we get all those values and store them in local variables?

The answer is simple. In order to apply a certain animation at a certain moment, we have to define some conditions for it, and this is how the state machines work: once a condition takes place, the animation blends from one state to another based on that condition.

The last, but not least, piece of logic is to tell the code that the attack animation is done, by calling the OnPostAttack method we made earlier inside the Gladiator class using the animation notifications. However, this step needs preparation first!

So let's open any of the attacking animations either by choosing the animations section from the upper-right corner of the animation blueprint, or by double-clicking the animation itself from the content browser.

By dragging the timeline, you can jump to any frame of the animation. I wouldn't suggest going to the end of the animation, as lots of animations contain a few extra frames at the end, but I would say go to the moment where the character actually finishes the attack, and you can right-click on that, on the timeline, and choose Add Notify; this will allow you to enter a name for a notification.

A notification is simply a call for a function at a given moment; this means that you can call functions at certain moments in animations, which is great. You can do lots of awesome things using this feature; for example you can spawn some particles or play a sound effect every time the character's foot hits the ground!

Anyway, I managed to name my notification OnAttackEnd. Remember the name you use, and apply it for all the attack animations you have. Remember, once you create a notification, you can reuse it for all the other animations under the same animation blueprint, which means that, if you have another attack animation for the same character, you can directly add the same notification and you don't have to a create new one.

Once you are done adding the notifications you want for any attack animations, or any other animations you have, you can go back again to the logic section of the animation blueprint and there you can find the newly added method listed within the event of the right-click menu.

Add that event and, simply use it to call the OnPostAttack method from the gladiator class of the character controller that is using this animation blueprint instance.

Now, the last step in completing the animation blueprint is to add the animation state machines themselves. From the main graph of the animations, you can add a main animation state machine and name it anything you want. This one will be the main one, usually we call it Default. Connect it to the final animation pose.

That means, whatever happens inside this Default state machine will be used as the final pose for the character animation blueprint at the current frame.

When you double-click on the Default state machine it will take you inside it, which is empty. All that you have to do is add states, name them, and give them conditions.

You can create states from the right-click menu and you can connect them by just dragging and dropping lines out of them, just like blueprint nodes.

I managed to added several statuses, such as:

• IdleToRun: This displays the animation of the blendspace we made, to blend between idle, walk, and run
• Jump Start: This plays the start of the jump animation, and it is not loopable
• Jump Loop: This is a loop for the middle part of the jump animation, and it has to run and loop as long as the character is in the air
• Jump End: Once the character gets on the ground, the end of the jump animation should play once
• Die: If the player is dead, we play the death animation
• Attack: You can add as many attack states as you wish to fit the amount of attack animations you have, but make sure that the amount matches the maximum value of the attackIndex
  

It might look complex, but state machines are one of the most fun and easy topics in animation programming as it takes the load from the code side, and makes it more visual and easy to digest.

Once you drag a line out of a state to another state, you will have a little circle with a double directional arrow; this is called the condition. If you double-click it, it will take you to a graph where you can put some logic: this logic will be the condition that will trigger the transition between the two states.

If we take the transition between Idle and Die, it will simply be the value of the Boolean called isStillAlive; double-click the condition circle between both states to see it.

Build any logic you want. It does not have to be one condition, you can add as many as you wish. Moreover, you don't have to double-click to open the graph every time you want to check the condition; you can simply hover with the mouse over the condition circle, and it will display a conclusion of the logic for you, if there is any logic inside it.

However, regarding the state itself, if you double-click it you will find that you can attach an animation or another state machine and you can keep branching state machines as much as you wish. I'm sure you wouldn't do this, as there are tons of ways to achieve any result, simply.

By opening any of the states, let's say the Die one, you may find it has only a Play animation node; you can simply put it on the right-click menu.

The most important part here is the settings section that is activated when you select the play animation node, as it gives you two main (and important options, among others):

• Sequence: From this drop-down menu you can select which animation should be played.
• Loop Animation: This defines the type of animation. Because sometimes you can blend between animations when it is done, if the animation is looped it will never be done and that means no blend is going to happen. So it is very important that, once you add a play animation node, you decide carefully if it is going to loop or not.