Introduction: How to Create a 2d Character With Character Controller in Unreal Engine 4 Using Visual Script for PC
How to create a 2d Character with character controller in Unreal engine 4 using visual script for PC
Hi, I am Jordan Steltz. I have been developing video games since I was 15. This tutorial will teach you how to create a basic character with with input for movement on a 2d plane.
Step 1: Setting Up Epic Games and Unreal Engine
Before we begin, we need to make sure that you have everything you need to follow along with this tutorial. You will need, Unreal engine (preferably a version later than 4.16) 2D assets for character and a test room. Side note, an Epic games account IS required to use the engine and the epic games launcher will be used to install the engine.
First thing is first, creating an Epic games account. To do this you can go to https://www.epicgames.com/site/en-US/home and click the sign in button then click sign up and fill out the required information. Then, after that we need to install the Epic games launcher and after that install a version of Unreal Engine. After you install Epic Games Launcher sign in to the launcher using the newly created account go to the Unreal engine tab and click the install engine button. Another sidenote, clicking the install engine button will prompt you to install the latest version of Unreal Engine, at this time it is Unreal Engine 4.21.2.
Step 2: Setting Up the Project
After the Engine is installed it is time to create the project. Unreal has templates that can be used but I like starting from scratch, if you want you can use the 2d template or you could create a blank project, give it a name and let it load. Side note about the starter content, it will not be needed for this tutorial however you can keep that content in if you would like.
Step 3: Getting Animations and Setting Up Character Animations
The next thing we have to do is import the assets, I got mine from: https://www.kenney.nl/. This site has characters and tilemaps, but if you have your own assets feel free to use them. There are 2 ways to import assets into Unreal Engine, the drag and drop method, or you can click import and import the assets you need. Also I recommend creating folders in engine to make things easier to find. I normally create folders for the characters assets, animations and enumeration state, so import the sprites and when you do select all of them using “Ctrl” + “A” to select all of the sprites and right click one of the selected sprites go to “Sprite Actions” and click “Apply Paper 2D texture settings.” This setting makes the files that we imported look so much nicer. After that if the sprites are not selected use the control and a key to select all the pictures again right click and find sprite actions and click “Extract Sprites.”
Next, is the fun part creating animations, and starting to set-up the characters animation states. For now let's focus on the animations themselves. I forgot to mention that before we begin the character blueprint should be created, right click click blueprint class, there is an all classes dropdown button click that button and type in “Paper Character.” Select that option and give the blueprint a name. I will call mine “EGA player_character.” Now that it has been created we can create the animations for the player character. If you are using animations from kenney.nl the animation frames are numbered for example, if there are 2 frames for the walking animation it the name will be “Assetname_walk_0” so on and so forth. Let’s start with the walking animations, find the respective sprites and control click to select them, then right click one of them and the “Create Flipbook” Option. Do this for the rest of the sprites for jumping and the death sprites.
Step 4: Dealing With Inputs and Enumeration States
Next, Enumeration States and getting the character movement and inputs set up. Enumerations will be used to store the state of the player and will be helpful for setting up the set flipbook function later on. In order to create an Enumeration blueprint right-click go to the “Blueprints” and click “Enumeration.” The next thing to do is creating the enumeration for use in the set flipbooks function later, after that we need to create the inputs for the player. To do that go up to “edit” >>” Project Settings” and find “Engine” click on Input and there are 2 mapping options “Action Mapping”, and “Axis Mapping”, Axis Mapping will be used for moving left and right, There will be one Axis Mapping and one Action mapping, remember this is basic and you can add more stuff to your character. First action mapping all you need to do is hit the plus button, then give it a name, I will name it Jump, when you go to set a key input there are many platforms and different controllers, I will stick with PC. So I am setting the key to the up arrow and space. Next is axis action, I called it move right and set it to the right arrow.
Now, we can focus on enumerations, there will be 2 enumerations: walking, and jumping .You can add your own descriptions of the enumerations. So, here is how you add them click new and give the enumeration a name and if you want a description.
Step 5: Setting Up the Character Blueprint
Now we can get to the programming side of things, first set the default sprite by clicking the sprite component and finding the Source Flipbook option and selecting the idle animation created earlier. Now, we need to create a few variables, we need a Boolean, a Boolean or bool is basically a true or false question, bool will tell us if the player character is moving right. I will call it Moving right followed by a question mark, and is landed. Is landed will be used for the jumping animation and the on landed event later.
Step 6: Creating Varibles
At this point, I would like to bring up categorizing the variables we create. On the right hand side there is a panel with the variable name, value, instance editable (meaning is it public and can you change it in the editor) and category, click in the category text box and give the category a name, I suggest “Movement” this will contain the bool and the reference to the enumeration state machine we created earlier. We will also need to create another movement related bool I will called is landed. Next it is time to focus on variables for the flipbooks, for these there is a variable type called Paper Flipbook, set it to object reference, compile the blueprint so you can edit variable defaults, however I must warn against changing the defaults of the boolean variables to true, it will mess up what we are doing later. Create the amount of flipbook object variables that you will need. After that we will need to add a camera and a spring arm component, to add a component just click add component and search up camera, but don’t forget that a spring arm is also required so click add component again look up spring arm select it. Now, click and drag the camera, if it is not already a child of the spring arm on the spring arm.
Step 7: Setting Up the Camera
Now, it’s time to change the camera settings in the details panel there is a camera settings option under the camera setting change the perception mode to orthographic and an aspect ratio that works for your computer screen I am not very good with aspect ratios so, I just changed mine to 2048, to prevent screen crunch then save and compile the project .
Side note set the constraints for the character to x,y and z for both rotation and position.
Step 8: Changing the Game Mode
The next thing we should do is change the game mode settings to do that we go to the edit tab and select project settings then find maps and modes click the carrot key by selected gamemode, looks like I may need to create a new game mode so, if your options are greyed out like mine are click the plus by the name of the selected game mode I am doing this so we can edit the player character that unreal will use whenever we load up the game.
Step 9: Set Flipbook Function Creation
It is time to start working on setting up the player characters movement controller, double click the paper character blueprint you have created it will take you to one of 2 windows the event graph or the viewport, if you are not already in the event graph and are in the viewport click the 3rd tab (if you are using the default set up of unreal engine). You will be greeted by a blank screen with a box with a carrot in it called OnEvent BeginPlay, don’t worry about that yet. Instead we are going to set up a set flip book function of our own.
Underneath the components tab there is the functions tab click the plus on the function tab, at this point we should create the variable to store the states machine we created earlier, the state machine will help easily switch between animations without having to use the standard Unreal Set Flipbook function, double click on the new function and there is a purple box with the name of the new function on it click on it and there is an option for inputs click the plus on the inputs tab set the variable by clicking the dropdown button and in the search bar type the name of the enumeration that was created earlier have that as the initial input or as I usually call it the next state. Then set the instance for state by dragging in the enum variable from the variable tab and when you do that click the set option. Off of that click the at the carrot and drag then let go of the mouse button there will be a menu that is brought up with a search bar type set flipbook in the function, select that very option, in that option we have a few options, such as : target which is automatically set to sprite, and new flipbook, with that flipbook option drag off of that and search select. With the select there is an index, by default it is a boolean, we can change that by dragging in and dropping the states machine into the index, that will give us the opportunity to use the flip books we created, drag and drop those variables into the respective positions, however you set it up. That select will be what decides the next flipbook. After the set flipbook piece of the function drag off of the set flip book and type return node. I do this for neatness, it is not required. That's all we need for the set flipbook function.
Step 10: Movement Component Setup
Next, we need to set up the movement component, Go in to the event graph and right click and search Input Axis I called the input axis for moving right MoveRight. This event will be our motion controller. Next, off of the input axis drag the wire off of the carrot and search compare float, if the axis value is not already in the input bubble drag the axis value wire to the input bubble. In the compare float there are 3 important pieces <, ==, and >, we will not be using the == portion of the compare float. In the < portion we need to get set the move right bool by dragging the variable from the panel to the event graph and clicking the set option and click the checkbox once, this will set the bool for moving right true, drag the move right bool and set that to false for the <, portion of the compare float. From this drag a wire from either one of the set statements and search add movement input, take the other set statement and drag it into the add movement input peice of the scripting, then drag from the input axis bubble to the add movement input’s scale value bubble. Side note, I recommend commenting so, how you do that is left click and drag over the pieces of code you want to comment and press C.
Step 11: Jumping Direction and Finalization
Finally, on to the direction controller. This will include a compare float. Create another custom event, from there we need a compare float, comparing to 0, we need to get velocity, but instead of just getting velocity split the return value pin by right clicking and clicking split struct pin. Use the return value X as the input for the compare float with the > and == going to the true of the branch we need to create using the move right variable with < and the false of the branch going to the set control rotation, which we will need to split rotation bubble with the same method used to split the get velocity pin, then set the Z pin to 180.0 , how ever since we don’t have a target yet unreal engine will yell at us until we find a target, this is where we right click and type in the search bar get controller using the return value for set control rotation nodes. The second set control rotation node will have everything equal to 0.
One more thing is jumping, this is going to be somewhat long. The first thing we do for this portion of the character set up is look up input axis jump or whatever you decided to call that button mapping, from there we will see that there is a pressed and released branch on the pressed we can drag out from that triangle and search jump, on released we can look up stop jump. We are not done there however, right click and look up can jump and use the return value in a branch on the true event we need to call our set flipbook function and add a delay of 0.2 seconds then get a reference to the character movement component and see if the character is falling by searching is falling in the search bar using the return value of that to set our flipbook to the idle state (since the character that I am using does not have a falling animation by the looks of it.)
Now, it is finally time to test this character out in the game. Before you test it however make sure that you take the animation controller and direction controller and hook them up to the event tick.