Make a 2D Top Down Game in Unreal Engine 5 - Tutorial

in this video I'll show you how to create a top-down 2D game in Unreal Engine 5. you'll learn how to set up multi-directional Sprite animations top-down character movement using the enhanced input system and how you can make your top down game look awesome by mixing it with 3D elements and modern lighting making a top-down game the regular way in Unreal Engine can be a bit cumbersome and hard to manage so in this tutorial we'll use paper ZD paper ZD is a free plugin that allows us to use animation Blueprints and animation notifies to make working with Sprites easier it also comes with support for multi-directional animations which makes it perfect for top-down characters like this first you'll need to get the paper ZD plugin from the analogy Marketplace and install it to your Unreal Engine version create a new blank blueprint project to activate paperzd click on edit plugins search for paper ZD and add a check mark click on restart now to apply the changes for the tutorial I'll use the three eight Direction character by Axel Arts which you can download from the link in the description once you download it and unzip the file there's the single PNG of the Sprite sheet create a new folder and call it character then just drag the Sprite sheet into the content drawer to import it if you're having issues with this you can instead use the import button rename the texture to T underscore red to make it easier to work with right click the texture and select apply paper 2D texture settings right click it again and select extract Sprites you can then right click in the viewport and drag to change the visible area and use the mouse wheel to zoom in and out now this Sprite sheet in particular isn't perfectly laid out to be used with Unreal Engine Sprite extraction tool and will have to use some advanced settings if you know how to use a Sprite or another image editing software you could make adjustments that way but this is actually a great opportunity for me to show you how you could fix something like this right inside of Unreal Engine when using Sprite extract mode Auto these boxes might look fine at first glance however there's a slight offset and for the upper left and lower left direction there's a jarring jump because of that so we'll want to use grid if the Sprite sheet is laid out symmetrically we can get the cell width when dividing this value which is the horizontal image size by the number of columns in this case we have eight columns so we can just divide this by 8 right here in the input and press enter for the cell height we divided by the amount of rows which is 12 in this case but you'll see that for this Sprite sheet we'll have gaps here which means it's not laid out correctly and will cause our character to teleport through trial and error I figured out the values we'll want to use here so you can just use the same numbers for the cell width we want 15 for the cell height 17. we only need the Sprites for the character with the Red Cap so we can use a margin y of 198 to ignore the others spacing X should be one and spacing y should be 6. you can see that the bounding box is now perfectly matching for the first two rows however not for the third since the white space between them isn't uniform we basically want to slide the box down by two pixels for only the last row but we first need to extract the Sprites so click on extract open up the very last Sprite click on Source texture to show the Sprite in the entire sheet and you can see that the legs are cut off to adjust which part of the sheet we use we can change the texture UV just type plus 2 in here to slide the area down by two pixels you can see that it changed but this view is actually backed a little bit to force the Sprite to update we can set the source dimension on y to 16 and then just back to 17 and now everything is fine now that you understand how this works we can adjust this for the other seven Sprites all at once go to the content drawer and select Sprite number 16 hold shift and left click on Sprite number 23. now right click on one of them asset actions bulk edit via property Matrix click one of the assets on the left and then control plus a to select all of them now just type in 246 for the Y value of source UV then set the Y of the source Dimension to 16 press enter set it back to 17 and press enter again then don't forget to save all when you open up one of these Sprites you can confirm that everything worked out now we want to separate these Sprites by Direction since otherwise it will be very hard to work with them make a new folder and call it up for all upward facing Sprites click Sprite 0 hold Ctrl click Sprite 8 and then 16. drag them into the folder and select move here now do the same for upright Sprite 1 9 and 17. now for right Sprite 2 10 and 18. now for downright Sprite 3 11 and 19. then down 4 12 and 20. then down left 5 13 and 21. then left 6 14 and 22. and lastly up left 7 15 and 23. now we need to create our flipbooks from these Sprites let's start with the down Direction in each of these folders we now have two frames for the walk animation on the left and right and a single frame for the idle in the middle right click the middle Sprite and create a flipbook I'll call this FB underscore red underscore idle underscore down and we'll use this naming convention for all of them now select the left Sprite hold Ctrl to select multiple items and click the right Sprite right click and create flipbook call it FB underscore red underscore walk underscore down if you open it up you can see that the movement is animating too fast we'll change this with the bulk editor after all flipbooks are set up now we need to do this for all the other directions this should only take you about a minute but doing this correctly will save you a lot of time later on just repeat the step of creating the idle animation and the walk animation for each of these folders we can now apply an asset filter by clicking this button select paper 2D paper flipbook now we can select all flipbooks at the same time right click one of them asset actions bulk edit via property Matrix make sure all of them are selected and set the frames per second to 7 then save all when we open a walk flipbook now you can see that the walk speed is much more natural clear the filter by clicking here make a new folder called Sprites and toss all of our textures Sprites and flip books in here we're currently in an open world map which we don't really need click on file new level basic let's now create a blueprint for our character right click create blueprint class then click on all classes and search for paper ZD select paper ZD character I'll call it BP underscore top down chart open it up this is basically just a paper 2D character but it has the animation component from paper ZD which we can later attach an animation blueprint to click on the Sprite and for Source flipbook select our idle down animation when we zoom in we can see that the character is really small we could scale up the Sprite using the settings here however there's actually a better way go back to the top folder of all your Sprites click here to add another filter this time around we want to filter for Sprites select all Sprites right click and bulk edit via property Matrix make sure they're all active and set pixel per unit to 0.2 this will basically make our Sprite 5 times as big save all we have multiple options for positioning the Sprite and camera but for now let's go for a traditional view straight from the top set the rotation on the x-axis for the Sprite to minus 90. now go to the capsule component and make the half height smaller about 50 should be fine go to the content drawer and deactivate the filters then find the top down character blueprint in our character folder when we drag a blueprint out in the world we can see that the Sprite is floating we want to go to the Sprite settings and change the location on the z-axis we can go from -50 which we use for the capsule half height but there's one issue we are now clipping into the floor which causes flickering and other issues so it's better to set this to -49.5 to have a bit of Tolerance now we want to set up a spring arm and camera click on the capsule component and then on ADD look for spring arm while the spring arm is selected add a camera we then want to rotate the Springer by 90 degrees to the right and then 90 degrees to the top to look straight down onto the Sprite here you can see a preview of what that will look like let's get into setting up our animation source and animation blueprint with paper ZD right click into the content drawer paper ZD animation source on the top left we can create a new animation sequence the first one will be for the idle state usually you just select your flipper key for animation data but since we have eight directional animations we want to activate multi-directional sequence this is where the magic happens the N value determines how many directions our animation has the default is four and it supports up to 16 directions however we want to use 8. let's start putting in our animations from the top so click on the top area to activate it and then click on animation node look for the idle up flipbook you might need to zoom out here with the mouse wheel then just continue doing this for each Direction once you're done you can hold the shift button to preview the animation and make sure you pick the correct flipbook for each Direction let's create a new animation sequence and do the same thing for all of our walk animations again set it to multi-directional and end to 8. then select the top area and look for the walk up flipbook and again repeat this process for all the other directions once you're done hold shift again and check that all animations are set up correctly by the way I started a patreon to support the creation of videos like these please consider supporting the channel and get rewards such as your name in the video credits Early Access to videos and the paper 2D cheat sheet this document has a lot of information about paper 2D I've gathered over the years which can give you a real Head Start when making 2D games and Unreal Engine let's go back to the content drawer and create a paper ZD animation blueprint It'll ask us for the parent animation source so select the as underscore top down Char we just added it I'll call the file ABP underscore top-down chart open it up similarly to a scheduled mesh animation blueprint we have an event graph and an animation graph for now double-click the animation graph which determines which flipbooks are playing at any given time for testing purposes let's just play the walk animation save and compile open up the top-down character blueprint on the animation component under Adam instance class we now want to select our ABP underscore top-down chart you won't see any changes here in the viewport but when we start the game we can see that the walk animation is playing this proves that the character blueprint is correctly using our animation blueprint currently it will always play the app animation since we need to tell the animation blueprint which direction you want the Sprite to face to do this we can use the set directionality node when we use this and don't input any values the Sprite will face right by default the x value will determine your horizontal Direction and the Y value your vertical Direction and it's always a value between -1 and 1. so for example minus 1 and -1 means down left 1 and 1 means top right and so on but of course we don't want to manually input this we could use something like the player's velocity their forward direction or the last input but right now our player can't even walk since the inputs aren't set up yet so we need to take care of that first up until Unreal Engine 5.0 we'd use the action and axis mappings in the project settings however they've been deprecated you can still technically use them but they'll stop working altogether in future updates from Unreal Engine 5.1 onward it's recommended to use the enhanced input system at first it's a bit hard to wrap your head around but it actually makes Advanced input scenarios a lot easier to deal with so it's definitely worth learning for this tutorial we only really need one input action which is for the movement create a new folder called input and open it up right click go to input and input action call it IA underscore move in here we have a few different options but all we really need to do is set value type to access 2D since we have inputs for left right up and down which could come from a controller's analog stick d-pad or the keyboard now create an input map in context and call it IMC underscore top down this will let us configure how our input actors are handled and what triggers them click on the plus and select the Ia underscore move then click on the key icon and press W as the first input the default axis is X for an access to the input so we need to add the Swizzle input axis values modifier this will change it to use the y-axis then press the plus icon to add another mapping this time for s again we need to add the Swizzle input access values modifier and in this case also at the negate modifier to flip the axis value add an input for a here we only need the negate modifier lastly add an input for D here we don't need any modifiers you could then of course also add bindings for the arrow keys or controller now we need to activate the enhanced input system in the top-down character go to begin play and get controller then cast this to player controller get the enhanced input local player subsystem call add mapping context on it for the mapping context select IMC underscore top down which we created a while ago now we need to add the input event for moving we can just search for IA underscore move and at this event this note will execute the triggered pin on each frame a movement input is active we want to separate the values for X and Y so right click on action value and split struct pin then create an add movement input node which is called from triggered connect the action value X to scale value we then also need to determine the world Direction since this should control our left and right movement we want to set X to 1 and leave the rest to zero we need another add movement input node for up and down movement connect the action value y to this scale value here the world Direction needs to be -1 on the Y y minus 1 and not plus one well you can see on the character that a positive value on the y-axis will move the character down however we want to move up on a positive value so we can flip it around by using minus one when we press on start now we still can't control the top down character though since we need to specify which character we want the player to use through a custom game mode go to the content folder right click and create a new blueprint of type game mode base then go to edit project settings and maps and modes for the default game mode select our custom-made GM underscore base then for the default Pawn selector top-down character blueprint in the map delete the character we placed and instead add a player start drag it on top of the platform when we start the game now you can confirm that the character can correctly move in all directions however we still have to take care of switching the animations one thing to keep in mind with this setup is that our movement depends on the players start having a rotation of zero zero zero if we were to rotate it by 90 degrees on the z-axis for example the direction of our inputs gets messed up because our character starts with a different rotation so set the player star rotation back to zero zero zero and make sure to build your Maps keeping this in mind there are ways you can make this movement independent of rotation however they come with their own caveats and this method will suffice for most use cases now that the Sprite is moving on the screen you might start to notice some slight artifacts depending on your lighting or background to get rid of these go to edit project settings search for motion blur and turn it off then search for anti-aliasing and set it to FXAA now we can finally start to adjust the direction of the animation in the animation blueprint first you want to go to the event graph and find the on init event this fires off a single time when the animation blueprint is initialized so it's great for saving a reference to the owning player get owning actor and then cast it to BP underscore top down chart promote the return value to a variable called top-down chart now back in the animation graph we can access this and get information about our character the most obvious way to set the directionality is through the velocity however for this case I don't think it's the best thing to use and I'll quickly show you why the character does turn in the correct direction and everything looks fine at first glance however there are some issues with this approach when walking into wall for example we'll bounce off and the direction the Sprite is looking at changes in Pokemon games for example we just keep looking at the wall even if we keep pressing up so for NPCs using velocity might be fine but for the player character the most important thing is which buttons are being pressed or have been pressed last so we need to add something in the top down character blueprint for this create a variable called directionality and set it to type Vector 2D drag it out here and set directionality right click and split the struct PIN past the action value x directionality x and the action value y to directionality Y this will now always save our last input back in the animation blueprint we can now use this and just pass it to set directionality now the direction changes correctly and does so even when we hit the wall the next step is switching between the idle and walk animation for which we can use the select animation by Bool node again for the condition here it's very common to use velocity but again it's not a good fit in this case which I'll quickly demonstrate in case the velocity is bigger than zero the Run animation will play otherwise the idle animation will play when we walk against the wall the animation will stop playing since we don't have any velocity however this will make the game feel unresponsive and players think it might froze the way Pokemon handles this is by slowing down the animation when hitting a wall and playing a sound so what we actually need to know is instead if the player is currently holding down any movement button let's go into the top down character blueprint create a new variable called is holding move and make it a Boolean we can use the Ia underscore move event to update this on start we set it to true on completed we set it to false in the animation blueprint we can now simply use this as the condition for switching between the walk and idle animation now even if we keep on holding the direction of the wall the walk animation will still play but let's actually Implement what Pokemon does and slow down the animation when hitting a wall while also playing a sound so I can show you how you would solve a problem like this with paper ZD in the top down character blueprint create a new function and call it is stuck set it to Pure add an output value of type Boolean and call it is stuck get velocity and its Vector length add a less operation now add a new variable of type float called stack threshold compile the blueprint and set this value to something around 50. get is holding move and append an end node connect the less operator result to it and return the end result in the animation blueprint we can then click the play Walk node and expose the play rate so we can dynamically change it use the select on the playwright and use the is stack as the index if we're not stuck the animation should play at the regular play rate of 1.0 otherwise at 0.4 you can see that the animation now slows down when we keep walking against the wall but we still need to play the sound open up the animation source and double-click the walk animation we could just add a notify here to play a sound however it will always play and not just if we're stuck to add a condition we need to make a custom noteify right click in this area add notify and new notify call it stuck sound then right click the label and set notify frame to 1 to play exactly on frame number one this automatically creates a new function or animation blueprint which is connected to this here we create a branch and check for is stuck if we're stuck play sound at location and use the actor location of the player for the sound you can of course use your custom sound but if you don't have anything just make sure that engine content and plug-in content is enabled and look for VR negative now we'll slow down and play a sound when constantly walking against the wall foreign directional top down character with some bells and whistles added to it at this point you'll have to decide if you want to go for strictly 2D style using tile Maps or mix the 2D character with 3D elements the creator of the character sprite also has a nice tile set available which you could use in the prior case I'm not going to go into detail about how to use time-lapse here but my other 2D tutorial has a section with tile maps you can use as a reference I also plan to make a video only focusing on tile maps and tile sets so in case it's already done by the time you watch this video a card should pop up in the top right but what I prefer is to mix 2D Sprites with a 3D World so if you want to give that a try follow along if you've been using Android engine for a while you should probably have some maps in your collection or you can just grab one of the free assets so start off by importing a map or an asset pack there are a few adjustments we want to make drop a player start with a rotation of zero zero zero go into the player blueprint and rotate the Sprite upwards by 90 degrees move it to fit the capsular Collision rotate the spring arm to about -90 degrees and adjust the distance you might want to adjust the size of the actor as a whole by scaling the root component on the Sprite you'll want to activate cast Shadow and set the material to masked lit Sprite material changing the directional light to hit your character from the front will light it up more and create better Shadows now you should have a decent understanding of how to make a top-down game in Unreal Engine 5 foot paper ZD I do plan on making more in-depth video that also involves combat and a dialogue system to make a real top down action RPG so make sure to subscribe and hit the Bell icon to get notified when it's released if you want to know more about how paper ZD Works in general you can check out this video as always thanks to my awesome patrons who enabled me to create videos like these for you foreign [Music]

Channel: Cobra Code

Views: 401,363

Keywords: game development, unreal engine, gamedev, ue4, ue5, game dev, top down tutorial, ue top down, unreal engine top down, unreal engine 5 top down, unreal engine 2d top down, unreal engine 2d, unreal engine 2d game, unreal engine 2d tutorial, unreal engine 5 2d top down, 2d top down tutorial, unreal engine 2d top down rpg, unreal engine 2d top down tutorial, ue5 2d tutorial, unreal engine 5 2d tutorial, ue5 top down tutorial, ue5 top down, paperzd, paperzd top down, paper 2d

Id: z1RMDMKcROQ

Length: 32min 9sec (1929 seconds)

Published: Wed Feb 01 2023