How To Make 2D Platformers (Unity Fundamentals Tutorial)

how's it going it's good to see you I'm glad you're watching this video my name is Thomas brush and the creator of a game called pinstripe I'm also working on a game called once upon a coma now I've been making games for 10 years but when I first started making games the whole concept of making a 2d platformer or a 2d game was really daunting I just didn't understand how to put all the moving pieces together so I'm gonna distill that down for you in this video and give you the basics of making a 2d platformer so that you can get started alright guys you ready let's go so this is my Photoshop file with my scene artwork inside of it now you can make a game with tiles and there's plenty of YouTube videos on that but you can also create artwork in individual frames and in this case we've actually created essentially two sixteen by nine canvases and so the player can run basically twice the width of your screen so if you take a look here it's about two of the sixteen by nine s and if you look at the actual image size here just if you're curious it's seven thousand six hundred eighty pixels by 2189 pixels now this is how the scene is set up in Photoshop it's these simple layers here with a foreground element some grass which is where the player will run you've got a cool tree here with a little egg you've got these bushes and then you've got this background image now obviously if you want to have as many layers as you possibly can that's really cool you just don't want to slow down the players machine too much with all of that content but games like hollow Knight for example have a ton of layers and it really makes the game feel alive makes the game shine in this case though we're gonna have just six layers here and we're gonna actually export these as PNG s and bring them inside of unity so let's go ahead and export them Photoshop players to PNG is a really cool script and it's included in the link in the description and it allows us to export these layers as PNG s now unity can import a PSD file and that's totally fine and I believe unity is actually slowly rolling out a tool that will actually break apart your Photoshop file into layers but for the purposes of this tutorial depending on which version of unity you're using I think we can easily use this script here and export to PNG 's inside of unity so let's just go ahead and export these as layers so these are all exported now inside of a folder called layers alright let's jump into unity so here we are inside of unity now all we've got is a main camera it's a blank scene here so notice how we're in 2d mode here if you deselect that you can see we're actually in a 3d space but let's click 2d so that we're actually going to see a flat plane and the camera will basically be orthographic instead of perspective now you can see that my projection mode for my camera is set to orthographic perspective would be what a 3d camera would use and perspective automatically would create that parallax effect and I'll show you that in a second but we're actually going to create our own parallax script so for now make sure that that's set to orthographic set your size to 10 and that will just allow the artwork that we're creating to be inside of that camera viewport so let's go ahead and just drag all of these into our scene now believe it or not there is a tool that I like to use and it's on github and it's called Photoshop 2 layers and you can actually take a Photoshop file break out its PNG layers and then have those layers brought into the scene so that you don't have to move everything around and lay everything out but for the purposes of this tutorial I actually want to show you how you can do sorting layers and position your sprites so that they look good in a 2d space alright let's go ahead and take this foreground element let's start from the top here foreground we're gonna want to put it in the foreground sorting layer and you can create your foreground sorting layer by clicking add sorting layer but we've already got it here so we're gonna click foreground let's just set it to 5 because we might want to put something behind that eventually we've also got our grass so let's just I like to bring things up close to one another as they descend down the z-axis so we have our grass and that's going to be set on our player plane set to 1 our player is going to be at 0 bushes we're gonna put behind the player in BG and let's just set that to five because we're gonna go down slowly the tree is actually in front of the bushes so that's going to be BG 0 or B 0 B G 6 5 the egg will be BG 6 as well and then this reference image is actually is supposed to be called sky reference just call it sky actually and we're just gonna make that BG alright so let's go ahead and position everything nice and snug there we go bring it all down to about there bring our tree down about there our bushes down and we have a scene alright guys so this is all laid out clean and precisely inside of unity and we're just gonna create an empty game object and call this frame 1 I like to call these little vignettes these little screen boxes frames and we could put all of our pngs and game objects inside of this parent object be sure you zero things out you don't need them to be in weird positions and just make them all a child of frame 1 here so as you can see we can move all of this inside of one game object and this is our frame 1 our camera let's zero that out as well I like things to be nice and clean negative 10 would probably be a good position for it on the z axis so let's go ahead and change the z-axis position for all of these pngs now this is really important because it's gonna allow us to have that parallax feel so for the sky we'll put it at maybe with me 10 egg mini 5 the bushes could be 6 movies like a egg actually 3 a tree 3 you'll see what I'm doing here in just a second we're gonna keep the plane at which the for the where you see the graphic at which the player is walking on on the zero position so it's gonna be at zero and then foreground will actually be negative for now watch this this is what we just accomplished now we have a scene that is actually in 3d space I like to imagine it is kind of like a puppet show so now we have everything laid out just like that but for the purposes of this tutorial we're gonna keep it in 2d space now let's go ahead and create our character now this believe it or not is one of the easiest parts of making a game because so many tools are available and scripts are available online for you to download and just use out of the box so if actually included a link in the description for a script that actually that unity provided and you can take a look at that script and see if it works for you so let's go ahead and create an empty game object call it player again be sure you zero things out keep everything nice and clean trust me you want things to be clean when you're making a game because it can get very complicated very fast so we're just gonna use the script called player platformer controller make sure you bring in that script into unity after you've downloaded it you're also going to want to add a rigidbody 2d here make sure it's set to kinematic simulated use full kinematic contacts and you also want to have a capsule Collider mine is at point three eight and point nine the size is really whatever you want it to be now the reason you use a capsule instead of a square is because squares corners will actually dig into hit boxes cause the player to get stuck so you have a capsule Collider here and also as we stated before you have your platform player platformer controller script that we downloaded I want my script to be at 15 jump max speed of seven we've got gravity modifier of 1.5 and then these two scripts will actually explain when we actually start animating our character so we've got this character in the scene here now to be able to see it let's actually just add a sprite and then let's just bring in a sprite that we have just so you can see what things look like how about we bring in that egg how does that sound now let's make sure that your sorting layer is set to player and we have our egg here so let's just make sure or that everything works okay so we're gonna get go ahead and hit play and ensure that everything is working well okay as you can see it's not at least our players falling the reason why is you guessed it we need to add an empty child we're gonna call this hit box and it can be anywhere inside of frame one but we're gonna zero it out because we like to zero things out be careful about your z axis let's zero that out so there we go now let's add our polygon Collider now what you could do is you could actually click on grass here and go ahead and get polygon Collider placed on top of that PNG and unity will do something which is a really amazing it will actually add all of the different vertices for the various transparent pixels associated with this grass but we don't want to do that because that's a little crazy like if grass was made out of pieces of glass or something that would make sense but for a video game you always want to be keep things pretty smooth so let's remove that and actually go to our hip box here create a polygon Collider and as you can see it's created a one two three four or five a hexagon wait is that a hectic on our Pentagon what is it okay so we're gonna bring this down let me know in the comments what kind of shape that is because I'm an idiot we're gonna bring this down and actually start dragging things out so all you got to do is just click see that it's really amazing there you go just slowly bring things out you want it to be below the grass because you want Pete to be running through the grass and Pete is gonna be our character by the way so you'll just be running through this grass just like so very good make sure you extend these down to the bottom try and keep things clean the way that you delete a vertice by the way or a point as unity would call it is you click ctrl command oh and by the way we clicked edit Collider here just if you're confused so we can command or control click here and it removes that so now things look pretty clean and we'll just make sure we have some bleed as it goes over the edge here because we don't want the player to accidentally fall off the map if he's just towards the edge here so I like to bring a little bleed out just like that trust me you want things to be as clean as possible when you're making games I know I've said this before make sure you're being patient as you make your game because things are gonna get really complicated really fast looks like everything is working great we can jump we can run and obviously we want to change the character graphic so before we change our character graphic let's actually get the camera to follow our little egg looking thing here what we're gonna use is something called cinema Sheen now when I was maybe 5 years younger I thought I had to create an entire camera camera script from scratch and that's just not true anymore cinema Sheen does the trick it's really amazing so let's go ahead click on our camera then go to cinema Sheen create 2d camera alright as you can see this weirdly named game object was created and then this red little cinema sheen logo was added to our camera let's go ahead and drag this to there so the next to each other what this is doing is actually controlling the camera so the only script that was actually added to our camera was the cinema sheen brain we don't really need to do anything with this but we can edit all sorts of cool variables inside of the CMV cam one inside of the cinema Sheen virtual camera script what's cool about the way this works is you can have multiple virtual camera game objects that are deactivated and activated and control only one camera so what that means is instead of having six or seven cameras all with different traits we actually only have six or seven game objects that you can activate and deactivate to control one camera we're not going to worry about that though here we're just going to use one CMD cam one and we're going to control the main camera so at the very beginning here you just want to make sure that you're setting the follow object to our character now as you can see in the game window we actually now have a cool little grid that shows us all of our guides so this is the move space where the player can move this is whether he can move freely without the camera actually doing anything and this is where the camera will actually speed up to catch up to him so if you're falling for example the camera will not ease anymore and actually just catch up to the player let's hit play and see what happens so far so good and we can just disable those guides to get a better look at what this looks like so let's actually change the screen why here there we go we can shift it a little bit here we go and then we can just say save during play and then it should keep it at 0.75 let's uncheck that now that it's saved let's go ahead and save our scene and finally what we want to do is make sure that we bring our character down so that he's not constantly falling notice how the camera is actually following the player while we're in edit or my editor mode that's pretty cool so we can just put him right there the camera is following our player now if you notice there's no parallaxing what parallaxing is is actually the background moving slower and then the foreground moving faster causing that depth of field appearance the reason why that's not happening is because our main camera is actually set to orthographic so if we change it to perspective mode you'll notice that everything kind of gets zoomed in and looks weird so if we go to our actual camera controller here and change the field of view we can zoom out again and then hit play now watch what happens suddenly we get that parallax right pretty cool now the problem with this kind of parallax is it actually scales everything like normal vision things that are far away are actually smaller and we don't really want to do that because we've already done that in Photoshop notice how the bush is in the background here are pretty small you've got a small little windmill back there so we've already created that effect so how do we ensure that the sprites stay the same size and don't actually shift in scale well instead of doing a perspective camera what we can do is actually create a fake parallax now instead of writing your own parallax script be like me just go find one online and use it now there's this really cool parallax script I found on one of unities forum posts thank you to whoever wrote this you rock I'm including this forum post in this video and I really appreciate you writing that script so let's go ahead and look at our scripts now we've got three scripts here we've got parallax background script parallax camera script and parallax layer script now these are pretty rudimentary work out of the box and you can probably edit them to make them a little bit more robust but for now I think they make a lot of sense for this video so let's go ahead and use let's click on frame 1 and go ahead and add parallax background this is essentially going to control the parallax camera let's add a parallax camera script to our camera and then finally let's add a layer to each one of the sprites we don't want to add one to the hitboxes the hitbox is not going to move so what's gonna happen is each one of these sprites is gonna move and shift slowly it's actually gonna translate at runtime according to the cameras position so here we have a parallax layer added to each one of our game objects we don't want one added to the hitbox though don't want to add one to the actual container for our sprites all we're adding there is our parallax background so what you'll notice here is a parallax factor so basically what we're gonna do here is anything that's maybe - is going to multiply by that speed based on the cameras position so let's go ahead and just make the grass here zero we don't want anything to do there but for the tree weekend we want it to be maybe 0.3 the AG we want point for the bush is 0.5 and then the sky 0.6 let's see if that did anything we've got some nice parallax I really like that so things feel a little bit disorienting here and I can tell you why first the background is actually a little too far back so let's just make it point 9 and the foreground itself is actually incorrect what we need to do is multiply it by a negative factor because when things are in front really close to the camera they actually move pretty fast we're gonna parallax the foreground at a rate of negative 0.2 let's hit play alright this should do it guys great so the foreground is actually moving faster than the grass so look at what's happening actually in the scene view see that guys we're tricking the mind we're making the player feel like things are actually 3d when they're really not again take a look this is actually the scene there's no depth actually occurring but it looks like there is now let's go ahead and add our player graphic what we can do is actually use something called spine 2d spine is going to take Photoshop files take those layers make them have bones and skeletal structures allowing you to animate them and then you can export those animations into unity now if any of you have seen my previous video about creating 2d animations in unity you will actually understand a lot of what's going on here I suggest to the people watching this video to watch what we're working on now and then go check out that video later to learn a lot more about spine 2d so we've got a ton of different pieces of artwork for our character here that we've already created don't get too overwhelmed here all you really need to know because a lot of these layers are actually just various skins and different graphics to create different characters other than our protagonist but for now just worried about these graphics that you see right in front of you chest here we've got a head we've got hair arms etc all sorts of cool stuff and we can actually go ahead and just like we did with our seen art we can go Photoshop layers to PNG export them and you should be good so go ahead and click okay so let's go ahead and jump inside of spine and I want to show you exactly what you can create here so we've already created our character and all of his animations again if you want to see how we did this there's a link in the description with the video to watch how we actually made this character but what's cool here is we have all of our different bones and joints that we can rotate and move and animate for our character so if we go into our animation view here you can actually see that there's a cool sort of standing animation let's see here I've got a skateboarding animation I've got a running animation dancing animation attacking there's just a ton of different ways that you can create cool animations you can really create as many animations as you want so we're gonna go ahead and actually export all of these animations so let's go to our art folder then we've created a spine folder which is gonna include all of our animations and the output of those animations let's create a folder called output and what's going to be exported is JSON files and a texture Atlas file the Jason is going to tell unity what to do with all of these PNG s that are being created and how they connect to one another how the bones actually work so go ahead and click export you'll notice that all of our data was exported we have a character Atlas we have a JSON file we have an atlas text file we have actual art here that shows all of the different sprites that were exported and then finally we have a material here which is going to be set to spine skeleton so what you want to do here is actually first create a skeleton data and that's going to be in the spine category here if you're not seeing that it's because you haven't actually installed the spine runtime inside of unity so click the link in the description and there will be a link to a spine runtime that you can use on PC or Mac go ahead and bring that into unity just drag and drop it into your assets folder and it will import all of the scripts you need to be able to start editing your spine files so now that you've done that go ahead and create your first skeleton data this is gonna be called character skeleton data and as you can see we can actually have a place to drag our JSON file and then also we want to drag our Atlas file just like that now if some of you are getting errors it could be that your atlas text file is not being referenced by your Atlas asset file kind of confusing kind of a lot going on but don't stress out too much just drag your character atlas text file to this field here make sure your character material is set and so this skeleton data is I like to think of the parent of all of this stuff it's kind of taking all of this information and putting inside of one asset that unity can use to create an animation and then finally the last thing we're going to want to do is create an animator controller and we're gonna call it character controller and notice it doesn't have any animations inside of it yet and that's because we haven't told the animator which animations to actually bring into it a little confusing here but click on skeleton animator inside of your skeleton data asset dragging your character controller to this section here and then just click for update animation clips and as you can see all of the animations that we had in spine are now a child of our character controller asset now that we've got all that let's go ahead and bring our character into our scene now ignore these removed assets these are actually removed for the purposes of this tutorial you will not see anything like this you're going to want to add a skeleton Beckenham component click that and you'll notice all of these different things were created at once we have an animator which we can drag our character controller to we have mesh renderer and then we also are going to have this section here the skeleton mekin in which will include our skeleton data drag that there make sure the skin is set to the correct one now these are all the different schemes I can use for this one skeleton in our case we're gonna use Pete because he's the main character he is our hero click Pete and then set the sorting layer to player zero if you notice he's pretty big here we don't want him that big so instead of scaling down your actual character controller to some random point value let's keep him one but what we can do is actually go to our skeleton data here and actually set the scale here about 0.02 7/8 there we go so we've got Pete here setup inside of our actual character controller so that's because we have the skeleton Meccan in the mesh renderer and then we also have our animator on here all right so before we actually get started changing the animator state machine and actually telling unity which animations to play when I want to jump into the script really quick and actually show you what's going on under the hood so as you can see it's pretty generic there's nothing crazy going on here and I'm just gonna run through really quick what each section is doing so first we're actually just going to detect when the horizontal axis is being inputted into unity and that's just a quick way to tell movie X which is the speed of the exposition when to increase so anytime we press the horizontal axis that moved X is going to increase it's also going to look for the jump button and if we're grounded and that grounded variable is actually determined by the physics object class which is a parent of this class and then we're also going to detect when the players hit jump our velocity is going to increase as long as it's not been increased already meaning no double jumping finally we're gonna tell unity to flip the local scale of our graphic which our graphic in this case is simply the game object itself if you finally this section here is actually probably the most important regarding our state machine we're telling the animator state machine to set a boolean grounded to whatever the grounded variable is inside of this script we're also going to tell animator what the velocity is of our character so we'll cover that in just a second don't worry it'll all make sense the promise and really quick we also have these two functions here one is called footstep which we'll just play a footstep sound effect and then a jump function which will play a jump sound when the player actually jumps so let's jump back into unity and as you can see we have our animator winter animator window open and we can actually start dragging in our animations into this and this is called the state machine and the state machine is basically again a place where unity can get information about which animation to play so let's collapse our character animator controller here and we're not going to worry about all these different animations for now we're gonna start really simple and we're gonna start with stand so by default on entry unity is going to start playing the stand animation let's double click on that and ensure loop time is selected that's going to make it loop and then what we're gonna also do is bring in run animation where are you run there you are and we're gonna create a transition to that we're going to make it transition back to that and then we're also gonna add in a jump animation we're gonna make a transition to that make a transition back to that we're gonna make a transition from run to jump as well so basically what's going on here is we're saying hey unity at one point you're gonna want to go from stand to run sometimes you want to get gonna want to play run and then placed and sometimes you're gonna want to be standing and then jump or sometimes you're gonna want to want to be jumping and then standing so as you can see we've got a nice little triangle here of states that can go back and forth between one another I like to keep my an animator state machines really clean because again things get really complicated so it's important to stay as clean as possible here now let's go ahead and create those parameters we were talking about so let's create a boolean called grounded and then let's create a float called speed or velocity X so these values these variables are not actually inside of our script right these aren't associated with our script what makes them eventually associated with our script is our script telling the animator what those variables are so it's telling it to set a boolean of grounded to whatever the value of our grounded is and then it's also setting the flow of our velocity to whatever that value is so these will update at runtime when we hit play let's jump into the future and I'll show you exactly what we did with each one of our transitions to get everything looking smooth like this we can jump it'll go back to running and then we can run to the right to the left if you work on your game throughout the rest of the year you'll notice that this state machine can get very complicated very fast but right now everything is pretty clean pretty generic so we've got a transition state from stand to run and it's basically checking if we're grounded enough for velocity is greater than point zero zero one it will play this run animation if not it'll go back to stand notice how run is set to loop there are no exit times being applied to any of these transitions this is checking to see if we're grounded if we're grounded as false and we're running will play the jump animation if suddenly we become grounded and the velocity is greater than point zero zero one meaning we're actually moving horizontally we'll go back to the run animation and then finally if we're jumping and we suddenly become grounded and our velocity our X velocity is less than point zero zero one will go to the stand animation and then finally here the stand animation will play the jump animation if we're not grounded and our velocity is not actually moving so there we go so let's cover one final element and that is firing animation events when you're running so that we can get sounds and particle effects to happen and this is where things can get really cool this is where you can start creating combat and melee particle effects screen shake make things feel alive so for this video all I'm gonna show you is how to create sound effects so let's click on our character here and let's go ahead and take a look at our player platformer controller so what we've got here are two different arrays we've got a step sounds array let's set it to three and then we've got to jump sounds let's set it to two and we can go ahead and take a look in our project and I've actually already got step sound effects available we just drag those here and then we've also got a jump sounds a set of jump sounds jump one and jump two and those are actually not going to fire unless we actually have events in place to actually fire those sound effects so these little things here are actually events and what we've done is we've actually created them using this tool here you can create them and place them and if you select on them and click here you can see all the functions available inside of our player script so we've got one called footstep we've also got one jump so these are gonna fire when the timeline actually plays and hits them so let's delete these and just keep these here we've got a footstep one here and a footstep one here those are going to fire the function inside of the player platformer controller script so these are two scripts that I've just written and this one's foot step and again this is gonna play that audio sound so all its gonna do is look for the step sounds array and choose a random sound from the zero position all the way up to the full length of the sounds array it's gonna pick a random one every time we run flash forward ultimately this is what you can make your game look like we've got plenty of different States we've got a jump state we've got a land state we've got particles of grass being emitted using those events in our timeline you can also click to attack and play the attack animation while playing the run animation so as you can see the options are endless for you to create really cool animations for your 2-d game we've even got our parallax effect going on and we're switching between different screen boxes alright guys those are the fundamentals of macing a basic 2d platformer if you guys like this video and you want to see more videos like this hit the subscribe button hit the bell icon comment below do all that fun stuff if you want to support this channel get your name in the credits at the next video head on over to patreon support for five dollars or more and if you're interested in getting coached by me coached on how to make indie games market indie games and maybe get some art direction for your game I'm your guy head on over to patreon and see if that's something for you thanks guys I'll see you later bye

Channel: Thomas Brush

Views: 510,471

Rating: 4.9478812 out of 5

Keywords: tutorial, unity3d, unity, assets, texture, models, materials, indie games, beginner, easy, C#, function, settings, how to, howto, learn, course, tips, tricks, tutorials, Platform Game (Game Genre), Unity (Software), platformer, platforming, coding, 2d, Unity 2018, basics, basic, movement, controller, indies, game development, game, career

Id: 2MImqNvgrNg

Length: 32min 55sec (1975 seconds)

Published: Fri Jan 11 2019