Make a 2D RPG Player Controller in Godot 2022 | Christopher Navarre | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Make a 2D RPG Player Controller in Godot 2022

teacher avatar Christopher Navarre, Software Instructor

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

8 Lessons (1h 30m)
    • 1. Introduction

      1:17
    • 2. 1 Import Art & Project Setup

      10:21
    • 3. 2 Character Animations

      13:22
    • 4. 3 Player Movement Script

      21:43
    • 5. 4 Player State Machine

      14:08
    • 6. 5 Object Collisions

      16:51
    • 7. 6 Follow Camera

      8:02
    • 8. 7 More Props and Map Building

      4:27
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

23

Students

--

Projects

About This Class

This is a starting place for anyone looking to program their own 2D game character and environments. What we are trying to setup is a top-down pixel art style RPG common to old school game platforms. This will be part of a larger series and this part focuses on movement, cameras, and collisions for your player character and objects in the scene. In these videos, we will be covering other Godot basics like scene hierarchies, inheritance in scripting, and editing project settings to change import settings.

  • Basics of Godot like understanding scenes, setting up your player input keys, and resizing the game window
  • Controlling animation state machine to pick movement animations and directions for your player
  • Adding in game objects and handling basic collisions
  • Setting up different animations for your player character based on sprite sheets
  • Basics of state machines and the idea of changing between different modes for your characters
  • Utilizing a follow camera to follow your player wherever it goes but staying within the limits of your game maps

Course Series on Building a Top Down 2D Godot RPG

Utilized art in this course (but you can use whichever you wish) https://bakudas.itch.io/generic-rpg-pack

Meet Your Teacher

Teacher Profile Image

Christopher Navarre

Software Instructor

Teacher

My philosophy in information technology and learning in general is that video learning is the best way to learn for yourself. I can provide the videos but it's up to you as my student to absorb and practice the information to become a more educated and skilled person.

