Making a TOP DOWN 2d GAME in UE 5.1 | UNREAL ENGINE 5.1 | TUTORIAL | PT 1

in this video we're going to go over how to make a top-down game in ue5 we are using the paper ZD plugin you can find it on the Epic Marketplace starting off we're creating a new project go to the games tab start with either blueprint or C plus plus doesn't really matter just depends on your project if you plan on using scripts in your project I'm going to choose C plus plus next Target platform desktop quality preset scalable that's just what I choose no starter content we won't need that for this project the first thing we could do here is create a new level right click the content browser then click level name the level whatever you like I named mine playground organization is important so I'm just creating a folder on where Sprites will go let's go to edit project settings in the search bar go ahead and search anti-aliasing for pixel art make sure you have FXAA on next search for auto exposure make sure that is unchecked a quick tip you can change the folder color by right-clicking the folder set color I like to do this so I can color code my folders and find things faster really quick I'm going to create another folder for the blueprints and I'm going to just make it a nice blue to match the color of the blueprints now we're going to import Sprites go ahead and drag and drop or from wherever folder whatever Sprites you're gonna use for your main character right click spray actions apply paper 2D now you're going to right click it again spray actions and extract Sprites once you get this box to appear you're going to click on Sprite extract method change that from Auto to grid what that's going to do is it's going to prevent any miscalculated boxes from your spray if you could see here some are connected some are separated so you just want it all to be uniform so the animations are smooth once you have done that make the cell width and height the size of your Sprites you can also divide by how many frames there are so if you don't know exactly how big and wide the Sprite is what you can do is look at a Sprite or how many frames so you can see there's four frames per animation so you just divide the width by four and the length by four so it's four by four and then you have a perfect measured out grid for you in this specific case my width is 16 and my height is 32 and if you're using this that's what you'll use as well after that just hit extract now you see you have a bunch of Sprites ready to go and now at this point we'll be making the flip books to start our animation process so first we're going to create our idle animation all you'll do is right click create flipbook once you create flipbook you'll just name it to FB idle down since he's facing down in the specific case there's only one Sprite for the idle animation in other cases you would just highlight and then create a flipbook from that then you're going to repeat the process with right left and up for him facing upwards one thing to do here is highlight all of the Sprites right click asset actions bulk edit via property Matrix select all with shift left click type in pivot and under Pivot Point you're going to change it to bottom center since it's going to be where your feet are go ahead and save and close and now if you double click a Sprite you can see that arrows are at the feet so that's perfect for what we need for the animation setup now we're going to create the walking animation so you're going to select one through four highlight all of them at once and then do create flipbook once you name it we're going to call it FB player walk down since we're walking down once you do that go ahead and open it up you see that he's going really fast and so now we're going to change the frames per second when deciding your frames per second it's really up to you and your Sprite and how you want it to look but for the specific Sprite and if you're using it you can use six frames per second it's a perfect speed one thing we could do real quick is highlight all of the flip books right click asset actions edit via property Matrix and what we could do for all the idle animations is set the frames per second to one since it's not technically playing any frames it's just nice to a slow animation in case you want to put something in there later now go ahead and repeat the process for the rest of the flipbooks for idle left right and up and you can do the same thing where if you highlight all of them right click asset actions edit via property Matrix and edit them all to six frames per second or whatever frames per second you are using for your project now we're going to create directionality for the character inside the blueprints folder we're going to create another folder called player go ahead and open it up at this point we're going to activate the plugin so go ahead and go to edits plugins and then type in paper ZD and then you'll see paper ZD come up make sure it's checked and then restart now once it restarts you can double check by opening up the plugins again typing in paper ZT now you can see it's activated to set up your default map go ahead and go into project settings maps and modes or you could just type in defaults and then it'll pop up with default map and you're going to go ahead and change it to the map we created now go ahead and open up the level go ahead and head into your blueprints folder right click content browser paper ZD create animation source go ahead and name it as underscore player directionality go ahead and open that up add new new animation sequence player idle double click player idle make sure you check multi-directional sequence and then we have four directions click the animation graph and have it face up plug in the up and then plug in left right and down now we're going to create the walk animations go ahead and push add new new animation sequence name it player walk make sure you double click it turn directionality on type in four for four directions then do the same exact thing where you plug in each animation corresponding with the direction of the animations data if you shift and click you can preview the animations the reason why one of them looks a little bit more faded out than the rest is because I changed the material I will show you how to do that at the end of the video it's just an extra cosmetic thing it's not super important now we're going to start importing the art to create the love as well as go over tile maps and how to create those all you need to do here is just drag and drop same way you drag and dropped the character 2D bright sheet you do the same with the tile map I included one in this video or you can import your own it's up to you once they are imported go ahead and right click Sprite actions create tile set open that up and as you can see on the right the text size or the tile size is 32 by 32 that's perfect that's the dimensions of this tile but for you if you have 16 by 16 that's more common than 32 by 32 you just set that to the correct Dimensions that fit your artwork so now right click Sprite actions create tile set select a tile add box repeat this process for the rest of the tiles if you have objects with custom polygons that you want to set up all you do is press add polygon then you can draw wherever you want and then you push enter when you're done back in the content browser create the tile map so you right click create tile map go ahead and open it up here you can draw so all you do is click the tile and you can draw the controls B is brush Z is to rotate e is to erase F to fill X to flip you could drag to select multiple Sprites at once and then you can paint it however you like you can also create a new layer by pressing the plus button and basically how that will work if you have objects that you want like a table or a building that you don't want the player to collide with you can you can create that second layer and here I am shortening down the collisions a bit so you do is go into tile set and in the tile editor you can just lower it down by using the arrows back in the tile map you can just place down those objects and it'll have that Custom Collision already ready to go once you're done go ahead and drag it into the editor I had to make a 90 degrees rotation on x scale can be used I like to scale it up by four that's just preference you can keep it at one but it's just easier later on when you're setting up the player now go to content blueprint player right click blueprint class in the drop down menu in all classes type in paper ZD and it's the paper ZD character double click that go ahead and name it BP player go ahead and open that up first thing we could do Sprite component set that for the main Sprite as you can see here if you don't scale the map the capsule size is a lot bigger than the actual map and you can scale the capsule which is preference wise I'd rather just scale everything else up by four it's really up to you go ahead and click your Sprite rotate it on the x-axis by 270 degrees you can do a little bit of an angle 277 degrees if you plan on having it overlap a bit better with flat objects this value can be changed however works with your character next up we're going to create the spring arm make sure that the spring arm is selected then we're going to add a camera and make sure it's a child to the spring arm rotate the camera how I do here create blueprint class we're going to go to Game Mode base you can name it whatever you like but this is the main game mode for your game go ahead and open it up go to default Pawn class and make sure it's the same name as your BP player add click basic and then players start over on the right you can go to world settings game mode override and GM Tut or whatever you named your game mode to create a false orthographic look change the target arm length to 5000 and the camera field of view to 20. orthographic cameras kind of limit you on shadows and certain materials so having it on perspective and giving it a false look of orthographic is worth it all depends on your project as well but this is my method at this moment I realized that the map was upside down the player so I clicked the map and then I rotated it 180 degrees one thing you could do here if you want Shadows you go to the you click the tile map and you go to materials and then make sure you do masked lit Sprite material then it gets dark and all you do is just add a light here I added the directional light you can change the intensity the color this also works for Point light spotlights and whatever other type of Lights you need now we will create the player movement right click inputs input mapping context name it to IMC player here this is where we will create our mappings for our movement I'm going to do the standard wasd first let's go back to our content browser right click inputs input action call it I a move this is going to be your movement input action you're going to go into your IA move and you're going to make sure your value type is Vector 2D open up your IMC player under the drop down put in your IA move if you press the keyboard you can just press W to set the keybind so w and I'm just going to add three more ASD a s d for the W we're going to add a modifier and it's going to be Swizzle input axis value the a at a modifier it's going to be negate modifier the s add a modifier it's going to be Swizzle and put axis and negate and for D we do not need a modifier now we're going to add these input actions into the actual BP players go ahead and open up your BP player open up the event graph I a move add movement input Ctrl D to duplicate and if something is not straightened up all you do is highlight over the whole thing and then press q and Auto fixes it and makes it look clean on the left hand side we're going to create a variable so push the plus sign next to variables call it is holding move then what you can do from here make sure it's a Boolean you can drag it out set connect it to started make sure it's true duplicate it with Ctrl d connect it with completed and make sure it's false then you can write click the action value split struct pin connect the X with X on the first movement input then make sure to change your world's Direction by 1 on x next go ahead and connect your y to your y on the next add movement input and set the world direction to negative one on the Y now we're going to create a new variable so go ahead and push the plus sign name it directionality click on the Boolean and turn it into a vector 2D drag and drop set and then connect that to the movement input and directionality split struct pin go back and connect the X to the x and the Y to the Y I just like to clean up the code just a little bit now we go to event begin play drag it out cast to player controller then drag from the object get controller after the cast add a mapping context from the as player controller type in enhanced input local player subsystem mapping context IMC player now you can move congrats if you hover over code and press C you can create a comment you can change the color make it look all pretty for organization now that you can move around let's get Collision started go ahead and open up your tile map again here I painted just a little bit more here I'm actually going to go back to the player controller and shorten down the radius of the of the capsule and move the player up on the tile map to correctly detect the collisions I had to change the separation per layer was negative 30. and if you have an issue where if you collide with something and the camera Zooms in really far go to player BP player type in col and uncheck do Collision test and that should fix your problem here I made the capsule 16 by 16. go to player go to directionality right click paper ZD nmbp go ahead and search your player directionality and then make sure that's the parent ABP player go ahead and open it up go to the NM graph set directionality really quick let's go over to the BP player go to animation component ABP player on the paper ZD instance class then hop back over to your animation component or your ABP player from there create a variable call it BP player click on the drop down BP player search for that and then grab the object reference from BP player drag it out and get BP player drag from BP player set directionality get directionality plug it into inputs then from the set directionality drag out select animation by bull then grab BP player again duplicate it is holding move drag that into select value set directionality then drag out from the false animation play idle so when you're not moving idle is being played then from true play walk then go to the event graph of your ABP player on event init to cast to BP player drag off of that get owning actor from BP player drag it out and set it and there you go you have movement you have done it this is part one of the tutorial series I'm gonna make let me know how you think this is the first tutorial video I've ever made um yeah let me know thank you for watching have a great day

Channel: Snowshino

Views: 43,146

Keywords:

Id: CMorzoSv7xI

Length: 22min 36sec (1356 seconds)

Published: Fri Mar 24 2023