Part 1 - Project Setup | 2D Point and Click Adventure Game in Unreal

hey what's up it is justin with lesser dog tutorials and welcome to the beginning of the tutorial series on creating an old school point-and-click adventure game in the style of lucasarts um in the 90s and and so forth so what we'll be doing is creating a new blank project and select c plus plus instead of blueprints but don't be too scared because we're not really going to be using too much c plus we just need it for only one small thing and then um you don't need starter content so make sure that's off name it whatever you want and hit create project so to kick things off we'll make a root folder that we'll just call point and click and in that we'll make all of our various other folders for things that we need like textures and blueprints etc i also like to show the sources panel on the left and then the view options i just hide engine content so that all we can really see is kind of the folders that we make and then the c plus classes which we'll use a little later so in addition to the textures and blueprints folders i also like to make a levels folder and then one for meshes and materials and footbooks and make sure you download the zip file in the description it has the images we're going to use and you can drag those into the textures folder and right click them and apply paper 2d settings and then select each image except for the temp guy and create a sprite from those and then the temp guy extract sprites and just do the auto now we're going to make a folder inside the textures folder that we're just going to call environment and we'll put all the images that aren't temp guy in there and then we will select the first temp guy sprite and we'll make a flip book that we'll call temp guy idle up and then we'll take number six create a flip book from that we'll call temp guy idle down and then looks like 12 will be idle right idle side and then the animations will be from one to five is a foot book we'll call walk up and we can open that up we have to do a couple things here and what i like for this what i like to do if you cycle through it you'll see that it kind of plays but it doesn't go back to the original frame so if you duplicate four it'll go back down one and then if you duplicate three and drag it to the end it will create a better animation so it'll be one two three four five four three and then we'll change the frames per second to ten and then for walking down it's 7 through 11. and we'll call that walk down and then we'll have to open that up and do the same thing so it will be seven eight nine ten eleven ten nine and you can just drag those to the end and then set the frames per second to 10. now all that's left is the walk side animation which should be 13 through 17. name that walk side and then we do the exact same thing we did with the other two so open it up and we're gonna do the sprites will be 13 14 15 16 17 16 15. that's a little bit better this isn't final you can change it however you want but this is just what i'm doing and then i'm going to select all the flip books we made and move them into the flipbooks folder and then in the footbooks folder we'll just create a folder called player and just move those in there keep things a little organized great now create a new level that's completely empty and then save it as whatever you want to name it but we're going to call this one tower exterior and we'll save that in the levels folder now head to your environment folder in the textures and drag out the background sprite and then set location to zero across the board and do a negative 90 degree rotation on the x-axis and you can switch it to the top and change it to lit and then over on the side in the collision area change it to no collision now head over to your blueprints folder and create a new blueprint class select actor and we're going to call it vp underscore adventure cam and this is just going to be the camera system that follows the player on any given level so open it up and then select the default scene root object and just make sure that that is not visible and hidden in game and then we'll want to add a camera component and then add a box collision and we'll call that camera confines and then select the camera and we're going to spin it negative 90 degrees on the z axis and pull it out 200 on the y it's like the camera confines and make sure that it's under the scene root not the camera so in the construction script we're going to use this area to define the extent of the camera confines so you can drag out the camera confines now if you want and do a get but we want to add a variable that is a vector and we want to make it public so you can drag it out and then look for a node called set box extent hook that up and make sure the camera confines as the target and the extent variable we made is the inbox extent and then set the default value for the confines extent to 160 10 and then 72.5 or z and it should look like this which it's a kind of a more rectangular look than typical but that's because what we're doing is we're matching the old style that you would see in a lucasarts game like monkey island 2 where the visual area at the top is a little more rectangular at the bottom it's the ui that you use to interact with the world so in the event graph for the camera we can just delete the middle overlap node and you can add a variable called delta seconds that's a float and set it right after event tick i'm not really sure if we'll use this but we could later so it might be best just to make one and then create a new macro called get camera confines and we're going to use this macro to just kind of figure out where the edges of the camera are going to be and so i like to make an in and out exact pin for each and then drag in the camera confines and then we're going to get the component bounds and then add a vector plus vector node you can split the right side so that we get the floats and then create a vector minus vector node and split the right side again and we actually did this same sort of function in the metroidvania camera system tutorial so we're going to kind of copy that almost exactly and so you just want the vector plus vector at the top and the vector minus vector on the bottom and real quick i'm just going to go over to the widget reflector and increase the size so it's a little easier to see but you want the vector plus vector at the top so you're adding the origin and the extent at the bottom you're subtracting the extent from the origin and then dragging the camera and from the camera we're going to get the ortho with then search for the float divided by float node and duplicate that and set the lower number on the top one to two and then the lower number on the bottom one to 3.5 and then link up the ortho width to the top number on each and then bring in a float minus float and a float plus float node and then duplicate both of those ef4 and then just kind of link everything up like i'm doing right now so now we need to set some variables with the output of these addition and subtraction notes so create four variables and call them confine max x can find min x can find max y and confine min y and all of these should be floats you know actually let's go to the camera and kind of change its orientation so that we are on the x and y axis so set the y rotation to negative 90 set the z rotation to 0 set the y location to 0 and then the z location to 200 and then we're going to change how the camera confines operates in the construction script by setting the confines extend default value instead of 10 on the y we'll do 72.5 on the y and 10 on the z and that should change everything to be top down so now we are working on the x and y axis so back in the get camera confines function let's make sure that the y is set up and not the z for these floats and then we will set each of these new floats accordingly and just match it up with how i'm doing it here and then we just link it up to the in and out and we're done all that's left is to go to the event graph and drag it in right after event begin play and then at the end we're going to just add a delay for 0 seconds and then we will say that this next part will be get the player and then on event tick we can just add a reroute note here add a comment and just say that this one will be the follow player functions that we need later now if we drag the adventure cam into the scene we will see that it's actually turned 90 degrees so let's change the z rotation to be negative 90. then change the projection mode to orthographic set the width to 320 and check the constraint aspect ratio box so that we can set the aspect ratio to 2.21 then save that and it should fill the camera's view a little bit better if you go to project settings we can search for exposure and then also turn off the auto exposure makes things look a little better now let's save it and what we're going to do is add a c plus plus class so in file there's a new c plus class drop down menu here select actor and hit next and i'm going to call this split screen manager and this will help us split the screen up so that the bottom half is ui but the top half is the game itself so now that that's loaded up you could end up getting some errors like i have here and the way to solve this is to head over to the unreal project go to file refresh visual studio project now that that is fixed we're going to just type in a few things in the split screen manager.cpp file so in the begin play under super begin play type ugame viewport client with an asterisk viewport equals get world and then an arrow operator after parentheses get game viewport parentheses and semicolon and then the next line will be f split screen data we'll call it screen layout and then we will type auto screen 1 equals f per player split screen data and then do in the parentheses do one comma one comma zero comma zero and what this data is is these numbers tell the screen where it should be and how wide and tall it needs to be so the one and the one that's the full width and full height and zero zero is the top left of the screen so what we want is we want the height to be different than one we want it to be lower than one and i've already done the calculations and what it needs to be for our purposes is 0.725 and and then you want to put an f after that for float and that's going to be the second number and then under that we're going to call the screen layout from earlier we're going to do dot player data dot add and we're going to add screen one what we just assigned and then the last part that you need to do is view port with the arrow operator set disable split screen override to true and then do the viewport again with another operator arrow operator and then split screen info with brackets and inside the brackets to e-split screen type none and then that will equal screen layout and that's all that you need to do and that should split the screen in the in the way that we need it to be split back over in the project um the first thing you want to do is compile so that the c plus code is will be registered and then in the adventure cam we need to set the camera that we put in as the main camera so right click and get the player controller and from the return value we're going to get the set view target with blend node and we'll just put that in between event begin play and get camera confines and then we still need to say the new view target and we'll set that to self and then you can compile that and save now the only thing that's left before we hit play is that you have to open up the c post plus classes and drag in the split screen manager into the scene and then if you hit play everything should be split correctly so the game views at the top at the bottom of the ui and right now there's a black circle but that's just because we don't have our player in there yet so let's rectify that so head over to the blueprints folder and we'll make a new blueprint and we'll do the drop down in all classes and search for paper character and select that and then we'll rename this just to something like bp underscore adventure care so we can open that up and the first thing we should do is set it to top view and then switch it to lit and then the capsule component i like to change it to four height and four radius and then in the sprite component we'll just assign the idle down sprite and then switch the rotation on the x-axis to negative 90 and then move it on the y-axis negative 20. cool and then in the event graph we can delete the actor begin overlap and then we'll make a new variable that will be called target player location switch the type to a vector and we can set it in the event begin play but we will set it to the capsule components world location now that that is set initially we can add a left mouse button event so that when we press the left mouse button it will set a new target player location so if we split the struct pin we can get the player controller and then convert the mouse location to world space and then we'll split the world location pin because all we need from this is the x and y locations and so if from each if we do floor that will snap it to the grid so all the pixels will be aligned and if you're not doing a pixel or game you don't need to do this but it will convert it automatically if we drag the pins to the new target player locations then we need to figure out the z location which is just the capsule components get world location split the struct pin and then use the return value z now in the tick what we're going to do is drag out and do a simple move to location and the target player location is the goal and in the controller field we just get the player controller great and that should be all we need to do just for a simple navigation on the map so now go to the blueprints and add a new gamemode blueprint and we'll call this adventure mode so in the default pawn class we're going to switch it to our adventure character and then we'll make another blueprint and this one will actually be a player controller and we'll call that bp adventure controller if we open that up we can select show mouse cursor enable mouse over events and then switch the default mouse cursor to crosshairs and then back in the adventure mode we'll set the controller class to that adventure controller compile and save and then in this in the project settings search for mode and we'll switch the game mode to our adventure mode next i think i want to remove that camera or at least hide it so in the adventure cam select the camera and we'll set the scale to zero and it'll still be there it'll just be hidden from view next we want to make sure that the snap size is set to 1 and then go to modes at the top and select brush editing and over here you'll see the pen tool and we want that so select the auto extrude i like to deselect the convex polygons and the extrude depth i change it from 256 to like four and if you hover over the scene and you just hit space bar you'll start creating kind of a shape and so i'll just draw around where i think it would be a good spot for the character to walk so this will be the navigation area and so i'll just kind of do a rough outline and then hit enter to finalize it and if you switch to the side you can align it so that the the brush that you created is underneath the red line there which is the background so it will still have the path over the image but you won't see the brush and then we want to drag in a volume called nav mesh bounds volume and this needs to encompass the brush that we just created so kind of a mess with the size make sure if you switch to right that it actually encompasses the brush because this will generate the actual nav mesh and then go up to build and click that little arrow and then in this menu select build paths now there's just one thing we need to do if you if you select the recast nav mesh in the hierarchy up there you'll see that this was created when we when we brought in the navmesh volume and so these generation stats need to be tweaked but we can do it in the settings which will make it a default across the board so we don't need to edit the one in the hierarchy we'll just go into the navigation mesh area in the settings and then we'll set the cell size to 1 the cell height to 1 and the agent radius also to 1. though it will be reset sometimes it will reset to 35 or so but just make sure that you're aware that that need might need to be reset back down to one like for instance you can see that that's set to 35 now you just have to set it to one and then if you um build the navigation mesh and hit p you'll see that it is lit up green so that should be where the player will walk and if you drag in the player start and you can you can resize it to be a little bit smaller i think a good scale size for this would be 0.1 for each x y and z it makes it small enough that it's not too cumbersome and then i also like this to change the editor billboard scale down a little bit and if you just hover it above the background image that should be good and then if you hit play you'll see the characters in there and it is moving around the navigation i think that's going to do it for this episode so thank you very much for watching please like if you like it and subscribe i'll see you next time

Channel: LesserDog Tutorials

Views: 19,417

Keywords:

Id: sEy3c5JcLys

Length: 24min 40sec (1480 seconds)

Published: Sun Sep 26 2021