If you want to get a taste of my approach to education and tutorial series, you can find me on my YouTube tutorial channel Chris' Tutorials.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: In this series of videos, we're going to be creating a simple 2D top-down player controller where we can have a character move around on our screen in a simple map that we created. So if we go ahead and hit Play, you'll be able to see a little bit of what's going on. So we have our world open up. Our character can run around and collide with objects. And you'll also notice that there is a follow camera attached to the player. And if we go around the edges of the map, you can also see that there are limits both in where our player can go and in where the camera can look at. So that aspect of these videos is just simple collisions. As you can see on this map, there are these collisions shapes that we attach to the different objects who are directly onto our game map. And that's basically what we're going to be looking at in this short series of videos. So by the end, this should be what you end up with. And this is all just going to be Part 1 of a larger series I'm going to be creating for making a 2D top-down RPG in Godel. But of course, since that's a huge topic to cover, I just wanted to start this course off with getting the player controller working and getting simple collisions in the camera to work as well. So if you want to get started with those basics of Godot, then I hope to see you in the first videos for this course. 2. 1 Import Art & Project Setup: So in this video, we're going to be setting up our projects so that we can start building a 2D RPG. Before we get started with creating a new project, we're going to need to get some assets. So a good pack we can use for this course is this generic RPG pack, which you can get over at backwardness, dot shot io slash generic dash, RPG dash pack. I'm going to put a link to this in the video slash course description so you can find it and download it for yourself. That's what I'm going to be using, but feel free to use whatever you want. So once you have this downloaded, go back over to Godel. And by the way, if you didn't know, this was the first one that you're going to see when you launch Godel. So if you don't already have a project created, you can go over to new project and create one by giving it a name and a location on your computer. So I'm going to be using this OpenGL ES 2 renderer just in case for any reason, there's some compatibility issues since we're just dealing with pixel art, the graphic should be pretty simplistic and we don't really need these extra features. So I already have the project created. So I'm going to just jump into it here by double-clicking. Okay, so in kiddo, you will see the file system in the bottom left-hand corner. So this Resources folder or ES colon slash slash, this basically is going to be for to the folder which you created your project and, and everything is going to be referenced from this point. So if you want a file to be used on your project, it should be located inside of that folder and brought in here to the file system of the project. So if you use Finder or Windows File Explorer, depending on your OS, you can go ahead and locate those files which we downloaded. So it came as a zip and I've extracted it into this folder over here. So we're going to need the contents of this RPG pack. And I like to organize my assets into a folder called art. So in kudos file system, I'm going to right-click on this resources root of our project. And I'm going to choose New Folder. And I will call this art. So anything that is a graphical, our asset related, such as characters, backgrounds, tiles, or maybe UI elements. I'm probably going to be just putting that into this art folder. Now before I actually bring the assets over into the project, I wanted to change the default import settings, since in this back, everything is Pixar. We want to have pixel settings and our Godot project. So a quick way that we can just go ahead and set that is to go over to the import tab. And I'm going to select the default could DO icon. So that will open up of these import settings. So these settings that we see here are specific to the icon dot PNG. So I'm going to change the preset from whatever its own right now to 2D pixel. And you'll notice one of the key changes is that filter is turned off. So we're going to lose the anti-aliasing effect on images. We bring into the project with these pixel art settings, which is what we actually want when we're looking at really low resolution pixel, you don't want blurriness between the pixels. Every pixel should be crisp. So once I set that here, I can go to presets and then I can choose Set as Default for texture. So basically any image is going to be a texture and our project, and it's going to use these settings by default, and that's what we want. Now we don't really need to re-import this icon dot PNG. We don't need to change the settings for that. That's just a place holder icon and a project and we won't really be using it. But now that we've created the presets, we can bring in our art. And any art that gets converted into a texture is going to automatically use their settings. So in Finder, I'm going to grab this RPG pack and I'm going to drag this and I'm going to drop this right on the art folder. So now to make sure that our Assets import into the right folder so that we don't need to move its directory and have everything re-import. Again, I'm going to right-click on our art folder and I'm going to choose open and file manager. So this opens up the art folder. Now we have the RPG pack over here. I'm just going to select this. Do a command C for copy or Control C if you're on Windows. And I'm gonna go over here and do Command V and paste a copy of that RPG pack. Now if we click back on our project, you'll see that the RPG impact and ports here after a few seconds. And we have the image files for UI elements, characters in the game, mobs. We can use props and decorations and other assorted useful assets. So that's where the bulk of our art is going to be stored. Okay, So there's gonna be a few other settings that we want to get going before we really start working on the project. Let's switch over to 2D view at the middle top. Obviously we're not making a 3D game here, so we're just going to be editing everything in 2D view. Kiddo can do both, but we're creating a 2D game here. So now just to kind of test how it's going to look when we run our game. Let's go ahead and drag the icon dot PNG into here. And that will just create a little Sprite icon in our. And then this would just create a scene with a Sprite icon located about here. By default, the camera is going to be down and to the right. So now we can go ahead and hit the play button on our project. Okay, So now to save what we have right here, which is just a sprite, which is just a sprite node as a scene that we can test and then open that up in the game. Let's save this first so you can do Control Command S. And I'm just going to call this test.txt, NOT SCN is a scene file. A scene can be just about anything composed of nodes and you get 0 game that could be a map. It could also be a character that you want to create many copies from a template. So seeing could be a game object of sorts. It could also be a map, or it could be UI elements and many other things. So let's save this in the project test.txt. And now that we have this test scene file, we can go to the top right-hand corner where we have placing over here. And I'm going to click that. And this scene is going to open up in a window and run. So by default, this is our game window. If we didn't change anything else, this would be basically how our game would run in windowed mode at this resolution. So this might seem okay with a icon like the built on Godot icon. But if we drag in some character art, Let's go ahead and drill down here. So characters. Let's grab this hack guy. Heck, I dot PNG. I'm going to drag him and drop him in here. So this will create another sprite node as a child to our parent node. So these two combined are going to be our scene now. But if I zoom in, control middle mouse wheel and go ahead and zoom in here you can see that this character, as well as mini Pixar characters are actually really, really tiny. So I'm going to save this scene again. I'm going to run it one more time. And then you're going to see that with a window this size, It's almost going to be impossible to see our characters if this was the size of a main character. So we need to change our Windows settings before we really move forward with this project. So now to change the size of our window for the game, I'm going to go up to the project menu in the top left and choose Project Settings. So here we are going to be searching for a set of options that fall under Window on this menu down here. So you can either scroll down and try to find it or even easier, you can use this search function. And I'm going to be searching for window. So that will filter our options down to where it says display and window. Then you can click on that and you're going to see all of these settings over here. So for width and height, this should be the reference size for our game. As you can see, when 1024 pixels by 600 pixels was too much for a pixel art game really, when you factor in that, each character is only something like 16 pixels wide and 24 pixels high, maybe double that. But either way, it's pretty big for what you're dealing with. So I like to change the width and height to something more appropriate, like 480 by 270 if you want to keep that 16 by 9 screen ratio. And then you can scale it up to a test width and height. So if we had a 480 by 270 pixel window on a monitor, their size, it would look really tiny on the screen it went, it would be nigh on playable. So we want to scale that up depending on our device size. So the test width and test height, I'm going to change that to 1920 by 180. Hit Enter. So this is four times the width and four times the height. Is that much more appropriate. And in order to make sure that it will actually stretch, we can scroll down here to the bottom where it says stretch and change mode to 2D. And I would like to keep the aspect ratio just at 16 by nine regardless of the size of our window. So I'm going to change aspect from ignore to keep. This one is optional and depends on what you'd like. So I'm going to close this and now we can save our scene one more time. Go ahead and run it in the top right. So now the window is going to be much larger, but now our characters are going to appear drastically increased in size because we're scaling our window four times. So this is now rendering at something like a 64 pixel by 64 pixel character, or a little bit taller than that. But you get the idea. And so before we close out of this test window, I do want to 0.1 thing out, so I did not re-import the icon with the filter off. So we don't have filter turned off for your textures. It's going to look like this, where you get blurriness around the edges if it's a low resolution texture. But you can see that this pixel art character, which is imported with the proper settings, has crisp pixels. And that is a really huge thing. You definitely want the filter off if you're working on a pixel again. So let's go ahead and close this window. So now at this point we've brought the art in. We've made sure that the textures are imported with a Pixar settings. And we've changed our window size to be more appropriate for this style of game. 3. 2 Character Animations: So in this video, we're going to be creating a player character and we're going to be setting up the run animation for that character as well. So in order to start creating a scene for our character, we can use the Scene window over on the top-left and sort of choosing 2D scene, which is, I believe just going to give us a node 2D like this. I'll go ahead and delete that now so we can restart. We want to go to other node because we want a specific type of 2D scene called a kinematic body 2D. So I'm going to click on other node and then you can search up here in this bar kinematic, so that you can drill down to kinematic body 2D can medic body is for 3D games. Anytime you see a red icon with these nodes that's talking about 3D games. So blue is for 2D. And we want to use that as our base. The reason we're using the kinematic body is so that we can move the character directly with a script. So rather than having various forces apply to a physics body and then have the calculation be made automatically with the game engine. With a kinematic body 2D, you have to kinda manually tell it how many pixels it's going to move in what direction. And that actually gives you a lock. There is usually more appropriate for these kind of 2D pixel art style RPGs. So kinematic body is probably what you want. So moving on from there, we need a sprite node in order to display our character. So I'm going to right-click here at a child node and we want to find the sprite node. So I'm gonna type in the search sprite. And we want the 2D sprite, not the sprite 3D for 3D game. So at this end, and now this is in the hierarchy for the scene. We're going to rename our kinematic body 2D to player. So I'm going to right-click it, choose Rename, and then type in player. We can go ahead and save this scene as well. So I'm going to use Control or Command S, and we'll save it in a new folder. I'll call it characters. So photo at the top right, and then we type in characters. Hit, Okay? And we can save our player dot TSC and seen inside of here. So we don't have anything displaying for our player yet because we need to add a PNG image to the sprite. So if we click on the sprite node, if you ever run into this where it's just not showing stuff, you can quickly we open the same. So I'm going to close player, Let's open characters and then play it out to asean. And now if we click on Sprite, there we go, We can see all the properties. So we need to add a image to the texture box here. So we're going to use gave Idle run dot PNG, which includes the frame for idling and the six frames for the running animation as well. And in the last video, we brought this in under art so you can drill down to this find gave idle VM and then just drag this over to texture. So when we do that, you may need to zoom in a little bit. And you can do that with Control middle mouse wheel to zoom in and out. We can see all the frames of this animation, but we only want to show one at a time. And now in the animation sub menu, we can tell our sprite how many columns there are in the sprite sheet and how many rows. So we can count columns 1, 2, 3, 4, 5, 6, 7, and rows should obviously be one here. So for h frames, we're going to put the columns seven and then V frames we leave at one. And this should cut the sprite sheet for our animations perfectly. Now if we need to change the frame depending on the animation, we can just use this frame property, increase it or decrease it position wherever you want. So for the idle animation, that's just going to be frame 0. But we need to create a Animation player so that we can create animations that you can switch between. So we're going to right-click on the player root node. And then we're going to add a child node again. And this time we're looking for animation players. So at the top, you can search for animation. And then it'll give you three options. We want this animation player here. Later, we'll need a animation tree as well. But let's just work with animation player for right now. So I'm gonna double-click that. And if it's not open already, there should be this animation window at the bottom that you can click into. And in that it's going to be mostly blank. But there is this button for animation. So if you want to create a new animation for your character, you click on the animation button and you choose a new. So we'll start by creating the idle animation. So I'm just going to call this idol and hit OK. So now we can click on Sprite. And what you'll see is that there are these keyframe buttons that appear now. And you can just click on where it says frame 0 and then the keyframe key. And when you do that, it's going to ask you to create new track for property frame and insert key. We want to do that, but you do want to insert a track, basically a property that we can change across time for our character. And that track is just going to have the frame on it. So create and we see frame 0 pops in here. You may notice that the character has already shifted to frame 1 when you create keyframes or you click on this keyframe button for the frame property, it's going to automatically increment the frames so that it can jump forward. And you can just keep adding in frames by clicking on this bunch of times. But for this idle animation, we don't need to do that. We will do that for the run animation. So what we have to do left with EIDL. First off, over here, if you see a solid white line, you need to change that. So click on the drop-down menu and make sure it's indiscreet mode, which is usually what you want for your pixel art character animations. So the other thing you need to do for now is just to turn on animation and looping. This just ensures that when the animation gets to the end, it doesn't stop playing entirely. Since our characters just going to be sitting there with this one frame of animation. And we can hit play and just test it as not really going to make any difference here. But in the future, you might make a idle animation that actually has multiple frames of animation. So I think it's better to just that enabled and advance anyway. So next we need to create a run animation. So click on animation one more time and choose new. And we can call this R1. So I'm going to do that and hit Okay. Now we need to click on our sprite and then find the first frame of the animation. So frame 0 is idling. This frame doesn't have any part to do with the run animation. So let's increase this to one and we can see the first frame of our animation. So just like before, I'm going to click on the keyframe button. And when it says create new track for property frame and answer key and we're going to hit create of course. But this time it's going to shift to frame to automatically character updates at frame two. We don't want to put frame two at 0 seconds here, so we can go to the next snap interval. And that set down here 0.1 seconds. So if you want to change your frame every 0.1 seconds, then that's what you want for the snapping. You can see I can only select increments of 0.1. You need your animation to be faster than that. You could change the snap to 0.05 seconds. That would allow you to have 20 frames of animation changing across a 1 second animation might be preferable depending on how fast your animation is supposed to be it. For. Now, let's just keep it at 0.1 and I'm going to see increase the frame to two and then position it is 0.1. Now we can click on the keyframe button again. Now it's going to increment a three and it's going to jump our position to 0.2. So that's actually exactly what we want for the settings. So when you have your frames in a sequence like this, it becomes very easy to just keep clicking on the keyframe button and add in the next frames of the animation. So now i on four at 0.3 seconds, I'm going to click it again one more time for frame five and then one more time for framed sex. So this is now all of our frames of animation and we want them each currently to play at 0.1 seconds and then change to a new frame. You can see that with a default animation, it lasts 1 second. So after we change at 2.5th end, it's going to stick on that frame until it loops around. We don't even have a looping enabled. Yup. So if we want it to look correct, because each frame should be 0.12, we should change the duration over here on the right, from 0, from one to 0.6 hit Enter. And now the duration should look more even here. And then enable looping. And once again, make sure it's not an continuous but discrete rather. So if we do that and we have play, which I will do now, we can see our animation and looping properly. So now let's create a quick test scene which will put a copy of our player into and then test it playing the idle animation and also test it playing the run animation inside the actual game. Once we load, Let's create a new scene. In the top-left, I'm going to click on the Scene drop-down menu and choose new scene. And we are going to create a standard 2D scene here. So this is just a 2D node as the root. And I'm going to rename this to test map. And then in this test map we're going to drop in our player dot TSC and C. So I'm just going to drag this from the file system and position it right about down into the bite so that it shows on our default camera. So now I can save this scene as a new map. So I'm gonna do Command or Control S, and we'll go up one directory. We don't want to save this in characters. I'll create a new folder. And the top-right, I'm going to call it maps. So this will be where we store all of our levels. I'm going to hit Okay, and then we're going to save test map.get asean inside of here. So this test map is just basically nothing except for a root node and a player. But later we could add enemies or tile Maps or the like to this node. And you can see that by bringing in other scenes, just dragging and dropping or adding them as children, we can instantiate a bunch of objects that we've created in other scenes into this main sink. Okay, so now I'm going to click on the player scene. And let's make it set so that when we load the game, it's going to be playing the idle animation by default. So for our player, There's multiple ways of controlling which animation is going to be playing at any given time. But one really handy tool to do that is a animation tree. So I'm going to right-click on our player, add a new child node. And this time we're adding in the animation tree. So I'm going to click that and then hit Create. Now you'll notice that there is this exclamation sign over here that says that you have to set a Animation player containing the animations. So the player has all the animations and actually plays the animation for your sprite. But the animation tree helps you pick out which animation the animation player should be playing at any given time. So on the right, there's this property and I'm player representing animation player, we click on Assign and then we can choose an animation player from our root nodes, list of nodes. So I'm going to choose Animation player. You can double-click it. But we still have a exclamation mark because we haven't set a root animation Note. So on the right, we can do that over here as well. So in this mini series, we're going to be using a state machine as our root node. So we'll get into more details about what that entails later. But for now, just choose Animation node state machine. And then you'll get this new state machine graph down here. So in here, we can add in the animations we may want to play. And we can do that by right-clicking on the graph and doing add animation idle. And we can right-click and do Add animation. So for right now, I'm just going to set the animation we want to play when our test map loads to autoplay. So I'm going to select idle and we can click on auto play this animation on Start, reset or seek to 0. So now that I had always been set as the autoplay, this should be the entry animation when our game starts, however, our animation tree is still set to inactive. You can see down here animation tree is inactive, so we want to click on animation tree. And in the properties you can see active over here. So check that. And now you'll see where we have idle animation in our state machine. It's actually auto playing the animation right now. So now save your character and let's go back to the test map and hit Play the same in the top right. So we should see the character isn't moving or anything. It's just playing the idle animation. So let's close that out. Let's go to our player, basing, click on animation tree. And this time, let's click on the run and choose auto play this animation on start. So you'll see that right now it's technically still playing the idle animation, but when our game starts, it should be playing this animation. So save this scene again, the play or sing, go to test map. And here we can already see that it's kinda switched to the run animation. But to verify that we can get the placing button and the top-right. And when our game starts, we're going to have that run animation. And so in the next video, we'll need to set up a script so that we can control when our character should switch between idle and run animation based on if the character is moving. And we can also add in character movements so that it can go across the screen if we press up, down, left, right, or WASD, depending on what kind of controller scheme you like. 4. 3 Player Movement Script: So in this video, we're going to take care of writing a basic player script to allow our player to move around the screen using WASD keys. Or if you prefer, you can use up, down, left, right arrows. So when you want to attach a script to a node, you can select that node. So here we have the player seeing opened up so you can access that in the file system if you don't have it open already, just double-click on it. Have it open here. And then you can right-click on the node that you want to attach a script to. Each node can have their own script and then choose attached script. So when you do this, it will default in the name of the script to the name of the node. So we named this kinematic body 2D player. So that's why we get player dot-dot-dot. And it will save in the same folder that that scene is located so conveniently, so we'll pop the GD script into the same folder as the scene up here, you can see that it inherits from Kinematic body 2D, meaning that anything a kinematic body 2D can do in this script, you'll also be able to do, since the script is of that type, just an extension on top of it. So let's go ahead and create this script, and the script editor will open. So in this script, we're going to need to do a few things. First is to check the endpoints of the player to get what direction that the character should be moving in. Second is to set up some variables for determining movement speed and the velocity of the player. And we'll also need to run a function called move-in slide, which comes from the kinematic body TD, allowing the character to actually perform the movement and between frames move around the screen and to also be affected by any collisions that the player may run into with other objects in your game. So let's start by deleting everything in here except the extends kinematic body 2D. And then we're going to write FUN see for function. And then space underscore physics process. And then the parameter over here on the right is delta. So you can just auto complete this by left clicking on that. This is what the first line should look like. So at the physics process is when you are going to be doing any kind of function that involves collisions like movement on the screen. You should run it in here. And then this function will run a set number of times per second. So every time it runs, you can update your character's position. This delta parameter represents the time between frames, so that's Delta times. So if there's any difference in the time between one frame, how long it took for it to occur in the next frame, you can use delta to adjust for that so that your character's movement smooth across time. However, the movement slight function we're going to be using over the accounts for delta. So we may not actually need that at the moment. So the first thing we need to get, as I mentioned, is the characters and specifically the up-down, left-right movement. So we can declare a variable here to store whatever the input is from the player. So I'm going to write down here variable and put, and maybe I'll do underscore x y, since this is just x y movement. And we're going to set this equal to another function that wall, right? So I will call this function get layer, movement and quote, and then you just add the parentheses at the end to represent that this is calling the function. So we need to create this function down here. I'm going to run it as function, get player movement, and put parentheses. So this one has no parameters at the moment. And then we can detail what this function's going to do. So the reason why we're creating a, another function to be run inside of the physics process is just that if for any reason we ever need to get the same information again, we won't have to write out all of the code that exists in here. We'll just be able to call this and get the same information every time we need it. So it's a re-usability thing and also it helps make this physics process a little bit shorter. It could get really, really long. But if you pick five lines into just one, it becomes a little easier to read and understand. So inside, Get Player movement input, I'm going to create another variable, and I'll call this variable input vector. And this is going to be equal to a vector two. So when you create a vector to it needs two parameters, the x and y. X is horizontal movement going left and right. And then the y is going to be vertical movement going up and down. So when we add the left parenthesis, it's going to kind of give you a hint on what you need here. So the x parameter is a float as a number with a decimal, and then the y is also a float. So what I will do here is hit enter a couple times, breaking the left and right perimeter. And then on these two lines will have the X input right here, and then the y input on another line. So to get the x input, we're going to need to first access the input built into Godel. We don't have to create this input objects, so input and the IS capital. And then we need to run the function on it, get action strengths. So the action we're going to get is either going to be one of the default actions. You can see UI down, UI, left, right, and up. Or we can create our own actions that the player can. That are separate from these. And you may actually want them to be separate, because if you have a UI button, that might not always be the same one that you want to have to press for moving around a character. So let's show how to create custom actions right now. If we go to the project menu in the top left, we can go down to Project Settings and then input map. So an input map, you can see the default actions. These are all built-in and you'll notice that you can't actually delete the actions, but you can't remove the keys that are assigned to them. So the difference between an action and keypress is that a action can have multiple keys assigned to it. So you can see the UI except action can be either enter on the keyboard, KP, enter, whatever that is, the spacebar, or a button on. Let's see, an Xbox or Nintendo controller. So there's many different ways to perform the same action depending on what your players input device is currently. So let's add a left, right, up and down for normal movement rather than the UI left or right, up or down. So if we go to the top action, let's type in left and then hit Enter. So that creates a new action down here. This is a custom ones, so you can see that you can actually delete these if you no longer need them. Let's add in, right, and hit Enter up and hit Enter and then down and hit Enter. So now we have four new actions created, but we need to assign at least one key to them in order for our player to be able to use it in any meaningful way. So let's go press this plus button next to the delete icon. And we're going to add a key for left. So I like WASD controls. So that means W for up, a for lauft, es fur down and D on the keyboard, pretty standard. So for left, I'm going to press a and then assign that to the left action. So in our game, whenever the player presses a down, it's going to be triggering the left action. Let's add a key for right. So we're going to make that D, add a key for up, we're going to make that W and then add a key for down and press S. So these actions currently only have one input method here. So later on, you may want to add extra devices. And but since we're just focusing on the PC right now, that should be all we need for right now. So I'm going to hit Close. And now when we do this, input dot get action strength. If we put the quotation marks, which is going to show all of the actions we have setup in the game. You can see down left, right. And if we scroll down, up should also be there as well now. So now we just need to figure out which keys should be going into the x input. So x is left and right. So we need to have kind of a relation between the right key and the left key. So if you think of your 2D screen as a grid, right is going to be positive numbers, left is going to be negative numbers, just like every math class ever. And so if you want to figure out what the final value should be, right, as positive. So you want to take the positive value of right, butt, left as negative. So you want to subtract the left input if there is any. So input.txt action strength right, is going to be our first input. So if the character presses right down on the keyboard, this will end up being either one or 0. So if the player presses the right action on the keyboard or D, as it's setup right now, it's going to be one. And if they are not pressing D down, it's going to come out 0. So if we subtract now input dot git action strength, and then we use the left action. So the quotations make this a string. So basically it's the name of the action here. Then this will be one or 0, this will be one or 0. So if the players pressing left down on the keyboard, That's still positive one value for the action strength, but we want to subtract that because left is negative on a x-y grid. So basically what this means is if you're pressing right and left down at the same time, the character is not going to move because these two are going to cancel each other out. And if you're only pressing left down, the character will end up moving to the left. Once we use these values in a calculation. And if we're only pressing right down, then the character will move to the right. Since as I keep mentioning, that is the positive direction for the x-axis. So we need a comma here at the end, because now we need to set the Y parameter. So this will be up-down movement. So very similar here, we need to do input detection. So this time it's a little bit counter-intuitive because down is actually positive y on the y-axis. And then up is negative, if I'm remembering correctly. So we want to have down be the positive value here. And then we want to subtract the up axis. So input dot get action strength. And then this is up over here. So if we press up, we're going to be going negative on the y-axis, which is actually a negative value. And then if we are pressing down, we're going to go down because Down is positive when you're talking about the y-axis and 2D movement. So once we have this vector calculated, we can just return that so that we can use it wherever we need it. So I'm gonna return input vector. And then that's going to be our function as it's written right now. Okay, So the next thing we need to do is to take this input and multiply it by some kind of movement speed. So if we just use the Import and assign that to move and slide, a vector value of 11 would be incredibly slow on the screen since everything is measured in pixels. So we need some kind of multiplier and movement speed. So up here at the top, we can declare a variable that we can also adjust in the editor whenever we want to customize the outside of the script. So to do that, to create a variable that we can click on our player and c over here, just adjusted in this Inspector, we want to use the keyword export here. And then we need to give it a type. So we are going to use float for the movement speed, a number with a decimal point. We have to put var here because it is a variable. And then I guess we'll just do move speed for right now. And then we can set a default value for this. So I'm going to set the default, let's say 100. We can always change that if our character is moving too fast. So with this line written, if we click on player, you can see the move speed variable can actually be customized right here. So if you want to increase the movement speed of your character, you can just go over here, change it to 50. And that's going to, in a sense, update the value here That's actually going to be used in your script. So export variables are a really helpful, especially if anyone's working on the game who might not necessarily understand code as much. So I'm going to reset the movement speed over here to a 100, but clicking on this little reset to defaults button. Now let's go back into the script. So to keep it really simple right now, we're going to end the move and slide Function, and we're going to take the input and we're going to multiply it by the move speed. So our input x, y is our direction. And then the move speed is kind of like our magnitude. How much we want to move in whatever direction that the player is trying to move in. So move and slide. And then we need a velocity vector here. So we can calculate that with input x, y, our direction times move speed, our magnitude. And then we just save the script, and that's all we're going to need. So as I mentioned, we don't actually need to use the delta with the move and slide function because moving slide automatically calculates with a delta n mind. So the Delta, you would use that to keep consistency between your frames. The player should only move an amount on the screen based on how long there was between the frames. So if it took five seconds for some reason to render a frame, then you would want the character to move five times as much during that frame. Then if the frame took 1 second to render. Now of course, with these games, you're going to be talking more like 60 frames per seconds. But as I mentioned, it's already accounted for here. So this is pretty much all we're going to need just to move the character around on the screen a little bit. So let's go to the test sane. I'm going to open up the test map, which is really just a node with our player object attached here and instance of the object attached it. Actually. And let's go ahead and hit the Play button. So as I mentioned before, we may WASD our controls. So if I use WASD, you can see our character is moving around the screen. Now note, if I press up, even though we made it subtract up, because up is negative. Pressing up when it's subtracted makes our character move up on the screen. So if for some reason you see that your movement is inverted, then just swap the positions of your movement with your down movement. So WSSE, there you go. Really basic movement there. But we can expand upon that in many ways, since obviously that's really simplest. One is that regardless of which direction the player is trying to move in, it keeps facing right With that run animation. So what we can do is flip the sprites direction based on what direction the player is moving in. So let's go into the script and let's get access to that sprite. So if we click on Sprite, you can see, if I go, let's see upset. There's this property flip horizontal. So if we turn this on and off, That's how we can control which direction the player's gonna move. Even though we only have one run animation, we can just flip it to the other direction and then it will look like the player is running to the left. So let's get access to that. And the player script. How we can do that is a ready var. So I'm going to type them on routing, which means that when the script loads, something is going to happen, which is what's going to be after the equal sign. So unready var, since this is a variable and I'm going to call it sprite to keep it consistent with the naming in our hierarchy. And we're going to set this equal to dollar sign and then the name of the node and our hierarchy. So notice when we put the dollar sign of the nodes attached to this player, show up here and we can select them. Really easily here, so we want dollar signs sprite. What this means is that when the script loads, this sprite variable is going to be assigned a reference to this exact sprite node and the tree. So if you ever changed the name of the sprite node, you do need to update it here and your script, or you would run into problems because it's looking for the child node called sprite. That is specifically a child of the player object over here. So we have access to this, right? So now we can assign the properties of the sprite when we need to. So we could either flip the direction of the sprite based on the input or based on the velocity. And we can know the velocity because move and slide returns the velocity, which is basically the speed and the direction that the character is currently moving it. So if we declare a variable up here, I'll just call it foreign velocity. And I'm going to give the hint that it is a type of vector two. And you do that by adding a colon and then vector 2. Now I don't believe that this forces it to be a vector to type, but it tells you what you should expect this to be set as. So having these kind of helpful in writing your scripts. Okay, so now whenever movement slide returns, it returns a velocity. So we can just set our velocity on the script to whatever movements sliders. So now anytime we need to reference the current speed and direction of the player, we just use this variable to get that information. So after the character moves in slides, it returns a velocity. We know what direction the characters moving in. So we can flip based on that direction. So if velocity dot x and velocity is a vector two and left to right is x axis. So we need to check the x property. That's what's important here. So if the X value is greater than 0, okay, colon, actually, when you're using if statements, then our flip, sorry, our sprite dot flip h is going to be set to false since our character by default is facing the right, we don't want to flip it when it's already facing the right, so it's going to be false, they're else. Else. If so, you do EL For else and then IF has to be typed exactly like that. And then we're gonna do velocity dot x is less than 0, then we do want to flip because the character is currently moving to the left. So a sprite dot flip h equals true. Now the reason why I'm not including if the velocity x is 0 to flip is because if the character is not moving at all, I just wanted to face the direction that it was moving previously. So basically if the character starts idling, we don't want to flip the direction to either left or right. So it's also possible with your movement scripts that you would be creating different variations of movement. And depending on the state of the character, whether it's during an attack or moving, that you might create totally separate move functions to go into this physics process. And then in some of them you may call this information, and then in some of them you may not. So we could actually just think a step forward and put this in its own function to flip the sprite based on the current velocity. So let's create a function down here. Function. Let's say functions set flip direction. And this is going to take the velocity, which we know should be a vector two. And then we just take this information, caught it. So Command or Control X, go down to the set flip function and then Command or Control V to paste it in. Make sure your indentation is correct. And now whenever we want to call this, we just do set flip direction based on the velocity. Now, technically speaking, what happens here is that because we didn't declare a local variable when this velocity gets set, it's talking about this velocity, and this is also using that velocity over there as well. When our function runs, this velocity is going to use the local velocity which came in as a parameter. So this will all work just fine. But currently it's a little bit confusing. So I think I'm actually just going to cut away this far velocity for a second. And then I'm just going to take the velocity we get back from moving slide and declare it as a local variable by setting VD here. So this will make it maybe a little bit more clear that we're taking this velocity and we're passing it into this function over here. If you ever need to access the velocity outside of the physics process function though, you could go ahead and declare it as a script level variable up here again. But for right now I don't really see the need. So we'll just use set flip direction based on the velocity. Let's go back to our test map 2D view, and let's run the game one more time. Okay, so if I press right, we're going to face the right. If we press Left, I don't look at that. Our character flips to the left. And if our x is 0, then our character doesn't flip only when we change our X-direction. So if I press down, but I was running to the left just a second ago, it's going to be facing the left still. But now there's one other thing that looks kinda weird, which is that our character, even when we're idling, is still playing the bone animation. So we need to use the animation tree and the state machine to make sure that when our characters idling were actually in the idle state, not the run state. So I think we can break from here and we'll make that the next video. 5. 4 Player State Machine: So right now our character can move left, right, up and down. And the spreads flip direction will be updated appropriately depending on if we're moving left and right. But the character will not switch to an idle state if we stopped moving. And we want to be able to switch between idle Enron depending on if the character is moving or not. And the way we do that is that we set up the animation tree and the state machine root node in that animation tree properly so that we can switch between them. So let's close that out, go into the player scene. And we have this animation tree. So in the animation tree, and we can see the root of our state machine. And if you don't see this once again, you can set it up by creating a tree root and the top right and choosing animation node state machine. And then to get these animations to pop up, you right-click and then choose add the animation that we've created in the animation player. So you can see that we have idle and run, but there's no way to go between them yet. And in fact, really, we should be starting the game with the idle animation, not the run, since when we booted up, the characters probably not going to be pressing left to right on the scene first load. So you can select the IDL and then click on auto play this animation on start. Generally, I would start with the idle animation. You can also click on this little a to switch to the idle animation for right now. And you'll see that it just keeps looping through whichever animation it's on. So if you want to be able to switch between animations on your animation state machine, you're going to need connections between your notes. So with connect to nodes taken, you can left-click, press and hold on one of your nodes over here. And then while holding it down, you can drag this arrow between your idle and your run. So this creates a pathway for your idle animation to switch over to your run animation. However, once you're in the run, you'll also want to be able to move back so you can press and hold on Run and drag a new arrow back towards idle. And then when you let go, you should see two connections going between them. So now you need it wave for your idleness switch to run and you run to switch to idle. There are several ways to do it. But I think the easiest way to understand is that in code, when you would enter that kind of state, like not moving or moving. Then you can directly tell the animation state machine, which is what you see here, to travel from one node to another because there's a method called dot travel. And then you just specify the node that you want it to reach and they don't have to be directly connected. The travel function will try to find the shortest path to get to the new animation. One thing to note about these connections, when you click on them, you'll see transition immediate here. So immediate means that as soon as you tell that travel to occur, it's going to switch over from one animation to another. But in some other circumstances, you may want to choose, say, at end, which means that you would wait for the animation to finish before you switch to the other. So we want both of these on immediate for right now. So let's go back into the player script and let's access our animation tree and then the animation state machine within that tree. So to get the animation tree, we do pretty much the same thing we did for the sprite retype on ready var animation underscore tree equals dollar sign animation tree and you can auto fill it if you want to. So once again, this line means that when our character is created inside of any scene, it's going to get access to this animation tree node located inside of our scene hierarchy, so-called player and then animation tree. And I'll assign the actual in-game node to this animation tree variable. And then we can reference any functions or properties on it that we might want to set. So one thing we want to get from the animation tree is going to be the animation state machine. If we click on animation tree, we're talking about this animation node state machine here. So this method only works if you're using state machine as the tree root. If you click on the drop-down, you can see that there are other types of root nodes, but we're using state machine, so that's where this method comes into play. So we're going to do on ready with our state machine. And we're going to set this equal to animation underscore tree dot get. So this is going to be getting a parameter from the animation tree. And we want to get parameters slash playback. So when state machine is set as our tree root node parameter slash playback, it's going to give us this state machine. And the state machine has the ability to run travel between these nodes. So once we have this setup, switching nodes becomes relatively easy. So let's create a really basic way to do it. And then I'll expand on it by creating states with n, This player script that can correspond to this. So let's set up a basic way of traveling between the state machine nodes first. And then we'll expand by having actual states within this player script that we can use. To make this process a little bit more streamlined. So once the velocity variables set and physics process, we can take that and we can determine if the character should be playing the idle animation or the run animation. So if the velocity does not equal a vector to 0, basically meaning there's some kind of movement for our player. Then we're going to tell the state machine to travel to the idle animation. So state machine dot travel, and we'll give it the name idle, which corresponds with this node name over here. And then we can put an else for the other circumstance, which is that when our characters actually moving the vector two is not 0. So else will travel to the run state. Okay? And then we can save that. So this is really, really basic, but it should work when we just have two nodes like this, okay? Actually I had this mixed up when it is 0, we want to be idling, otherwise we want it to be run. So let's test that and the Test map, I'm going to run this scene having tests map open. So there we can see our characters idling. But as soon as we start moving, it's going to be playing the von animation, by the way, so that we don't have to always switch over to the test map and then hit this Play current scene button. Let's actually set the test set as the default for our project if you haven't done that already. So if you go to project, Project Settings, go to general config actually run. And then where it says main scene, we change this to maps, test map.get asean, and then it close. Now if we hit the Play button over here, it should always boot up the test map as the first initial scene, as you can see. So we created the ability to change visually how the character is going to look depending on if we're moving or not. But as we expand upon our player script, we may want there to be different lines of code to run depending on if the character is not moving, if the character is running, or maybe there's other states, as we're going to call them, like swimming or attack animations. There are many different states that a 2D game character could be an end, depending on where the character is and what it's doing. You want certain things to be able to occur. So for instance, depending on how you set up a character's attacks, in some games, a character would be able to move still, and others, the character would actually be frozen in place while that attack animation occurs. So you would need different states to make sure that when the character shouldn't be allowed to move, you don't actually run this move and slide function during the physics process, but you would write different lines of codes to handle that specific state. So one good way to more visually see states in your code, rather than just writing everything as their own little block is to create a enum variable. So an enum attaches a human-readable name to a integer value like 01234. And then you can check if a character has, let's say the current state variable set to the name of that state and make certain things happen based on that. So let me show you what I mean. We'll go up to the top here under extends, and I'm going to write e. And I could call it player state. I think that's pretty easy to understand. Then we can put in these curly brackets and we can describe a few state name. So we might have idle state, we might have a run state, and later we might add in an attack state. But for right now we'll just stick to one. So this is just declaring name values that we can use to easily identify if the character is currently idling or running. Then we can come down here and create a variable for the current state, which is going to have one of these states set inside of it. So variable, current state. And this will default to, let's say player state dot idle. And then what I like to do is to create a setter function for the current state. So whenever we change our state, stuff might happen like for instance, if we were running and then we change the state to idle, we would want to travel to the idle animation. So by having the current state have a setter function, we can make that happen just by changing the value on this. Those travel functions will gone automatically. So after declaring the default state, you can do set Get and Set current state. So I'll set this function up right below that variable. So function set current state, and this will have a value passed, so I would call that new value that gets included here, new state. All right, So of course when we pass in a new state to the setter function, we do want to set that to the current state. So current state equals new state. But we could also run a switch function on that new state. So depending on if we're changing to the idle state or the run state, we can travel to a specific animation. First, I want to make sure though, that the new state that's being set is not the old state. Because if nothing actually is changing here, we don't want to run any extra code, it would just be a waste. So if current state does not equal new state, then we'll run this code and we can also. Include that for this bit down here, since if the current state is already the new state, there's no need to assign it. So what we can do with this new state is we want to check to see if it might be player state idle or player state run. But rather than creating a bunch of if statements to check for every possible case, we can create a more efficient method, which is to use a match. And so we're going to match the new state to its possible values. And then if it matches one of these values that we're going to do certain things with it. So this would be called a switch statement in most other programming languages. But here we can call it match and we want new state as the thing we're matching. And then we need to declare the cases down here, so we don't need to write case and then the name of the case, we can just write players state and then the type of state which hacking so idle. So after typing in the state which were matching, This would assume that the new state being passed on it's idle. We can do specific things based on that. So we're going to want to make the state machine travel to idle. So I'll just take this code and I'm going to copy it. And I'm going to paste it up here. So we can do the same thing for one player, state, run Colon, state machine that travel to the run animation. So now what we can do if we want to change both this current state value and to make the animation tree update the animation to the idle or run animation is that we can just use this set current state, a set of function once and we update both of these values. So what's going to happen is that the current state and our script is going to match the animation in our animation tree. So down here, rather than traveling to the animation, we can just do self dot current state equals player's state idle. And then down here, we can change this to basically the same thing except doctrine. So note the self dot current state knot, current state equals. In order for the setter function to trigger properly, I found that you have to reference that this is referring to the self directly. So to be on the safe side, you can put self here and then that's definitely going to be referring to this variable up here. So the set of function should run. So this little four lines of code right here could be described as picking the news state or the player. And later we might turn that into its own function. But for right now we can leave it there. And if we hit Play and test our game, it's going to basically be running just like it did before. So we're still switching to the new animations. But at the same time, we're also setting the current state variable. So if we needed code to run based on what the state is, we could have another match statement of sorts down here and then Run idle code and run code or attack code. All of those might look a little bit different. And once again, you may or may not want it to run code like move and slide, depending on if you're moving, attacking or idling. So for right now we can leave it at that. But if we ever need to add extra states where you kind of have the groundwork set to do that here we just need to add in a new player state, enum, match a new city and set current state. And then we can just write separate code for each of those states. 6. 5 Object Collisions: So in this video we're going to work on setting up some tests collision objects, and will also resolve this issue over here. The exclamation mark mentions that we have not added a collision shape to our character. So while a kinematic body can collide with other characters in the game or objects. We need to have collision shapes on each object that is going to be taking part in those collisions. So if I right-click on the player and we add a child node, we can look for a collision shape 2D. So that'll be down here at the bottom. Create it. And then on the right, there is a property for our shape currently it's empty. Let's click on it. And for simplicity, we can do a rectangle shape 2D. When you do that, you'll see this partially transparent blue box appear on my own, our character. And you can also see because most for controlling the size and shape of that box. So we probably want to have it kinda fit our character a little bit better. So you can drag on these and kinda match the collision shape to match our character a little bit better. And if you hold down and then press and hold on the collision shape, this will make it so that you only move the selected object in the hierarchy. So we won't accidentally move the player when we do this. And we can just position the collision shape where we want it to be. We may also want to shrink the collision shape a little bit more to kinda favorite the player, make it so that if something like an arrow was to hit right over here on the edge that we don't damage the player. So just kind of making the player a little bit harder to hit in that regard. So when you approximately the shape you want, you may want to expand the shape property and you'll see the extent of our box. You may want to round that up to the nearest pixel value. So that is more consistent where every single, where every single unit in the game is one pixel. So it doesn't exactly make sense to have 5.7 pixels. So let's just make that 69 rounding to the nearest numbers. Then let's expand the transform and do the same thing. So for the transform position, I guess I'll put 0 here and then either 0 or one for the y. I think we're going to go with one to make sure that it's centered a little bit more on our player. So let's save how character. And at this point you'll notice that that node warning sign has gone away. So in our test map, we would be able to collide with different objects in the game. But first we have to actually add some objects. So let's create a new scene. I'm going to go to the top-left and do your new scene. And here we will choose other node. And I'm going to type in body because we're going to look for a type of physics object in our game. So let's do a static body, as in one that is not going to move, but our character can collide with. So this would be for anything that just basically stays in the same place. The entirety of the game, like a tree or a house. So let's create that here. And I guess I'll rename this node to be static. Object will use this kind of as a template for creating different types of objects, like maybe a barrel or a signpost. And I'm going to save this. So Command or Control S. And then let's create a new folder. And the top right, I guess we could call it objects, keep it kinda general. Hit. Okay? And then we can save this scene inside of there. As an alternative. You could call it parent object or something because we're going to be instantiating a bunch of seen copies from this base scene to create the final version of, let's say a bail. So in our static object, we're going to need a collision shape. So let's add a child node collision shape 2D. If you want, you could default this to a new rectangle shape. We won't bother to set up the shape for it yet because we don't know what the object is going to look like. And I will also take the static object on top, right-click, add a sprite node to it, and then let's move this up in the hierarchy. So now we want to create a new child scene based off of this static object scene. So the child is going to inherit everything from here, but won't be able to make our own custom changes to the child That won't be reflected in the parent. So I'm going to click on our static object and then I'm going to instance a child seen. So in the file system are going to find the static object scene and I'm going to right-click it and then do new inherited scene. So now we're going to have a separate scene from the static object, but you can see that it still has the sprite and collision shape nodes built in here. So I'm going to save this. And in the objects folder, I'm going to call this barrel. Hit Enter. And we're going to change this sprite to something from our RPG packs. I'm going to expand the RPG pack, ASU props and decorations. And you can see we have a whole bunch of barrels here. So I will take barrel 1 and let's put it in the texture also to reflect the fact that it's a barrel. Let's change the object name. So I'm going to right-click static object and I'm going to rename it Barrow, and that's the 01. And also renamed the scene saved in our project file system to bear all 01. Because as you can see, there were multiple barrel types and we might want to differentiate them. So after renaming your barrel object here and me click on another node. If, if you get these warnings in the outport that mentioned the path is having an issue. You can just close your object and then reopen it again from the file system. And now when we click on collision shape, it should all be good. So let's click on the shape property and let's add a rectangle shape to this. And then let's adjust the size and shape of the rectangle to fit our barrel. So let's make it approximate the, something like that, something that makes sense. And then let's save this object. So now we can create a bunch of copies in our test menu. So I'm going to drag in a couple of barrels. And if we run this scene, our character should be able to bump into those. So let's test that. You can see we can't actually move past this barrel at all. And this barrel also gets in the way. Now one problem you might see, moving your character around the other objects in the scene is that it's not rendering the character in front of the barrel when it probably should. So you can see that the character's head should obviously be in front of the bottom of the barrel, since the character is further down on the screen, which in terms of a 2D game would be closer to the camera in terms of perspective. So we can get around that quite easily in Godot Engine. How we can do that is we take all of the objects that are in our test map that I need to be sorted. And we add a node to our test map nodes. So I'm going to right-click here at a child node and you can just search for the sort. So it's actually called Why sort here. So let's select that. And now we can just take the player in the two barrels and left-click, and then you can sort of select all of them. You can left-click on player, hold, Shift down and left-click at the bottom of the list of items you want to grab. So that's barrels or a two here and drag it to why sort. One other issue that I'm noticing is that because of the way we numbered the barrel seen it's auto-incrementing when we add another thing here. So let's actually change the name of the barrel a little bit. I'm going to rename it to be, Let's say barrel red. And let's rename the barrel scene as well. So we'll call it barrel that case. I'll make the names match up so no underscore their burial ground. And now let's go back to the test map. I'm going to delete these other two barrels. I'm going to cut them away and let's drag in to more barrels and make sure that they're going to be on that why sort node. So we have Barrow red and then barrel red too. So, so auto incrementing. But here we can keep an eye on which type of object it is. Now let's take these two barrels and put them under y, so it just drag them and drop them. And now that of these characters are in there, it will sort based on the y position of these objects. So let's hit play and you will see what I mean. So our character, we go down below the barrel, and this time it's showing the person's head in front of the barrel when the player is actually in front of the barrel. And when we're behind, you can see it's hiding the feet behind the barrel. So the barrel has a lower position on the screen. So therefore it renders on top of everything that comes above it. And if I go down below it, vice versa. So that's pretty important for these type of 2D games. So before we wrap up this tutorial, let's create one more type of object from this base, static objects. So I'm going to right-click, do a new inherited scene. Let's look in our art what we have to use as a proper decoration. So let's see right here we have a house n. That sounds good. Let's use that. So I'm going to rename this static object and I'll just call it n. So first we need to save this scene in our objects folder. We may need to open it. Okay, so let's do that real quick. Okay, and now we can go to the sprite node. Let's drag in that drop. So house in, we'll make that the texture. And now we need a shape to go along with this. So collision shape will use the rectangle again. And let's stretch it to be roughly the shape and size of the house. And we don't want it to go all the way to the top here because you've got to account for the roof. We should be thinking of this in terms of where would the back of the house be if we're looking at this right from this perspective. So I'll make the size right about here. But let's adjust the transform. You pixels down. So maybe 12 on the y. Then let's take the rectangle shape and round things off. I think I will say 34 and not 25 and then 30 for the why. And that might not be perfect, but that should do for right now. So we can go back to our test map and we can drag in scene on to our test map. So let's put this right about here. And I will also move a barrel right here. And when the game starts, because this n is a higher position than this barrel, the barrel should render on top of the n. So let's make sure that that's actually working with the y sort node. So let's hit Play here. I, okay, problem is that the N is an end, the Viceroy. So let's put that in there. Okay, and we can see the bear arms now rendering on top of the n. And when we hit play again, the character should be able to walk over there. And not only collide with the end, but also to. Be rendered appropriately with respect to the end. And if we get behind here, we can see our character can walk behind the n. And that's pretty cool. So if we had made the collision box all the way over here, we wouldn't be able to do this neat trick. Now, for this particular n, I would say we should shrink the collision box a little bit more. So I'll just adjust that really quickly and kinda wrap up this video. So let's take the x, I'm going to make it 30, okay? And then I'll make the y 28 and that should be good. Okay, So let's test that real quick. Okay, so our character construct go behind the house. Character can get close to the house. Maybe that's a little bit too much on the x. But in terms of the bottom, why that's pretty good. So I'll move the y 1 up, so 29, and let's take the x and make that 32. Okay, and then just making sure, Okay, that's about where we actually want the player to collide with the end. But here we do see one more and minor thing, which is that the starting point of the N is actually in the center here. So with our sprites, we want to set where the sorting point would be or the anchor point for this sprite. And the N, that should be way down here. That's why the character kind of comes in and out behind the edge of the N right there. So in order to adjust that, we need to move this bright up with reference to this center point for the end. So it's actually using this position marker to determine the starting point for the n. So if we take this sprite and we move its transform up, let's say 30 pixels, other direction and negative is up. Then. Now we can see if we hover on n, that this is now the starting point for this object. So let's move it up a bit more and we get negative 40. And now this is the starting point for the object that should be about appropriate. Let's also move the collision shape. I'm going to move it up 40 points. So negative 12 is going to become, I think negative 28. Okay, let's hit Play. And now when we go to the object, okay, So now it's technically working appropriately. But we can see the grass around the sprite. It does end up kinda covering our character and that doesn't make a lot of sense. It does make sense for the roof to cover our character, since that's actually off the ground. So if I was editing this sprite, I would probably not have the grass there. It would just keep the grass as part of the tile map, something we haven't talked about yet. But because of this, I think we're just going to have to expand the collision shape so that our character cannot be here. So let's go back to our collision shape and I'm just going to make it 34. Let's make it 35 again. Okay, so that should be big enough that our character just doesn't end up there and causing things to look a little bit weird. Just for good measure, we can make the y three and then move it one pixel down as well. So negative 27. So for our barrel we can do the same thing as well. So I'm gonna take the sprite and let's move that about negative six pixels up on the y. So we can see the objects point is now here. And let's move to collision shape along with that. So position negative six. And that should fix the sorting for our barrel. So now on the test map, if we go ahead and hit play, we should get collisions a little bit more, more like what we want. Likewise will also have to offset the player. So on the player, Let's take the sprite and let's move that up as well. So negative 10 or so for the Y position on the sprite should be pretty appropriate. And then the collision shape. Let's move that to negative nine as well. Okay? So now the player will be sorting around this point down here, which is about where it's fee is at. So if we go back to the test map and we can run again. And let's see how it is when we go up against the barrels. So standing behind the barrels, standing in front of it. And we can go behind the barrel when we're here. Okay. It all looks a lot more appropriate now. Okay. And with the end as well, it can get there. Just going to bump the ends extense here for the rectangle shape, shape. Just going to bump the extents for the rectangle shape on the end, up to 36 just to make sure the character isn't covering any of that grass. Okay, so let's hit play and we go over here. And I think that can be all right because our character isn't really interacting with the grass. So just one final adjustment on the n. Let's take the extense, bump this up to 37 to make sure the character can't overlap here. And that's also check the player collision shape. Makes sure that the extents are set to 69 there. So a solid number. And let's see the sprite as well. We'll just make sure that's 0 and 10. So when we hit play, we can just test the end from both sides. Just make sure that the pixels aren't overlapping anyway, weird with a shouldn't be as another alternative. If you don't want to go a step further than this, you could use a program like us upright to remove the green from this texture and then re-add it to the game. And then you wouldn't really need to worry so much about the collision bounds because it would make more sense when the house is actually overshadowing the player, but it doesn't make sense for the grass. So after a bunch of trial and error, That's basically going to set up the basics of creating objects that have their own collision shapes, adding a collision shape TO player, and kinda making sure that everything sorts correctly inside of your map. So now to use this method, you just need to make sure that when you're adding objects that should sort themselves out in terms of their depths and the game that you use a y sort node and that would take care of all of the heavy lifting here. 7. 6 Follow Camera: In this video, we're going to be setting up a follow camera for our player so that when our character moves around, the camera stays on the player and we'll be able to see different parts of the environment and based on whatever the camera's pointing out in the background. So what I'm going to be doing is taking this generic RPG slice tile. And we'll just repeat it a bunch of times. So we can use one of the UI nodes in order to do that. So normally you would use a tile set and tile map. But we're not really focusing on that in these videos. So we're going to just do the simpler background texture. So we can go over here to note control, and then we want texture vector. You can also search texture vector in the top bar. So we'll put that there and make sure that it's behind our player, the barrels and the end, by making sure that it's actually at the top of the hierarchy, whatever slower is going to render on top by default, now we need to put a texture image into our texture property. So I'm going to drag the slice and put it in here. And now we can see that little icon. We want to expand here and we want to tile. So I'm gonna take the stretch mode and set that to tile. And now we can just drag this as far as we need a background to be. Just kinda like so. And maybe for now we want to duplicate a few more of these barrels and the level. So I'm going to Control D duplicate it. And now that we have barrel three selected automatically when you do the duplication, you can hold Alt down and then left-click on the stack and it's going to move the currently selected object from the scene hierarchy. So it guarantees you're going to move barrel three rather than barrel to. So holding Alt down, It's very helpful, especially when you have two or three items on the stack. So here I'll press barrel for hold Alt down. And you can see I grab Barrow for out from the stack. So that's grab barrel five and move it around. Just kinda position everything, kinda how we make one it we might want to duplicate the n as well. So I'll just duplicate that. And I'll move it down here. And we can have a third one as well. Why not? And I'll move the player little bit more in the center of this map. Okay, so now let's actually give the player a camera in this map. So I'm going to right-click on the test map and I'm going to create a camera. So type in camera, we're looking for camera 2D. So this camera, first off, we want to make it the current camera so that it's active. I'm going to check active on the camera. And you can see that it's positioned up here, but we want it to point at the player. So we have to give the player something so that the camera can point at it. So right-click on the player at a child node. And then under a node 2 D, we're looking for a remote transform 2D. So this can basically tell a camera where to point out and I'm going to create it on the player. So this has the transform sitting right on top of the player. So as long as the camera is pointed out this remote transform, then it's going to be effectively looking at the player wherever the player moves. Because as a child node, the remote transform is going to move with the player. So in the remote transform 2D, we want to assign the remote path to the camera 2D. So just like that, you should see camera 2D pop-up there. And the camera 2D is position now matches our player. And so we can see that at that level is actually quite small. So I'm going to stretch the texture, rectangle background some more, and just make it so that we'd actually have to move the camera a little bit in order to start seeing the grace basic. And so let's save that scene and we can hit play. And this time when we move our character, the camera is going to be pointing straight at the character. But when you build your levels, you're probably not going to be trying to make them indefinite. They'll have a set size. And when you get to the edge of a map, you don't really want to show this gray background, right? So in order to handle that, you can set limits to your camera. So I'm going to click on camera 2D. And we're gonna go to the limit category. And we need to basically set some points for this lemma. You can see that currently it's set to negative. I don't know, 10 million or something, which basically means effectively infinite. But if we change it to something like negative 200, then it's going to be much closer to over here. So I could just take these and set it to negative 200 and negative 200, 200 and 200. And then that's going to make the limits somewhere around here, but it's kinda hard to see what you doing without enabling some visual gizmos. So in the editor category, you can check draw limits. And here you can see the limits I just set up. And basically the reason why the camera had to move here is because if it tries to point out the player, it's already outside of bounds. So the camera can't move any further than the limits, which is what you want. So now we just have to adjust these limits so that it actually matches our map. So I'll take the right and make it something like 500. I've 25. Let's go with that. We can leave it at 500 for now, maybe 500 for the bottom. Okay, That's way too much. Let's make it let's make the bottom 300 or so. Okay. Maybe you can make that a little hole through 25. And then we just need to adjust the left and the top as well. So perhaps we're looking more at negative 100 on the left and then 0 on the top, negative 125 for the left and a 100 on the top. That negative a 100 on the top. And that's a little too much. Negative 75, okay, there. So now the limits of our camera do not go outside of the maps that we've built, which is usually going to be what you want. So instead, what you might have happened is when you get to the edge of a map, you could transition into a different map. I'm going to hit play and we're gonna go ahead and test this camera real quick. Okay, so we've got a little level here, all of the objects rendering on top of the background. But you can see that when we kinda get to the edge over here, it's not going to be moving the camera any further. Our character can still walk past it because there's nothing to collide with our player and stop it from moving past that. So same with the bottom and same with the right. So if you don't want to stop your player from being able to move outside of the camera limits, you could create a quick object is static object that would block it. So for instance, it could right-click on the test map here at a child node. And this would be a static body 2D. And then end that static body 2D, we can add a collision shape 2D. So the static body provides the physics and the collision shape provides the area where you would collide into. And then in this collision shape can give it like a rectangle shape. Let's take the static body, move it up here, and then with the collision shape, we just stretch that to basically be the full top of our map. So we could do that a few times, maybe once for the left side, once for the right side, and once for the bottom side. And now we just need to adjust the size of these rectangles. But if you try to adjust the size up here, there's one problem which is that all of these are actually sharing the same resource. So in order to adjust these individually, you got to right-click on this rectangle shape and choose make unique. So when you do that, now when you adjust this, it's not going to affect the other ones because this is its own thing. So let's just position this down there and drag it up right about there. And I will do the same thing with this rectangle shape, will shrink it, position at down here, drag it up, and you're right about there. We can get the collisions for our level. Now the fact that overlaps over here doesn't really matter. It's nothing we're ever going to see. What's important is that we just block the play from being able to leave the map. So let's go ahead and hit play and we can test this real quick. Okay. So we'll go to the top, okay. And he's blocked. There is also blocked down here and at the bottom as well. So in this case I was duplicating the collision shaped 2D. So this does work. You can have for collision shapes on one body, but you could have also just duplicated the body and then had four separate objects blocking the player at these areas. 8. 7 More Props and Map Building: So to wrap up this series of tutorials, I want just create a few more props that would exist in this little village map that we've been creating. So we'll take some stuff out of props and decorations. And I'm going to be adding those n as objects. So we created static objects down here. And we're just basically going to be reusing the same assets and then just assigning a different sprite and some different collision shapes depending on the size of that sprite. So I'll right-click on the barrel and we'll duplicate it here. I'm going to call this pond dot T SCM. Ok. And now we can just open our pond. So our pond, we're going to need to change the sprite texture. Let's open up props and decorations. I'm gonna go down, tear too generic RPG many lake. Let's drop that in. And now we need to once again, make sure that our ponds Center makes sense based on where it should sort. So I think that since a character down here should be rendered on top of the pond, I'm going to take this pond sprite and I'm going to move it up here, bit about there actually, I think. And we can take the collision shape and we just need to stretch this to match the pond. So you could just move it where you need it to be. So maybe the grass the character can walk on, but definitely not the cliff side or the pond area itself. So we can go with right about there for right now. Now in the test map. Now that we have that as a, another scene, we can just drag this in here. Maybe we have another pond in there as well. And let's see if there's any other gerd props we can use. Also, these should be in the y's. So I'm going to drag them up there. And I'm going to be named them pond 0 and Pond one as well. And one. And we can go into the pond and we're going to be named this top object to ponder as well so that when we use it in the future, it actually makes a bit more sense. So here we have some flowers and grass. We could add those in as background objects. We don't need to create a whole separate thing for it. They don't need to be static collectible objects because these are just background details. So I'll add another node in here to the test map, node 2 D. I'm going to put it above the y sorts so that it always renders below the player or any other objects. So let's rename this to background details. So now if we drag something like grass or a one on to our scene, it's going to render on background details. So it's a child of that. And we can just duplicate this a few times and move them around our scene. Let's also lock this background rectangle and place. So if you click on the texture vector, can click on the lock and you can't actually move it, which is handy since we're trying to move stuff around the screen. So let's just zoom in a bit, hold Alt down and move some of these grass details around. So I'm doing Command D to duplicate it and then Alt, left-click and drag to move the grass around. This should just help everything look a little bit less flat. Let's drag in a grass too. So I'm having background detail selected Grass 2 to the scene. And now I can select grass eight here and duplicate it. Duplicating it with Control or Command D. And just moving these around the scene. And this is just going to make it look a little bit better. Let's also add in some flowers. Okay, so we wanna make sure that's in the background details. Then let's select the flowers. I'll click, move them around the screen. Maybe like that. And this one can go over here. I guess. Actually I think I only want one of them, so I'm going to cut that flowers one away and we'll just have this one over here, but the house. So just using more prompts adds a little bit more detail to our scene. So we can play and just kinda running around our level one more time. We can see that we can't walk over the pond as you would expect. Maybe the collision shape for the pond can be a little bit above here so that we can get down there. So just a, just a over here. And when we adjust these collisions shapes in the scene editor of any of these ponds that are created as an instance of that editor are going to have their collision shape updated and it's going to reflect any of the changes, which is super-helpful so that we don't need to edit every object individually for the whole game. So now our character is kinda sits above there and it looks a little bit more appropriate.