Blueprint Creating a 2D Side-Scroller | 01 | Live Training | Unreal Engine

everybody Allen noon here and welcome to the stream today we're going to be looking at paper 2d and depending on how far we get maybe some UMG but what we're going to do today is build a 2d side-scrolling game now being a retro game fan we're going to go for that 8-bit style a real chunky blocky graphics so I'll show you how to set up your project and get some artwork imported and we'll be on our way yeah speaking of artwork to start with let's go ahead over to Unreal Engine comm if you go to the community tab and then the forum's if you click down under events and you should see here is the forum thread for this project here creating the 2d project scroll down a little bit you'll see the source zip file go ahead and download that and there's a handful of textures in there that we're going to need for today so download that put it somewhere accessible real quick and then the meantime we'll go ahead and launch the engine so we're going to do something a little bit different today we're going to create this thing right from scratch from the very beginning as you see opening the editor and creating our project hierarchy importing all the content and step-by-step we're going to go ahead and build this thing out and like I said short stream today only an hour so we'll see how far we get but to save a little time I'm going to start with a template I'm going to start with a 2d side-scroller blueprint template and let's go ahead and figure out where to put this I've got my project folder set up here and you can name it whatever you want I'm just going to call mine demo and we don't need any starter content so you can go ahead and turn that to no content alright so some of my favorite games from back in the day Castlevania contra Metroid Megaman so we're going to be building something kind of in that style a run and jump shoot platformer type of game alrighty okay here we go so first things first I'm going to go ahead and play in a new editor window so this is the template if you're not familiar with it we have some very simple controls for running left and right and jumping we don't have a jump animation so we're going to fix that up and let's go into the blueprints folder and we'll take a look at this character so if you open up 2d side-scroller character let's go over to the viewport tab here and we can take a look at our different components so we have our capsule component that's that little pill there that's what we use to interact with the world that's going to do our collision we have an arrow component just to kind of tell us which way we're facing and we have our sprite component here you can see we have our animated sprite yes that's a little 2d version of our template dude and then we have a camera attached to a boom you see this red line this is a spring arm and there's the camera hanging off the end of it there and then we have the character movement component and this is a component here that basically handles all of our movement keeps track of our velocities jumping running walking flying swimming what-have-you as I select on that you'll see over down the side here these are all the different settings that we can interact with so let's go ahead and jump over the event graph very simple graph we'll start here at movement so basically we're reading the movement here I've got WASD hooked up we're adding movement to the the pond and then over here we're doing a this is a custom event this is update animation we'll jump back to that in a second but then this area here basically handles orientation so we just we take a look at the value coming in from the controller and if it's greater or less than we either face the sprite left or right that's all let's go over to update animation so if we double click it's going to jump up in the graph here and what are we doing so basically we're just getting the velocity of the character that we've sat down below we're getting the magnitude of that vector that's basically the speed and we're comparing it against zero and then depending on whether or not that's true or false whether we're greater than zero or not we're going to pick an animation to play we have an idle animation here and then we have a running animation and then we're setting that value here and that is the actual flip book that we're going to be playing a flip book is a sprite animation in the paper 2d system so probably one of the first things that we want to do is get our new sprites in there instead of our blue template guide so let's do a little bit of setup here let's go back to the content folder of the asset browser I'm just going to make a new folder and I'm going to call that demo I'm going to go ahead and isolate all the new stuff that we're making and let's make a blueprint folder and in case you don't know it fairly recent feature you can go ahead and set the color of these folders so being a blueprint I like those to pop out so we'll make that blue and let's go back up so this is the original content here this is our character I'm going to go ahead and just dupe this so let's drag that over to the blueprint folder we just created I'm going to say copy so now when we click over here's our new guy and I'm going to rename him VP for blueprints and he's going to be our dude very good so exact same character that we had before same graph same component hierarchy but new version all right so now if we we want to do is make sure that our game is actually using our dude so let's go up to settings and we'll turn on our world settings you see this panel popped over onto the side here and we want to look at the game mode so currently we are using the 2d side-scrolling game mode that was built for this particular template and we can go ahead and use that or if we wanted to for whatever reason we could create a new game mode here by either clicking the plus button or in the asset browser we could make a new a new game mode but we don't have to go through all that so if you see down here a default pawn class let's go ahead and pick our dude there and again if we hit play now this would look exactly the same because we have made no changes to our character at this point alrighty and you know I'm going to since we're doing a retro game I'm going to go ahead and look at this from the front view and we'll turn on lit mode all right so here's our stuff way out here all right so you can see there's a bunch of stuff in here already it doesn't really fit with the style of game that we're going to be making so let's clean this up a little bit and start from scratch I'm going to go ahead and make another new folder and I'm going to call this maps and then from the file menu I'm going to say new level I'll start with the default and then right out of the gate I'm going to go ahead and say save as and torn folder there we'll just call this level no 0 all right very good all right nice clean slate to start with and then you know just in case anything untoward happens let's go over to our project settings again and under maps and modes you see here we have the default maps and the startup map if we click this little triangle here we can pick which level we're going to start with so now whenever we come back into the editor for this project we're going to start on our nice clean level and whenever we play the game this is the map that we're going to start with all right again so let's take a quick look at this all right so we are actually running around on the ground we just can't see it there do the way that our camera is set up so I think before we get into camera though let's take a look at our our sprites let's go ahead and make a new folder selecting demo new folder and we'll say sprites and I'm going to make another new folder here whoops new folder and this will be our character all right now I'm going to browse over to our project so let's see actually where'd I put that stuff ok up on the desktop here here's our artwork let's go back there this is my project project folder here I'm going to create this is just my my workflow I like to create a source folder within my project keep it all together and we'll drag this in so we've got some character art a couple random other pieces of miscellaneous art and some environment art as well take a look at in a second we don't really need to look at tutorials okay so for our character let's go ahead and right-click and we'll say import and we're going to go ahead and find our see there's a projects demo source okay here's our artwork here so I'm going to just grab our character art and drag that right into the browser or actually I'm selecting at this point yeah we'll do that okay all right so what had happened there is you can actually drag and drop assets into the browser which is what I typically do but since I'm working on one screen I went to import and basically imported it twice anyway all right so here's our here's our sprite it's basically a texture at this point so if we go ahead and open this up and we zoom in here you can see we have our character art and it looks a little fuzzy and the reason that is is because it was authored at such a low res because we are doing a low res 8-bit style game and we've got bilinear filtering going on and all sorts of other stuff that you would typically want in a texture that was mapped on a model but for our retro game that's not really what we're going for so let's go back out to our asset browser here and if we right-click on that texture up on sprite actions if we scroll over I did a little fast but if we say create sprite that's not what I want to do let's go ahead and delete that okay if I right click sprite actions and then we want to use configure for retro sprites so you see that the texture change there a little bit now if I double click and open that up a little bit difficult to tell this background but if i zoom in here you'll see things are nice and we have that nice hard edge going on and the reason that is is because we swap the texture group here basically these are a bunch of different configurations that you can use for textures and the one that we want to use right now is UI basically all that does is says that it's going to set our texture compression to uncompressed and turn off our filtering all right so now we want to create sprites out of this so we'll go ahead and right-click this again and we're going to go ahead and extract sprites so we do that and boom there we go we have all of our sprites so since this texture was created with all the different frames nice and evenly spaced it was pretty easy job for unreal to go ahead and just extract all these in one shot so if we double click so this is our first right here a couple things we want to change right out of the gate I like to show the grid and I'm going to change this from 10 units to 1 so what I'm really trying to go for here is I like working with one pixel per grid unit if you scroll over to the side here on the details panel you see pixels per unit it defaults to one point two eight I'm going to go ahead and change that to one and if we zoom back up there you go you see each pixel of the character maps directly to a unit in unreal space so the other thing I like to do is for characters we have this pivot mode I like to go ahead and set that to bottom center so now we have them kind of sitting on this plane here it's a nice when we're doing our animations it's a good way to line things up it basically acts as a ground plane all right so we'll save him he's cool now we could go through and do each one of those individually but that takes a lot of time so the fast way around this is I'm going to go ahead and shift click and select all the remaining sprites and then right-click and then from Midway up you'll see asset actions let's scroll over and down and from the property matrix we can see all the sprites that we had selected now over on the side here we can see all the parameters that are common to sprites and again the ones that we're interested in pixels per unit and we want to go bottoms Center okay cool so again now we've got this guy lined up on the on the floor plane and we're snapping to the grid so everything's good alright real quick here so I'm monitoring questions over on the other monitor here can you the first question is can you please show the same process but without the spritesheet I'm an animator so I have frame by frame sequence so really all you would do is you would drag in or import your individual frames and instead of doing the extract sprites you would just say create sprite and it would automatically turn your single frames into a sprite so it's a lot easier and quicker though to pack your sprites so in the end there's no big difference but just really depends on how you want to work alright so what were we up to we made our sprites and now we need some animations so we'll start with the stance so the first three yet normally by the way I would go through and rename all these but we don't really have time for all that so let's go ahead and select our first three frames here is going to be our first animation our stance animation or our idle animation and we'll right click and we're going to create what's called a flipbook so there it is there and I'm going to preface it with a for animation and I'll collect stance alright so there we see our twitchy little guy if I hit enter and open them up and here we are in the flipbook editor okay so we have frames per second over here now typically I don't mess around with the frames per second too much I leave it at the default 15 you can go ahead and adjust this on an animation by animation basis but I like to have consistency there and if I'm going to be adjusting the timing of my animations I'll typically do it down in the timeline you see we have these three white boxes now you can go ahead and drag these out and this is basically how many ticks or how many basically the hold for each frame of animation so if you mouse over you can see that you actually get information on which sprite is being used per frame so this is sprite zero sprite one and sprite two so not the world's most interesting stance animation but it'll work and if we wanted to add new frames we could go ahead and do that here or over from the list you'll see the same list of sprites here as well so we could go ahead and hit this plus key and add sprite so however you want to work really is how you can do it there and we have a reference to the material I don't think we're going to cover materials and sprite materials today they're a bunch of oh by the way I'm working in four point seven point six four point eight is on the way there's a lot of new paper 2d features and functionality coming along that's really cool some new material stuff so I'm going to hold off on materials for today but just so you know this is where you would access materials for your flip books alright so there's our first animation and to get us started we'll need to jump now the jump is just one frame so we'll go ahead and create a flip book and again I'll call it a jump and we don't really need to do too much in here because one frame that's fine we don't need to adjust any timings and we want to run we need a run to get us going here as well so there are three frames for the run I'm going to go ahead and create a flip book again and then a run alright so this looks pretty bad let's go ahead and I think we probably want like three or four ticks here okay getting better but looks a little funky and the reason is is because even though there are three distinct frames in the animation the way that this was originally designed was the crossing frame this frame here sprite nine is going we're going to use that twice we're going to duplicate that so if we go ahead and right click and duplicate so now you see they're sprite nine and they're sprite nine again we can click and drag this to the end of the timeline so now we have our crossing frame at the beginning in the end of the anime sorry the the middle and the end of the animation and looks a little better alright and we're just wait for autosave good time to check the questions sprites flipbook will be used for UMG for you simple animations oh so I guess the question is can you use sprites in UMG you know actually I'm not sure I haven't tried it but typically I think you'd probably want to use some of the more standard methods for animating textures like a UV offset or something something that effect okay all right oh that's probably good good enough to get going here and let's see let's go back alright so let's go ahead and fix up our character blueprint Oh real quick I saw this question pop up how do you create a sprite sheet so um externally typically with Photoshop or or you know whatever method you want to use there's a ton of 2d animation tools out there the names of which are escaping me at the moment but basically any way that you can make a texture is that's what you would use for a sprite alright so our character double clicked open him back up and let's go to the viewport first things first let's click our sprite component and we'll get rid of our blue guy here so let's pick our stance okay so first thing that we see we have our tiny little retro sprite and our collision capsule is pretty huge so if we went ahead and hit play now oh you know what did I not pick let's go over to our world settings oh yeah because I made a new level I have to override the game mode again so let's go ahead and hijack that side-scrolling game mode and okay so there BP dude all right so now when we play why is the oh because we need to replace the other animations all right so let's go to the event graph alright and here you see where we're updating animation we mentioned that previously let's go ahead and pick our Stan's animation for the idle and our run animation okay so that should be good there we go alright so way off in the distance you see our tiny little guy I'm going to go ahead and hit the tilde key and say show collision alright so you can see that the capsule is really huge it's actually resting on the ground there that's currently invisible do the way the camera set up so we have a bunch of stuff to fix up really so first things first I think maybe what we'll do is let's go ahead and fix that camera so we'll take our camera boom and just go ahead and reset some of this stuff here if we go to the viewport you see that we've got like this offset here on the boom on the spring arm so let's go ahead and just bring that back down so we're looking directly at our character there next we'll pick the camera and you'll see that we're set for an ortho camera which is ultimately what we want really quick though let's go ahead and hit perspective now if we hit play so we can see our guy is actually moving around in the world he's floating in the air because of that capsule it does not match the sprite size so that's probably the next thing we should fix up let's go back to our ortho view here and yeah let's do that let's get our capsule as our capsule and we're going to go ahead and shrink that down so we have two settings here capsule radius and we'll make that really tiny there we go somewhere probably not that tiny let's go somewhere in the neighborhood of eight I found works pretty well for this particular sprite and then the half height we're going to take that way down and we're going to turn that to ten has a pretty decent size all right now let's grab our sprite you can just go ahead and select him and we're just going to pull him down so that the capsule matches him a little bit better some are probably in the neighborhood of that so again hard to see because we don't have our resolution set properly so let's go over to our camera again alright so you see here that the size of our camera is actually 2048 we want to change that up now ultimately let's say we're going to have this game presented on a console or a PC where the typical resolution is going to be 1080 right I'm working on a monitor here I don't think I have a tremendous amount of real estate for a 1080 viewport when I'm playing so what I want to do is actually reduce that size and first I need to figure out what my final resolution is going to be so again real quick let's take a look at this so on a 1080 screen are guys like really tiny after doing a little bit of a mock-up Photoshop I found that I really what I want to do is reduce the size of this camera so that our character actually like fits the screen a little bit better to emulate the resolution of an old-school console and so I found if if I take that 1080 resolution and start dividing it out a good size was I think I wanted to use 384 by 216 so let's go ahead and change that so now when I play there we go so now our guys sized a little bit better on the screen now let's take a look at this for a second a couple things you might notice so you see how the pixels are not pixel perfect as the guy is shifting around on his animation there you can see some of the pixels are not square and again that's because so we've decided on our final resolution but the actual editor window that we're playing in doesn't match they're not they're not multiples of each other so you could continue working like this if you like but that's the kind of thing that really gets under my skin so let's go to edit or preferences under the Edit menu and down under play you'll see that we have a new window size we want to make this some multiple of our final resolution and just so I have a little bit of space when I'm working here what is it 648 if I go ahead and play that should look a little bit better so now you see that our pixels are perfect they're perfectly square and again that's because our play and editor window now the resolution is a multiple of our final output resolution so things are scaled up onto hard levels I'll say oh yes okay very good all right so I think maybe the next thing we want to do let's take a look in so you see I'm actually jumping around here so we're not seeing our ground plane which is kind of disturbing and the reason that is is over in our level here let's go to our perspective view so you see this is the player start that's where we're actually starting the game from actually we're going to be looking at it from this direction because we face to the right so the camera boom is actually intercepting this ground plane here so if we slide that back a little bit then it should be out of the range of the camera so now when we hit play you know first things first let's go ahead and adjust the rotation this is the directional light in the scene trying to light up that front edge a little bit there we go alright so now we can see we have a frame of reference for how fast we're moving and jump is pretty intense and he's going to hell fast there so let's tweak that out so back to our character okay character movement as I mentioned before this component handles everything related to movement states whether we're running walking flying and the various speeds that we do those things at so for starters let's do a search for walk and we have a couple of different settings here let's find our walk speed now just let's take a guess maybe 120 and let's fix the jump as well so jump velocity yeah that's way overboard and maybe 300 is a little bit better actually I think from memory 350 works out pretty decently okay so that looks a little more reasonable jump is a little bit shallow but yeah let's go ahead and let's try 400 maybe all right that's pretty good okay so that's that's the basics of moving this guy around it's a pretty good progress for about 20 minutes work all right what should we do next uh he looks like he's sitting I'm not going to let's go back I'm not going to adjust bother adjusting the the height of the character see we have that little bit of a gap there we're going to start bringing in some environment sprites and things will mash up a little bit better so won't worry about that for the time being all right let's take a break real quick here and look at some of our questions let's see I found that there's a motion there's first question we have found there's a motion blur while the character moves is there an easy way to reduce or disable it it's weird in a 2-d game so if you're seeing that I don't have a global post-process volume in this particular there might be one on the character here I don't have one in the scene but if we look at our camera and kill our filter all right if we look for blur yeah so I don't have any check to double double check to make sure that you don't have motion blur enabled over here that should that should disable it so there we go yeah I didn't particularly notice it on mine so and again that's on that was at the camera level of my character it may be depending on which level you started with you might have a what's called a global post process already in here so you'd want to select that volume and then in the details panel you adjust that same exact setting all right okay there's a couple other questions but we'll wait on those for now okay so let's do some environment stuff let's see sprites and a new folder and we're just calling env and if we go back to our source folder here we have this tiles map and I'm gonna go ahead and just drag that right in and again we've got the filtering and compression setting issue so we want to go ahead and from sprite actions configure for retro sprites now if we double click so we got a bunch of goodies packed into here we have some big blocks and some bits and pieces and doodads that we can use all good ok so there's a couple of different ways that we can handle this I'm going to show you one way today and then a second way later I think we're going to break this out into multiple streams at some point the first way is we're just going to extract these as sprites as we did before with the character and that way we'll have collision on them and we can just go ahead and drag and drop them into the level and our character can run around on them now the second way to work with environment art is we can create what's called a tile map and I don't want to go too far down this road but it's really awesome so I'll show you real quick if you right-click and say sprite actions you can create a tile set which creates a new asset and then from here if you go in again I don't want to get too far into this but basically I've authored this piece of art here so that by changing these dimensions now if I start clicking around there you go you see how I have that little white outline there I can grab pieces of these as tiles and basically stitch together and in try an entire level or different assets that I can then drag and drop by means of making a tile set or a tile map actually so I think that's under miscellaneous and tile map alright see I'm already going down this road because this is just like too fun not to do so you click this button here's our tile set and I'll leave it here for you to explore because like I said there's a lot of new functionality coming in for point 8 that makes tile sets and Tom Maps even better than they are now but it's fun to play with I'll leave that up to you let's go back and just handle this at like a regular set of all right I'll get rid of those very good cool okay so again let's go ahead and we're going to extract these sprites so from spread right-click sprite actions extract sprites okay so here we see all of our bits and pieces and you'll notice that our blocks were packed together really tightly so they're all kind of in one sprite at this point which is not exactly what we want so we're going to get into some of these tabs up here so if we click this second tab you can see edit sprite region and we get this set of handles here we can now adjust this and again let's go ahead and turn on our grid and we'll want to change this to one so that we have one pixel per grid unit all right so now there we go there's our first block and if we click the next tab we can see here's our collision geometry now this particular case very simple geometry works just fine and then we have what's called render geometry as well and you can go ahead and manipulate this stuff so let's get a new piece of art actually this is better Illustrated using something like this here we go okay so you see here this piece of art actually has some cutouts some overhangs if we needed for whatever reason more of a pixel perfect accuracy and I'm probably going to have to go and change all of these now we've got under the collision section here we can go ahead and pick a few different methods for determining collision so if we say shrink up shrink-wrapped all right does a not so bad job there now we can start going in here and moving these things around and matching them up and I'm just going to delete that one so yeah if we needed pixel perfect accuracy we could go in there and go ahead and edit if you hold shift and click on one of these edges you'll get new verts but we don't really need that for this let's go ahead and do tight bounding box and then similarly now let's say again the way that this was authored our sprites have a little bit of real estate around them so that they're extracted easily but depending on how large your game ultimately is you can really get pretty tight with packing your sprites together if you wanted you could actually have let's go ahead and look at this guy you know we could have packed some of these doodads in under these under hangs and then we could have gone and edited the render region for those under hangs and again if we just hold shift and start clicking should be able to hold shift start clicking then we can go ahead and edit what portion of this sprite is actually rendered so you could basically crop out any of the other art that would be intruding into the space of this particular sprite alright you know what while I'm here let's go ahead to the property matrix again and that's asset right click asset actions and property matrix and under sprite let's set this to one so we have one unit per pixel and we don't really have to mess with Center for environment art doesn't make a lot of sense okay all right so what were you doing we were looking at our first block here so we need to make a few more blocks so we have some variety so I'm going to go ahead and duplicate this and let's do that again okay all right so now what I want to do is kind of refresh that note I should have done is let's read we will rename these all right this is gonna be a lot faster just do this give me a lot faster just to get rid of these guys instead of hunting all over the asset browser for them let's just go ahead and get rid of those all right let's recreate that so now have our block and again we're going to duplicate it and we'll select both and duplicate those again and select them again and then one more ok so now we have enough blocks for all nine different styles that we have and these are 48 pixels wide so I think let's go ahead and select we'll select this next batch and again from the property matrix asset actions property matrix from sprites and our source a little hard to see here source UVs so if I go ahead and enter minus 48 let's pull this back here all right there we go my name is 4:8 why is that not sticking bear with me one second here yeah that's our source UV should be able to just drop that down why are you not working so really what we want to do is grab this guy alright sometime in some funky mode here some reason is not taking my keyboard input property matrix source UVs and you should be able to just adjust let's try that one more time oh you know why because I actually want to go positive there we go alright so yeah actually so the coordinate system is a upper left-hand corner sorry I was going backwards so now you see that I adjusted those that's dropped it down a row in the source sheet so now we have those nice striped ones and let's go ahead and do this again property matrix sprites source V's and should be 96 is tied okay so now we have sort of that model look alright so now let's get every other one here get rid of that and we're going to move those over horizontally okay so now you see we have a different style there again and let's pick every third one and from the property matrix source v's and we're going to slide them over to spaces okay there we go so now we have three different sizes three different size bubbles for three different styles of a block okay great all right looking at the questions real quick here yeah let's see you keep adjusting the pixel size of the art you import is it possible to change the default values so that they come in at a size you commonly need yes at least in four eight you can let's see if we can do it here so edit preferences actually it might be in the project settings come to think of it so we say project and paper 2d it's not there actually this might be a flow here to default pixels per unit yeah we could actually set this and then set that as our default yes okay so we have some background art and we have our character kind of running around looking a little bit better so let's go ahead and get rid of our BSP background here I'm going to go to the front view and lit mode and we can just go ahead and start dragging these things into the world so there's one and I'm just using alt and dragging to make a new one like so we'll just make a few more I'm going to change the elevation a little bit to make it a little more interesting alright maybe one or two more and then we'll change this up throw in a hazard block here I'll call it and you can use your mouse keys to go ahead and mouse these around or sorry cursor keys alright so I offer all this stuff in greyscale so that when we drop a sprite in we can actually change the color of these things if we wanted basically we're just blending a color over the top there we go change up a few more of these all right you get the idea okay so I suspect there we go all right so what's happening there so we're running into we're colliding with our sprite geometry and we're losing our camera so let's take a look back at our blueprints I believe that's in our camera boom there if you select the camera boom over in the right hand side you'll see this setting for du collision test we want to turn that off so now when we play there we go all right so you see that little step there so this particular piece of geometry is a little too high to step up on but this one we can I'm just going to show you this real quick if we go back to our character and we look at our movement component and we do a search for step we can fine-tune the height at which our character can step up right now it's really high let's go ahead and change that well just for the sake of the demonstration we'll make it even higher this is the OP so now like when we run over to this block we should step up let's see should be stepping way up on top of that we can make it really ridiculous now I might be colliding too low ah there we go so you see how I can't walk on top of that guy now I think what I actually want to do should be turning that down no sure let's adjust our radius here yeah so our guy wasn't quite sitting where we wanted to be all right let's pull him down one more pixel see if he sits on the ground a little bit better there we go and back to our level yeah oh you should slide right over the top okay cool all right so um how much time we have 15 minutes or so let's go ahead and let's fix up his jump next okay so back to our character and from our event graph so we have our jump action down here so this is a built-in to the character movement component basically we just call the jump function and that launches him at the velocity we said earlier we don't have any animation setup currently for this so what we want to do is play a new flip book and we have to determine whether or not the character is jumping so real quick let's go ahead and make a new variable called is jumping and I'm going to compile that and we're going to get it and we'll say if that's true so we'll do a branch you know let's go handle this up in the animation let's drag this all the way up here and we're going to make sure this happens before our actual running around so if the character is jumping we want to go ahead and set a flipbook and we want to play the jump animation okay if he's not jumping then we'll just go ahead and do our running around now way down here we actually have to tell them that he's jumping so we want to set jumping so we'll say is jumping true and there we go all right so you saw that he jumped and he's in this jump animation there but he doesn't know what to do once he hits the ground so again thanks to our character movement component there is a function called landed we have event on landed here and basically we're going to use this to reset our character state so we'll go ahead and set is jumping the false so again because we aren't jumping the animate the running animation should take over again all right okay so basically now you notice that I'm like explicitly setting animations here and that's because currently there is no way to take advantage of an animation blueprint like you would in a 3d character so typically like in a game like this retro style thing there's only a handful of different states or animations that you're going to be running through so setting them explicitly isn't that big of a deal but as you can imagine as we add you know crouching and sliding and climbing and you know shooting all that other stuff our graph is going to get pretty crazy with all these boolean z' and getting and setting States so a way to clean that up you can kind of create your own little state machine here so let's go over and I'll just do it from here let's go ahead and right-click and I'm going to create an enum so that is from blueprints enumeration and we'll call this like character States all right so we want to click this button over here new and we're just going to add a bunch of these so we'll have a state for standing my out of state for running case we need that and we'll need a state for jumping and then ultimately down the road we'd probably had a crouch and we need to know whether or not our character has been hit and at some point he's probably going to die so we'll need to know if he's dead okay so let's go ahead and save that now back on our character we can add a new variable and we'll just call this state I guess if we go and change the type over here down to e new the enum that we created right at the top is character States and we'll set the default to standing that's the first one there that works great so now we can drag this in and get it and say if it is equal to jumping that should just go ahead and work and instead of using again stead of using these boolean so let's go ahead and we're going to set this to jumping here and I'll just copy and paste that and again this is our on landed event so we'll say whoops we'll say standing okay so really all we did there hopefully this should work I don't think I forgot anything yeah I basically duplicated that functionality with an enum so it's kind of a nicer way to work keeps things a little bit cleaner and you can keep track of all your different states in one place instead of having this humongous list of variables on the side so we don't even need that anymore okay all right real quick let's take a look at some questions how does extract sprites actually work I'm hoping michael noland is in the chat and he could probably speak to that okay cool cool and fully functional tile map collisions will be in 4/8 released yes so the tile map stuff that I showed a few minutes ago really quickly in 4/7 collisions are we're not implemented it was a work in progress and so in 4:8 the time do actually have collisions so yes you can build out your levels with a tile map using collisions all right can you use a state machine to handle sprite States well no not in the sense of a that's what we basically just covered right just to reiterate you can't use an animation blueprint with a sprite currently down the road perhaps so instead I'm just keeping track of all my states via and enumeration all right how we doing on time ten minutes what else can we handle um let me take a look at the notes all right maybe we can get started on health and damage yeah let's do that okay so back in our blueprint folder here I'm going to right-click and we'll do a little bit of UMG real fast hopefully we'll get through this in time we're going to create a widget and let's call that widget the health bar or actually you know it will put will put everything in this so we'll just call it HUD for heads-up display so we open it up we see our canvas here and under common we're going to go ahead and use what's called a progress bar so if we drag that in there's our little progress bar you can put that wherever you like I'm not going to mess around too much with the aesthetics here but I'll drag this out and you see over on the side here under appearance we have percent if we start sliding this around you can see this thing fill up and you know raise and lower its level there so we want to tie that to the character's health so probably the first thing we should do is give our character some health so if we go over to the character blueprint and from the graph we're going to add a variable and we'll just call this we'll call it health current how about and will change its default type to float and we'll set that to one okay so now we have a health value that we can work with and from our widget here well first things first let's go ahead and get this up on screen so from our character again on begin play one thing I like to do this is where this is where we're going to up our widget and actually apply it to the character screen I'm going to go ahead and create a sequence I kind of like to keep things a little bit tidier so let's go ahead and what we want to do is I'll start typing widget and we're going to create a widget the widget that we're creating is the one that we just made called widget HUD and we need to figure out who is owning this so we are going to get the controller so get controller and we'll wire that up there let's see is that what we want let me take care about the player controller actually yeah so let's get player controller there it is so this is the actual player that the sorry the controller the player is interfacing with app on through okay and then I'm going to right click and promote this to a variable and we'll call this a health bar in case we need to refer this later and then from there we'll go ahead and add the widget to the viewport so you just type ad you'll see ad the viewport is highlighted and I think we're good to go so we hit play and there is our tiny little health meter what happened did I not save and compile let's take a look again that's better okay all right back to the widget so let's go ahead and reset this down to zero and we want to tie this to the actual health variable that we created on our character so we'll go ahead and hit bind and we're going to create a binding and that's going to open up this new event graph here and the first thing that we want to do is call out and communicate to our character so we're going to do a cast and what do we call them my dude or something yeah cast a BP dude and let's see again we want to get the player let's let's get the character whoops get player character wire that into there okay so then we want to find out what is healthy so let's look for as hell so get current health health current rather and we're going to wire that directly in okay so we hit play and now you can see that our health meter is filled up all right we're running out of time so real quick we're not gonna be able to create an enemy today but we can simulate taking damage real quick here to show you how this works so I'm going to right click and I'm going to create an event I'm just going to use the backslash key here and we'll get the character's current health and from there we're going to subtract a value and again just for testing we'll say zero point one we're going to subtract one-tenth of his health and we'll go ahead and set this that'll be the new value of the character's health okay so we hit play and there we go so you see as I'm hitting the backslash key the health meter is declining there that's really all there is to looking up a simple health meter you can go in there adjust the colors set textures on the health meter so it's a little more visually interesting but obviously the next thing we need to do is actually kill the character and five minutes left maybe we could do that so um let's get that value and we'll say if that is less or equal to zero that's true then we're going to go ahead and set a new state and that's our enum over here we'll set him to dead okay so he's dead awesome but we need to update our animation so yeah this is getting a little crazy up in here so I think what I want to do is let's do a switch on state yeah switch on character state and now when we come out of our update animation here so if we're jumping we'll do this and if we are running we're going to go ahead and do this and if we're dead let's go ahead and we're going to set a new flip book but I don't think we created our death animation yet we don't need this anymore or this so back to our character sprites really quick let's make a dead animation Craig flipbook we'll call it a dead all right single frame and we're going to set that flip book right here to dead all right I think that's good so again running around oak but we are not now just even get this working all right what did I miss uh-oh that's why I wired up the wrong one there we go let's try that again okay so running jumping looks like I didn't water that a properly either so jumping we need to set our jumping it's out here alright so he should work what did I miss here let's take a look alright shoot running out of time so if I'm less than zero then I'm gonna go ahead and set to dead so if we're coming in here we're picking let's see we need our enum there we go let's try that area we had to get our actual state and pump it into the select alright so now if I kill myself boom we're dead alright so obviously that's not super great two minutes left let's go ahead and fix this really quick we'll go ahead and disable input and I probably need to get the player controller okay let's give it a shot oh good didja to tune all right so now I'm actually trying to run around and I can't go anywhere okay so at this point I'd probably want to do something like have a little delay play some particle effects and then you know reopen the level and get to started again but we have like three minutes left I'm just about out of time real quick can I answer any questions let's see yeah there's a lot of questions left over you know go ahead and hit up the forum thread in the events section and we'll see if we can't get those things answered but thank you very much for coming hopefully you learned a couple of things and we'll do another one of these we'll keep building on this project for for a little while I suppose as long as you guys are getting value out of it just shout out in that thread and let us know what you want to see so thank you very much

Channel: Unreal Engine

Views: 493,477

Keywords: Unreal Engine, Epic Games, UE4, UDK, Unreal

Id: cCl1DHhIYeY

Length: 58min 20sec (3500 seconds)

Published: Thu Apr 30 2015