Paper Mario Style 2.5D Movement in Unity (Tutorial)

hey everybody this is Gaines plus James and today we're going to take a look at creating a 2.5 D movement system in unity so we're gonna create a system that uses a flash 2d character moving around in a treaty world much in the same way that how it works in the Paper Mario games so we've got this little character that can move and jump around and jump up in the air and you can move backwards and forwards into the seat and before we dive into the game just a quick reminder that you can wishlist our game SKU kaboom and the tomb of doom on Steam right now you can see the game on the screen and it really helps us out if you wish this the game and also obviously unless you know when the game comes out and when there's a launch discount being applied at during the first launch period of the game so go ahead and wish this to game on Steam now and we're gonna dive in and start making this 2.5 D movement system okay so here in unity we've got this start version of this project very simply set up you can download this and and follow along with the project yourself as well or of course you can use your own stuff it doesn't really matter I have this player set up we're going to use I'll just very quickly go through how this is a reason you set up all of it is is if I go to my player here I've got a spy cheat of all these different things I can drag one sprite into my scene this is our player and then I added a capsule Collider to this player so I shrink and the radius of that and I can adjust that to whatever way I want to and then it also has a rigidbody attached so that we can control it in the world and move it around and it'll fall down to the ground all nice and simply so I'm just gonna remove this one from our scene I'm gonna go look at my player here and you'll see we have a capsule Collider a rigidbody we actually have this sprite as a child of the main objecting to your sprite here and I've got a couple of other things set up for this character just to speed things up a little bit so we don't have to see them as we go one of which is a point at the bottom of the feast this will be what we use to check if we're on the ground and we also have this sphere here this sphere you can't see it in the scene view because it is currently hidden and what all this is doing is providing a shadow for our player so if I moved the player up in the air it basically little shadow mark on the ground very simple to do all you have to do is go to the sphere here and switch these cast shadows here to shadows only so if I just turn shadows off you'll see this sphere reappears in our scene but if I turn this to on or two sides of whatever you can see the sphere there but if I turn the shadows only there we go we get just the shadow below our players fees okay I've also got a couple of animations set up on this character so the sprite has a few animations for movement and I've won other flippin animation but we'll discuss that as we go through the projects so what we are concerned about is making this move around and making it look good so first thing we're gonna need to do is create a script to move this player so let's go into my folders I have scripts folder with a camera controller a nurse and I'm gonna go in here and create a new player controller script I'm gonna attach this to the player once it compiles into the system there we go now I can add it onto the player here and we'll open this up in Visual Studio and then here we're gonna need a couple of references to start off with so I want to move around using the rigidbody system so I'm going to create a public rigidbody and I'll just call the R be for the rigidbody then we're going to need to public floats one for movespeed and one for the jump force so that's gonna be how fast we move around and how much we jump up into the air and then I'm gonna need a way to keep track of the input that I'm pressing so I'm gonna create a private vector to that I'm gonna call move in push ok so then in my updates very simply to get our character moving around I can say I'm gonna set the move in puffs dot X to be equal to the input that get access horizontal so I'm gonna remove them side to side we're gonna use this horizontal input axis and when you want to move forward or back in the world we're going to use the move input dot y equals two input.getaxis vertical like so at the end and just to make sure that this movement we can add up in a weird situation where if you move to the left say and you move up that will give us a a movement to fast in a heart in a diagonal direction so to smooth that out we just say move in puffs - normalize so it basically means you have a good range of motion but not you won't go too fast in any particular direction okay so we're gonna apply this then to our rigid body and to do that we're gonna say the RB dot velocity equals a new vector tree and on the x-axis we're gonna say use the move input dot x x move speed and then on the y-axis rather than use and move input that Y because we're not moving and we don't want to move on the y axis because if we go back into unity here and look at the player if I drag this up on the y axis so if you see the numbers change here on the y axis when I drag it up that makes the player go up into the air what we want instead is to move the player backwards using the z axis so if I drag this back like this you can see the z axis is changing and that's the player moving back forward in the world so we want to apply the movie and put that Y to the z axis but obviously we have to deal with the y axis first so what do you want to access to do well we wanted to maintain whatever velocity it currently has so we'll just say keep it at the rigidbody velocity Y and then we'll say moving pulse dot y x move speed okay so save this let's jump back in and that should all work first just give them some movement stuff here so I'm gonna get this rigid body and drag that in there there we go move speed of ten and let's go with a jump force of 15 we haven't got any jumping working yet obviously but we had that place now if I press play oh I typed something wrong in the script here up there we go I put an extra bracket in there whoops let's go back in here when I press play there we go okay so we can with the character around obviously is not animate at the moment we'll deal with that shortly but we've got the movement going so now that we have movement going the next thing we want to do is make a player jump and to be able to jump we're first going to detect if we're on the ground so to the text if we're on the ground we're gonna do a raycast down to the ground so we're gonna check hey we're gonna shoot a line down to the ground from a certain point and if after a certain distance it hits the ground so obviously very short distance we're gonna say hey we're on the ground because the Ray was able to hit the ground so I'm gonna first of all create a public layer mask called what is ground and this will make sure that the Ray can only hit a certain layer so if I go back in here my player is on the default layer but this ground here if I can select this has the ground layer applied to it so I want to check for anything that is the ground layer so let's go back up here let's go back to our player so we're gonna set that up in a moment then we need to point from where our Ray is gonna shoot from and that's going to be the ground point that I had in the inspector a few moments ago so public transform ground point will call us and then we need to keep track of whether we're on the ground or not so I'm gonna say private pool is grounded okay so let's just save this and set these up first of all so do we know what they're doing so we've got water's ground here I'm gonna set this to be ground so we're gonna check for the ground and then ground checkpoint I'm gonna slash into here so this point in space here which is just a little bit above the ground you can see is that minus 0.75 whereas the player is 1 in the air so it's 0.25 basically above the ground so we're going to do a check from this that we're gonna make a check say about point 3 in length and make a shoot down to the ground and detect if we are on the ground okay so let's go back in here then and in our update loop we're gonna check if we're on the ground and how we'll do that is by saying we're gonna create a ray cast hiss called hiss and this is what that's what will store the information about whether it is any objects and then we can do an if statement and just check if we do a physics da-rae cast from the ground point dart position we need to tell us what direction it goes in so that's gonna be vector tree dust down sorbus just shooting a damn straight into the ground we're gonna say out hiss which means send the information from the Ray cast out into this object basically then we're gonna say how long we wanted to be and that's gonna be point tree like I said because that point is 0.25 above the ground and I may need to check what are we trying to look for well that's our what is ground variable so that's how we do a very simple ray cast and basically if this is true so if if it does the raycast and it finds something then we this will return true here so we'll say is grounders equals true else is grounders equals false so is either where you're underground or we're not based on this ray cast now and with that information then we can do a check and say if we do an input guess button down when we press the jump button and is grounded is true so if we're on the ground and we press the jump button then we need to shoot ourselves up in the air and how we do that is just by saying the rigidbody that velocity plus equals a new vector tree so we're just gonna add on 0 on the x axis but we're gonna add on the jump force on the y axis and also the 0 on the z axis okay save this and let's go back in here okay we'll play now with that I'll set up and I can move and I can jump so I can't jump in the air I can only jump when I'm on the ground okay so we've got our character here but of course at the moment we don't have any animations working so let's go ahead and start making the animations work for us or stop this running here if I go to the animator I have setup make sure I have my sprite here selected which has all the sprite animations attached if I go to my animator I see you can see I've got a few different animations set up just to player idle then the player running player jumping and we have the same for the player moving backwards we'll deal with just the normal movement sir first of all and then we'll get to the backward stuff but up here we've got some variables for the move speed as obviously how fast we're going whether we're on the ground or not and we have moving backwards variable which again we'll deal with that in just a moment but let's get our player animating is move on first of all so let's go back into our script will obviously need a reference to that animator so let's say public animator then I'm just gonna call Adam and then after we jump down here I'm gonna say Adam the set Bull on ground to be is grounded so on ground is the value I have here for determining whether we're on the ground in the animator and let's just test that out so I'm gonna save this go back in and once that compiles I can press play and a player when they jump in the air oh wait no I didn't assign the animator let's go to our player here and drag the sprite inside air which has the animator attached so now if I go ahead and press play this time if I jump there we go switches to the jump animation so let's make the walking animation work next and for this we're gonna say and we put this after the movement code is applied up here so we're gonna say Adam dot set flow for move speed and because we're moving on both an X and a z-axis or move them side to side and also forward and backwards in our scene we rather than just using whatever the x axis value is or the z axis value what we're actually gonna use is something called the rigidbody that velocity dot magnitude so magnitude basically tells us how fast the rigid body is moving and we essentially want to know that just so we know that we're either at zero or we're moving at whatever speed we have in the game so I can save this now we have move speed being sent out there we can go back in here let's turn on maximize here and when I play there we go now we have our character moving around but first thing we notice is that when we move to the left our character still looks like they're facing to the right so let's fix that we want to be able to flip how our character is facing and a very simple way to do that is on the sprite object here just to turn flip X on enough very easy to do so let's do that in our script then so to do that we'll obviously need a reference to the sprite renderer so we're gonna up here say public sprite renderer that will call the S or and then we're going to scroll down here and we're just going to do a simple check what we'll do is see first of all first of all hang on check if we are not already flipped so if the sprite renderer not flip X sorry if not the sprite renderer flip X so for now already flipped and our move input dot X is less than zero so basically if we're not flipped and we start moving in the left direction well then we need to flip the the value so the s our flip X equals true else if we are flips so the SR dot flip X so if we're already facing to the left and I move inputs now is greater than zero so we start pressing to the rice well in that case then the sprite renderer - flip X oops top flip X there we go should be equal to false so again let's save this we'll go back in and see this in action we should see our character move around a little bit better now so we'll play and we jump don't we didn't attach the sprite renderer so let's go to my player sprite renderer there we go okay go ahead and play again okay so we're moving left to race that looks a little bit better but we still don't have forward and backward movement now to be honest like having movement like this wouldn't be the craziest thing you see this in lots of games in general but specifically in the Paper Mario games we do get a backwards looking movement so let's set that to working like I said before I do have an animation already setup for this if you go to player run backwards for example if I play this there we go we have a walking backwards so let's go and make that happen now so back in our script first thing we're gonna need is a value to store whether we're moving backwards or not so I'm gonna have a private bool moving backwards and then we'll scroll down and after this bit I'm gonna do a check and see okay if we're not already moving backwards and similar to what we did with the flipping and we do move in push dot y is greater than zero so we're moving backwards in the scene well then moving backwards equals true and then we'll do another else if we are moving backwards already and our move input dot y is less than zero in that case then we are moving forward so moving backwards equals false so we're moving backward forwards into the scene and I'm gonna send this animation I'm sorry we send this information else to the animator look at our animator I have a moving backwards value set up here which is just be either true or false and that will make us switch these animations in that situation so what I need to do then is just after we have set whether it's true or false will tell the animator to set the bool value of moving backwards to be whatever the moving backwards value is okay so save this very very simple as you can see you can go back in let this compile and now when I press play we should see when I walk forward it's fine and when I walk backwards there we go we can see our player moving around correctly okay so that's most of the basics of this system working but one really cool and interesting thing that the Paper Mario games do is that when you change direction or when you move them back and forward or anything like that the character flips it around in the in the game so the sprites kind of spins around on itself so we can do that very very simply so I'm going to stop this running here so we had all these animations on the sprite object of our player so we have the sprite renderer here and then on the player object here I have another animator setup that just has two animations I have player static and player flip so player static is obviously just the normal animation of our character here or sorry the normal no animation is happening our player is just staying still but if I switch to player sorry that's player step if I'm player static there we go there's no animation but if I go to player flip here if I just play this you can see this is just an animation that spins the character around so what we want to do is make this animation play essentially any time that we switch directions or start moving backwards or forwards so it's a very very simple thing to do and an example of how you don't have to control everything to code sometimes it's better to use animators to control this kind of stuff so what I've done then in the animator over here is set up a trigger value that will make it go at any time to the player flip animation so we have our flip trigger here so let's make that flip trigger be activated and if we go back into our script here we're gonna need a reference to that animation because obviously this is not just the same animator we have here so we're gonna have a public animator again call called flip Adam and we need to set this to happen whenever we change direction or start moving backwards so we already know that this is what we're using to flip when we change direction so in here we can say whenever we're changing the flip value we can also say on the flip animator - sess trigger the trigger we want to set is and you check the name of this back in here is just flip there we go with a capital F so we're gonna set the flip trigger to activate so I'm gonna copy this then this is obviously gonna happen also when we set the flip X to be false and then we also want this to happen whenever we set moving backwards or forwards in our scene so whenever I set the moving backwards value I'm going to apply it here so we save this and let's go back into unity I'm gonna let this compile and there we go okay so I'll switch over to my game view here and I'm going to make sure I hook that up on my player so I'm gonna drag this animator into the flip Adam slash and I'm gonna go ahead and press play and now whenever I flip around we get this nice spinning animation and obviously if you find that the spin is a little bit slow for you or a little bit fast or whatever you can go ahead and adjust the animation so very simply I could go to the animation here for the player flip because he at the moment it does take this whole end of time and I could shorten this down a good bit so I can go we like this and now if I do this again all right flip is a little bit faster but I personally like it at this kind of length obviously obviously I signed up this way so this is this is the length I like it asked so I can go ahead and play and we've got this cool little flipping effect whenever we change our directions and there you go that's it that's how we can create the paper style of 2.5 the movement in unity it's a lot of fun to do it actually feels quite a lot of fun to play I kind of wish this environment had some collisions attached to it so I could navigate around it a little bit more but that's okay it's a pretty cool environment that is available for free from the asset store and obviously we're using some canny assets for the characters as well customized a little bit but there we go very easy to do and absolutely worth trying out for yourself and trying to just to see how fun it can be so thanks for watching this video don't forget to go and wish the scoot kaboom on Steam again the link is down in the description down below and you can check that out and be super awesome I'll be back soon with more tutorial goodness keep being awesome keep making amazing games and most importantly keep sharing them here on the channel and on our community discord group that you can find again linked in the description down below so keep being awesome and I'll see you all very soon

Channel: gamesplusjames

Views: 64,387

Keywords: unity, unity tutorial, learn unity, unity games, unity school, unity beginners, learn to code, unity c#, c#

Id: 6obBCWLH1GI

Length: 22min 51sec (1371 seconds)

Published: Thu Jun 04 2020