Unreal Engine 5 2D Game Tutorial [2023]

in this tutorial we're going to learn how to make an Unreal Engine 5 2D game and in this case it's a 2d platformer you can use your own project or follow along with me I'm using Unreal Engine 5.1.1 but if you have a later version you can follow along as well so let's go ahead and launch the engine we're going to select games and then I'm going to select blank because I want to teach you everything from scratch so let's start from a blank project and build everything give your project a name I called mine platformer 2D and if you have a starter content ticked remove that and with these settings let's go ahead and create the project if you're interested in in-depth game development courses please visit my website pixelhelmet.com which you can also find in the description below alright so here we are and to begin with I'm going to click on the content drawer and then I'm clicking dock in layout so I can have this browser down here all the times it's easier for you to see and I'm going to make a new folder down here go ahead and make a new folder call it maps and inside of this folder let's right click and make a new level so for this one let's just call it map main so this is the main map we're going to create a level in so double click on this map main click on Save selected and now we are ready to import the assets so let's go ahead and make a new folder let's call it assets and I'm going to make a new one called textures inside of this assets folder so textures and I'm going to go into this folder now the SS I'm using are these ones from if you write each dot IO and inside of this website you search for oakwoods or you can write this link I'll have it in the description as well so you can look in the description I've already downloaded the assets here on my desktop and for these assets just go ahead and import them you can click and drag into this textures folder that will automatically import the item so go ahead and import the backgrounds as well and I'll also import the character and I will also import the decorations for the decorations I'll just make a new folder in the engine before I do this and here in the settings I'll also make the thumbnail size small so it's a lot better to see here so right click and make a new folder I'll call it decoration and inside of this folder I'm going to drag all of these decorations into that folder all right and before we can use all of these items select everything if you can do this by holding shift and then clicking on the last item that will select all in the row here you can right click and say Sprite actions and apply paper to the settings the reason we do this is if you click on this for example and you zoom in you can see this doesn't look like pixelot this is very blurry and pixel art needs to be very sharp so what you can do here is you can right click right Action Supply paper 2D and now you can see if I zoom in now the pixels are as they should be so remember to do this for pixel art select the background as well and all of this you have imported the tile set right click spread action apply paper to the settings and if you go in there you can see everything is looking sharp and nice alright so let's go ahead and make the tile set first right click on the tiles and go to Sprite actions and create tile sets now this tile set I'm going to drag out of the textures folder I'm dragging it into the assets folder you can make your own folders as well if you want to be more organized you can also rename them if you wish I'm just doing it quick for this tutorial but you can click on F2 and rename this usually for example for tile sets I call them TS Oakwood for example then you know it's a tile set now for this tile set also right click and create a tile map and then call this one TM or tile map Oakwood okay so the difference between a tile set and a tile map so here the tile set are your you can imagine if you're a painter you have your colors and you hear you have your canvas these are your colors so these are the tiles you can paint to it and in the tile map this is actually where you paint your tile so this is where you build your level so the tile set is simply just the tiles you can use to build the level okay inside of the tile set you have to define the tile size you can see here when you click on one of them to view them it doesn't really fit with this uh with this square and it has to fit for this tile so the tile size is 24 pixels by 24 pixels and you can know this by going to this guy's website here you can see he made the pixel art 24x24 so this is why I'm setting it to 24 by 24 and when you click on the tiles you can see now it fits perfectly so let's go I'll sit down and before we continue I'm actually going to the textures folder again and you have to create a tile set for these backgrounds as well so we have created tile sets for this as well let's drag them out into the assets folder and we don't really need to create a tile map again we're going to use it inside of here so now we have a towel sets here and again click on the first one remember to change the tile size to 24 by 24 just like before and do the same thing for the other two backgrounds so 24 by 24 and the third one 24 by 24. let's now open the tile map and here we have to define the tiles again it is 24 by 24 and now I have to Define how large do you want your map to be I'm going to make my map 30 tiles so 30 and you can see here this is the map that I have and for the height I'm just going to set it to 10. now when we are making those tile Maps I usually add more tiles because when your character is standing here all of this area is empty in Unreal Engine and I don't want the players to see this empty area because they can actually see this Darkness here so I usually add more background tiles so they can't see them so what I do is when I Define my map width and height I usually add 20 tiles on top of it so I can say plus 20 and this is just for the left and we can say plus 20 again and this will be for the right so we have filling tiles for the left and right I'll do the same thing here for the height I'll add 20 and then 20 again so in tile Maps we paint in layers so I'm going to click here and click F2 to rename this and call this the base layer so I'll show you what layers are for now let's just paint so what I will start doing is I'll add these filler tiles to begin with so here you can see the tiles that you are using you can switch between tile sets later on when we make the background by clicking on this small icon and you can see you can see the backgrounds tile sets you have made as well but let's start with the tiles here I'm going to select this one so clicking on it and now you can see you can paint inside of here so remember my filler tiles are 20 tiles long so I'll start here and you can see the small number it starts from zero I'm not sure if you can see it on the screen it's very small so starting from zero and you can see it counts up so here starting from zero I'm going 20 tiles up 19 and so 0 to 19 you can can see that these are just fillers and I'll do the same thing here for going upwards so the tile index starts at 49 down here and I'll go up to 230 because 49 and 230 it will be 20 tiles just like this all right so this is the last line over here okay so we have 20 tiles counting here 20 here 20 here 20 here so these are the fillers you can click on G or this paint bucket and then you can just fill these areas in and the main map is actually inside of here so let's go ahead and create our map I'll just create a very very simple one you can take these tiles over here and I'm just going to click on B and you can paint them so painting here here just clicking on here and you can paint your own map I mean just go ahead and have fun with it all right now we have a complete map and let's now paint the background now let's go ahead and select one of the backgrounds so the first one is this background here so selecting it now to paint the background you can just click and drag and select everything now this background is not really good in size because we are pending in 24 by 24 pixels but somehow this background is actually not made for 24 by 24 pixels so it's cutting a little bit but it's okay in this example I'm just going to Showcase it to you and we're not really getting any bugs but if you're making a background for your game just make sure it's compatible with 24 by 24 pixels or however larger game is maybe 32 by 32 pixels and just match the tiles you've already made alright so instead of painting this background here you can see if I paint it I delete my tiles that I've just made and this is why we work in layers so here for the layer first I'm going to add a new layer and this one I'm going to call Background so clicking on background clicking on this arrow down here and go ahead and paint so I'm going to paint it here just like this and I'm also going to paint it a little bit here you can see it cuts so I'm just going to continue it a little bit and now you can see we have a small bug here and actually the artists haven't made tiles to put up here so we have to make this a bit lower like the tile so going to the base and I'm going to take this and just put them down here instead okay so now this is fixed now let's go ahead and select the second background and let me make another layer background two and we can put it beneath the background now select everything like before and paint on top of here if you want to see better you can disable this Background by clicking on this I just remember to click on background two before you paint again and go ahead and paint just pay attention to which which layer you are painting in alright and now I am ready to paint the third background click on the plus call this one background three and put it beneath background two and now let's go ahead and select the third background select everything and you can paint it here again and when it's filled I'm going to enable both of them and now we have this really nice looking level and for the Collision I'm just going to increase it to 200 and this is because so the character can walk on the tiles and not fall through the ground so let's close it down and now what we can do do is for this tile map we can click and drag it into the level and here it is very nice looking usually what I do is I click on it and I set the location to zero zero zero so it's here and this is what the level looks like now the lighting is off and we need to adjust this all right so let's now adjust the color and the lighting so before we do this go ahead to edit and project settings and inside of here search for anti-aliasing and just make sure anti-aliasing method on your end is set to none because we don't need anti-aliasing when we do pixelot so just make sure this is set to none on your end now let's go ahead and click on this button go to visual effects and create a post process volume so with this post process volume let's go down to the bottom and select this called infinite extent to affect the whole level and then up here let's go to bloom and set the intensity to zero let's go ahead to exposure and set the maximum and minimum 2 2 like this and then to the image effects set the vignette to zero as well now down here in the color grading click on the one called highlights and set the highlights minimum to 1 and then go to miscellaneous and set the tone curve amount to zero alright so these are the general settings that apply for all games now it depends on which tiles you have selected like the next part that we are going to do but if you select this the same tiles I can show you my settings however you have to do your own settings depending on your own tiles for your game but I will show you here what we do and how you can go about it so right now you can see we are in the lit mode if you go to the unlit mode this is actually what the true pixel art color looks like so if you click on the lit mode and you can do this by clicking alt or and ALT 3. so clicking on alt 4 to go to delete mode you can see it's very dark compared to the unlit mode so the lit mode is very dark and we need what you need to do is the lit mode needs to be the same as the unlit mode we have to have it looking like this so going back to the lit mode now we can click on this post process and to give it more light we can go to color grading go to Global and inside of here we have something called gain so click on this gain and I'm going to add more gain to it until I'm satisfied okay as I said this part depends on which tile set you have selected now for this one here in the color grading in the global the saturation of set to 1.01 contrast 1.1 this is my gamma this is my gain and then I've set my shadow saturation the contrast the gamma and the gain as well so you have to work with these sliders depending on which tiles you have and then you can switch between the lit mode and the unlit mode and if you think they are close enough then we are ready to go I think these are close enough I could spend two hours on this three hours maybe of my day if this was a serious project and I would spend a lot of time just to adjusting the colors to be correct alright so now we are ready to create the player we're going to add decoration a little bit later on so let's save everything for now let's now go to the content folder right click make a new folder called Blueprints and let's go in here let's right click go to blueprint class and instead of selecting a character here let's click on all classes and here search for paper and you can see this one paper character now for this one let's call it BP player so let's go in here in the player here if you click on the Sprite now we have to add the player but before we can do this let's extract it and make flip books so let's go to textures and this is where we save the player this one character blue so you can see it comes in a texture like this so what we can do is right click go to Sprite actions and then extract Sprites now again you can either go to the website and see what the artist has done here like the sizes between these tiles but what we can do is click here grid and then you have to specify the cell width and height so it fits every single character here so you have to specify them here I believe it was 56 by 56 for this character so you can see each tile fits with one of these characters and now what we can do is click on extract and all of these Sprites will be available let's create flipbook so these are just still images this is what a Sprite is it's just an image image and if you drag it here to the world and you place it here for example at the Y 0 you can see we have the character here but it's just a still image so we need to animate it and this is what a flipbook is so selecting this idle here from this Frame to this Frame and you can right click and then click create flipbook and let's call this one FP for flipbook and I'm going to call it idle I can see it's animated and I'm going to drag it into the assets folder so out of here let's do the same thing for the running so I'm going to find the running starts from here and ends at around I believe here so we can right click this and create flipbook call it FB run and let's get it out of here as well to the assets folder and the last thing I want the jumping as well so selecting it from this one and then it ends at this one here I believe so what we can do is we can right click the book and we can call this one jump and again move it to the SS folder and inside of here now you can double click on one of the flip books and you have to set how fast you want to run this flipbook now depending on what your artists again have done for example you can see if you set the frames per second to 10 it gets a lot slower if you set it to 50 it runs it runs a lot faster so I'm going to set it to 12 do it for the same thing for the other flipbooks click on it set it to 12 frames per second and this one 12 frames per second okay so now let's go back to the player let's click on Sprite and now we can select our idle flipbook now we have it here okay so what we can do now is click on this capsule component we don't really need it to be that large so I'm I'm going to reduce the size of it so 12 by 12 and then let's move our character up it's a bit too much in the air what you can do is you can go to the right view if you want to zoom in and just have your layer here at around the center of it just like this and maybe also move it this way let us compile go back to the perspective view now let us add a camera so clicking on the capsule component or just the player up here click the ADD and search for a spring arm now the spring arm is just a holder for the camera so click on the spring arm again click here search for camera and we have it here now let's click on the spring arm and let's rotate it by clicking e on the keyboard so or you can select one of the tools up here so this is the rotate tool and I'll click and drag and now we have the camera looking on the character like this which is the correct correct Angle now for this camera since we are creating pixel art instead of perspective we have to select orthographic let us close it down and let's see what happens so before we can spawn the character inside of here let's go to the blueprints folder right click make a blueprint class and make a game mode let's call it BP game mode and the second thing we need to do is create a blueprint class go to play a controller name it BP player controller okay so in the game mode we have to set the default player controller to BP player controller the one we just made and the second one here for the default Pawn we're going to change it to BP player let's compile let's close it down and also here in the world settings if you don't have this tab you can always go up here in window and open the world settings so inside of here for the game mode override you have to select the game mode you just made and now inside of this level we have to click up here and go to basic and have this player start so we can actually spawn somewhere in the world now click on details so for this player start the Y needs to be zero and if you click on G you can see the icons here so this is where the player starts and I just make this smaller to visually see it better so here in the scale I'm going to make it 0.1 or 0.2 and just have it up here okay so now let's click on play and now you can see the player spawns but we actually fall through the ground we can you can see we're all the way down up here so what we need to do is add Collision before the player can walk on the tiles so the way we do this is we can go back to assets and here in the tile set so clicking on the tile set now we have some Collision data here you can click on one of the tiles you want Collision on and then you can click add box now you can see nothing happened here this is because you have to click on this a lighting tile so you can see where the Collision has been applied now you have to set Collision for all of the tiles you don't want the player to go through so this one for example this one this one here this one here and I also use this for the wall so I'm also going to add collisions on these here and I believe I also used these ones down here so whatever you have used whatever you you want Collision on and don't want the players to fall through you have to set Collision for that so this one I believe as well and this one as well you can always add more Collision if we have used more tiles but realistically you also want to add a collision on all of those tiles but we haven't really used them right now so you can go through them on your own tiles okay so now before it works you have to click on refresh map else it will not work so refresh the maps you've already made click on Save now let's close it down and click on play and now you can see our player is standing on the ground If your player is floating you have to go to the blueprints player and in the viewport and you have to adjust this Collision capsule here you have to adjust it if your player is floating but now you can see the player is on the ground before we do anything I'll show you how to add decoration to your level so go to the operation and inside of here remember again you have to click on apply to the paper 2D settings if you haven't done so now before we can add them to the level you can see we can't really drag it into here the thing you need to do is you need to right click spread actions and create Sprite remember Sprite is just a still image we can use to build a level in pixel art I'm just going to make the camera speed a little bit slower here so now you can drag this image into your level set the Y to zero if you set it to zero it's in front of the tile like this if you set it to -1 in the Y then it's behind the tile just like that and you can try to put it anywhere in your level you can click on play and you can see what it looks like you can even take those rocks here right click create Sprites and then drag this into the level set the Y to -1 and then drag it here maybe this one instead of -1 you can have it to one if you set it to one then the player will actually run in front of it okay so you can go ahead and add the creation as you wish you can add grass you can add all of these items you can even add the this shop again this is an animated shop here so what you can do again just like I told you before you can right click spread action extract Sprites and then make a flip book which you just can place inside of here alright so now I've went ahead and just added some decoration items so this is what my level currently looks like so go ahead and add your decoration if you want to and let's move on to creating the movement so I'm going to go back to the player and before we actually do this let's right click here go to inputs and create this input mapping context and I'm going to call it IMC default now let's right click again and go to input and add an input action so in the input action I'm going to call this one movement and here let's click on this mapping context go to the mapping and then add the movement so for this movement here we only need in the value type for the input action this value tab we need to change it to an axis 1D now if if it was a 3D game we change it to 2D but since it's a platform or a pixel art game let's change it to 1D let's go to the mapping contest and inside of here I'm going to click on this keyboard icon and click on D to move to the right so this is my movie to the right button now I can click on the plus up here again and click on this keyboard icon click on a to assign it here and this is how I move to the left and here in the in the modifiers I'm going to click on the plus and say negate and this just means it goes to the negative value of the D which means this one's moved to the right and and this one moves to the left because I just invert the movement now let's save everything let's go to the player and inside of here let's go to the event graph where we can write the code I'm going to delete this but here in the begin play now we can right click here and say get controller so we're trying to get the controller for this this character here and now we need to specify what controller are we talking about the controller we're talking about is simply this player controller we made so this is called casting so I'm saying cast to and then we need to write the name of the controller AP layer controller now let's connect it and from here let's drag and say enhanced input so this subsystem here and now we can say add mapping context now this the mapping context is simply this one that we just made so we're going to add it here so it works on our character so selecting it here and now it works so let's add the movement let's now right click and say I a movement and the Ia movement this event here is simply the input action we actually made down here remember we made it by right clicking going to input and creating this input action here so creating this event now we can add some movement to the player the movement we can simply right click and say get actor forward Vector so we're getting the forward direction for this player and we can say add movement input very very simple so adding the movement input here and now then this action value have to be connected with this scale value now you can click on play and see what happens so if you click on play and now you can walk to the right you can see this working correct and if you walk to the left this is working correct as well so walking to the left is correct because remember we set the modifier in the mapping context which was negates which just inverts the right movement so now we can move to the right and left and I can see I have Collision problems with some of my assets so I'm going to select all of the things in my level that I don't want to have Collision on and then I'm going to say no here no Collision again and don't generate any overlap events if I click on play everything is working correctly again all right so let's actually add animation to the character so let's go back to the player and here for the movement let's take this Sprite and you can drag it into here and from here you can say set lib group so we want to change the flipbook when we are moving and what we want to change it to is the Run flipbook so this one here now we need to change it back again you can see here if I keep running I need to change it back again so I need to be idle when I stop moving so what I need to do is here in the complete again copy this down here and say idle so you can see here if I run I run and if I stop I idle now we need to set the correct direction for the player so what we need to do is check if this action value is above zero or not because if we run to the left it's zero or it's minus actually and if we run to the right it's positive so here we can say is this one a greater than zero and what we can do is we can drag from here and right branch and select this Branch now we're checking is this value above or below zero if it's above zero we can take this right here and we can simply just set the rotation so set World rotation for this Sprite so we're setting the rotation to 0 0.00 which basically is what it is right now and here if it's below zero we want to turn the character you can see here if you click on anything in the world and you select the rotation tool this blue down here this is the z-axis so you need to turn the player 90 or minus 180 degrees in the z-axis so I'm going to take it minus 180 degrees we're going to rotate the Sprite if we're running the other way so let's now click on play and see what happens if we run to the right run to the left you can now see everything is looking correct you can see sometimes when I run there is a small Jitter in the pixel art and if your pixel art is jittering as well a very very good practice is to go to the assets go to the tile set right click condition tile sheet texture and this adds a buffer around your tiles so they don't Jitter so do this for all of the tile sets here this one conditioned tile sheet texture this one here as well and the last one condition child sheet texture now they don't Jitter we have added a buffer between all of the tiles and now let's add a jump for the player so let's go back to blueprints right click input and create another input action I'm going to call this one jump now let's go to the mapping context and inside of the mapping context let's add the mapping select the jump here and I'm going to click on the keyboard here and click on space on my keyboard to assign the spacebar and in the triggers I'm going to add this one called rest because I don't want my code to run all the time I only want to run it once when I click on spacebar and it jumps now let's go back to the player and down here let's right click and say I a jump and go up here and select this event up here very very simple you can drag from here and say jump and the player will automatically jump now for the Sprite we also need to set this right so let's take this right here and set the flipbook and you can say set flipbook and you can set it to this jumping one here connected here and I don't want the jumping animation to Loop so what I want to do here in the Sprite I actually want to drag from here and say set looping so I don't want the jump animation to Loop like the running so I'm going to disable the looping for now and then I'm going to play this flipbook and then I'm going to right click here and say get velocity now here with this velocity I can drag from here and say break or if you don't want to break the vector you can also take this and right click and say split struct pin that's the same thing but I usually just drag from here and write break Vector so you can see the X Y and Z from the vector because right now we need the Z value what I'm trying to do is when the player is jumping here the Z value will change you can see here if you click on one of the items this blue arrow is the is the z-axis so if the player is jumping the z-axis for the player is changing so we're trying to get the velocity for the z-axis and when the player is not jumping anymore I want to Loop it again and play the idle flipbook so drag from here and say is this equal to zero which means the player is standing on the ground and not jumping anymore right from here and write a branch and let's connect it so if this is true you can go ahead and take from here here and say set looping to be true again now for the looping to work you can't just disable it and enable it like this you actually also have to drag from here and say play now remember to use display as well else it will not be working and if you want to be more structured double click on this line here go down and just make some pins here make a nice line disconnect it here connect it here instead and try to be more organized with the code so it doesn't look messy so I'm just going to organize it a little bit and now over here we can drag from here and say set flip book now we're going to set the flipbook back to idle just like this alright so over here for the velocity it's actually going to be zero right when we jump so it's actually going to be true right before we jump so I need to give it a small delay I'm going to write delay and just delay it by 0.1 second just a very very small DeLay So it gets the chance to jump before it calculates and then I'm going to create a Boolean called jump so that we can use up here because we don't want to run this code if we are jumping so let me go ahead and create a Boolean called is jumping let's take this Boolean drag it out here and set it so over here when we click on jump we are going to jump and when we go over here at the end we're going to set this jump to false so we can jump again so over here I don't want to spam jump I don't want to jump all the time so I'm going to drag this Boolean write a branch and just make sure I'm not already in the jumps before I jump again so over here if you are jumping you cannot do anything however if you're not jumping then you can go ahead and jump so what we can do up here in this code we can take this is jumping and I'm just going to push this code a little bit here to the right and what we can do with this is again write a branch if we are jumping thing I don't want to do anything however if we are not jumping I want to run normally like this and the same thing down here copy paste it when it's complete if you are not jumping you want to set it to idle if you are jumping don't do anything all right so before I forget down here we are checking the velocity for the set value if it's zero or not so if it's not zero here means the player is in the air and we don't want to stop the code here we need to recheck if the player is landing on the ground and when the player lands we want to run this code so here if the player is in the air meaning this is not equal to zero we want to delay the code here by maybe 0.1 something very small and then we when it's complete we want to rerun the code we need to continuously check if the player has landed on the ground else the the code will stop here and not work so let's uh see if we have any bugs let's go ahead and click on play Let's Run and Jump and everything's looking fine and if you want to zoom out with the camera you can go back to the player you can click on the camera and you have something called ortho width so you can set it to something like 700 for example and you can click on play and you can see the camera is further away than before alright so that was it for this tutorial I hope you've enjoyed it I've enjoyed it making it with you and like And subscribe if you've enjoyed the content and I'll make sure to release more and more tutorials to help you out with game development also make sure to check out pixelhelmet.com if you need any game development courses there are free courses as well and I'll see you in the next tutorial

Channel: Pixel Helmet

Views: 194,198

Keywords: unreal engine 5 2d game, unreal engine 2d platformer tutorial, unreal engine 2d, paperzd, unreal engine 5 2d, unreal engine platformer, indiedev, unreal engine 5 2d tutorial, platformer 2d game unreal engine 5, unreal engine paperzd, paperzd tutorial, unreal engine pixel game, unreal engine beat em up, unreal engine platformer game, unreal engine 5 paper 2d, paper zd unreal, unreal engine paper zd, paperzd unreal, unreal engine 2d side scroller, unreal engine paper 2d tutorial

Id: tVH0VTY-c8o

Length: 36min 9sec (2169 seconds)

Published: Tue Feb 28 2023