Create a 2D platformer using Unreal Engine 4. Part 1 - Game character, movement

Not so long ago, Epic Games made an incredibly generous gift to everyone - the UE4 engine with source code for only $ 20 / month, consider it a gift! We will use their generosity and generosity and try to create something that is not very complicated, but at least more or less playable - a 2D platformer.

First of all, we need:

• character sprites
• platform textures

Since I personally do not know how to draw at all, and this is not our goal, we will use the resources of the wonderful game “Castlevania: Symphony of the night”, in which the main character is Alucard, son of Dracula. It’s easy to find the full storyboard of the character on the expanses of the network - what we need!


Let's prepare storyboards for 2 states: rest and running, for this we need to remove the red background (we don’t need the character to always move against the background of the red rectangle) and cut out the required parts of the image, getting something like this at the output:



And this :



So far, only the floor is cut out of the background images:

With the preparation of everything, now we proceed to create the project and import the source. In the latest versions of UE4, the ability to immediately create a 2D Side Sroller (blueprint) was added, we will use it without forgetting to remove the starting content - there are a lot of materials and objects that we don’t need right now. By default, they give us a mannequin ready for a run and a couple of platforms, we don’t need all this, so we delete it.

We structure the project folders and import the appropriate images:



Next, you need to extract the sprites from the textures. You can do this in two ways: automatically and manually, I note that with automatic extraction there can be one nuance: the sprites will be numbered in ascending order, but it is not necessary that the numbering will correspond to their position in the original texture, so after extraction I recommend that you carefully check everything that subsequently there would be no artifacts of animations. Since we still have a lesson, we will do everything manually.

First of all, create a couple of daddies, this time in “Sprites” → “Alucard”, inside which there will be “Idle” and “Walking” folders with the corresponding sprites. So, create an empty sprite, call it “Idle_1” and open it. Immediately go to the “Edit source region”, and specify the texture “Alucard_Idle” as the source texture.



One sprite should contain one frame of the character’s animation, so we’ll adjust the “Source UV” and “Source dimension” values ​​to get one frame, or just double-click on the image you need to automatically determine its borders:



Do the same with the remaining frames of rest and walking:



From the texture of the platform, we also create a sprite, but since there is only one image, you can simply make it through the context menu.

It's time to give some life to our sprites! To do this, create an “Animation flipbook”, give it a name and open it. We add the corresponding frames in order and set the number of frames per second to taste, I like 6:



Repeat for walking and at the exit we have 2 flipbooks:



Now we will add our platform to the scene, it is important that its position in component Y was 0. Further add control (it is already turned on in the workpiece, but reassign it as it suits us): Edit → Project Setting → Input.



We proceed directly to the creation of the character. In the “Blueprints” folder, create a new BP, we will be asked which print class, select “Character”, give a name, open and go to the “Components” section. Adds a Flipbook to the capsule, select the Idle animation prepared as a source, add SpringArm to it, and cling to the camera, in principle, you can do without a hand, but it's better with it. We adjust the size of sprites and capsules to taste, but it is better to make the capsule a little smaller so that the sprite does not float above the ground. We remove the dependence on the controller from the camera and set the orthographic type, the depth to taste.



Compile, save. In the world’s settings, you can create your own GameMode, or change it in the existing “Default Pawn Class” to the character we just created.



Now you can start and make sure that we have done everything correctly and that our character is eagerly awaiting orders.



It’s time to teach him to move around, for this we re-open the character’s BP and go to the graph section. It is worth noting that Blueprints is a very powerful tool, with its help you can do without the classic code writing in the project, but in reality it is the same programming, just, in fact, you only need to write a few names and values. So, first of all, you need to add movement along the vector during the MoveRight event:



Here the following happens: when acting on the axis (we can have two actions ± 1), the object moves along the X axis for a given effect. In principle, this is enough for movement, you can try - compile, save, test. The character moves along the axis, but without animation, because we did not provide for its switching.

To switch between animations, we need to replace the animation itself in the flipbook of our character. There are several ways to do this, but I prefer the most versatile and, it seems to me, elegant. Create your own event on the graph, and name the goals, respectively, “Update animation”.



The logic of work here is as follows: when the event is called, the specified animation is placed in the target flipbook. The animation itself is selected depending on what speed our object has, if it is greater than zero - an animation of walking, otherwise, rest. We will update the motion graph:



A new event has appeared - “Event Tick”, it happens every frame, respectively, now every frame we check for the need to change the animation. If you start the game now, then the character will move with the running animation, but will always look one way, we will fix this:



The final result:



So today we have created an animated 2D character that can move around the platform. In the future, add the ability to jump, fight and destroy enemies. Suggestions, comments and criticism are welcome.

UPD 1. On the advice of the user, Torvald3d removed bilinear interpolation on the character source textures. Just go to the imported texture and change the filter to the “closest” one.



Well, and a comparison: