Setting Up a 2D Scene in Godot

We now know how to create a set of tiles to draw into our 2D game, and can now form a level in which to put a 2D character. But before we do that, we need to make sure that our tiles have colliders - otherwise our character would just fall right through them.

I've created a new Godot project and created a new 2D scene by adding a 2D root node. I've also re-named this node by double-clicking it in the scene menu, so now it's called "Level".

As a child of this first node, I'll create a TileMap node.

I've given the TileMap node a new TileSet in the inspector, taken the tile atlas I made in my last blog post and inserted it into the TileSet (we cover how to do this in my last blog post here).

Adding Collision to Tiles

If you read this last post, you'll remember I briefly mentioned how you could put different tiles on different layers. We'll go into more detail about that now.

Some tiles that you make, like background tiles, will just be floating around and don't need any kind of physics or colliders. Some tiles, like the floor tiles, do, since you want the player to be able to collide with and walk on them. In order to give a tile physics, we must first give it a Physics Layer.

If you click on the "Physics Layers" drop-down in the TileSet's inspector (if it's not showing up, click on where it says "TileSet") then click on Add Element, Godot will assign that current tile set a new Physics Layer. If you click Add Element again, you can make multiple Physics Layers, and use the buttons going from 1 to 8 to put them on different Collision Layers or Collision Masks (so, things on layer 1 only collide with other things on layer 1, and so on). It's based on drawing layers on top of each other, so layer 1 will be behind layer 2, which will be behind layer 3, and so on.

For now, we just need the one layer. To assign a layer to a tile, change the mode to Select mode by clicking where it says "Select" in the middle of the bottom tile menu.

Now, if you click on one of the tiles, its properties will show up in the menu beside it. Scroll down and you'll come to a section called "Physics". Click on that and you'll see the name of our newly-created Physics Layer. If we made more Physics Layers, they would appear in this list, but right now we only need the one.

At the bottom is a picture of the selected tile, and above it are some polygon-drawing tools. On the picture, the parts that are highlighted in red will be the parts that can be collided with. Right now, none of it's in red, but if we click on the green "Add Polygon" button and use it to connect four points together, it will form a red square on the image, signifying that part will be collided with.

 

With this tile of course, we want the whole thing to be collided with, which means we want it all to be red, so I'll just pull out the points on the red square so it covers the whole image.

Alternatively, if you want to whole thing to be selected in red, you can press the sideways "..." button and click on "Reset to Default Tile Shape".

To further show what I mean, let's add collision to our slope tile. We can tell from looking at it we don't want the whole thing to be red - otherwise the character won't be touching the grass. We want our red to end where our grass ends. So instead of a square, we'll draw in a triangle and have it fill up the slope while leaving the air above it blank.

Now I've added collision to all the tiles I want to use (a full square for the grass and under-slope pieces, and a triangle for the slopes), I can flick back to TileMap mode at the bottom of the screen and draw in a very simple level with a gap to jump over. Make sure you don't build it right in the top-left where the red crosshairs are, because that's where the very edge of the level is.

Setting Up a 2D Character

Now in a new scene we'll create a character for us to play as. When creating my new scene, I could just pick a 2D root node to start off with like last time, but if you already have an idea of what node you want your character to start with, you can click on "Other Node" at the bottom of the scene menu to add it in straight away. I know, for example, that I want the first node on my character to be a CharacterBody2D. So I'll click "Other Node" and look up CharacterBody2D.

A CharacterBody2D is a type of PhysicsBody2D, which is a 2D object affected by physics. However, the CharacterBody2D is actually doesn't have any physics of its own unless you code them into the object itself. Since the player character is going to move around the stage in a very specific way, it's up to you to set those parameters by giving the character their own physics in the code. They do, however, interact with other physics-based objects without having to code them (so they can bump into a wall just fine, but they can't jump over it until you give them code that lets them go up and come down).

When you first insert the CharacterBody2D, a yellow exclamation mark will pop up next to it, saying that it wants to have a CollisionShape2D as a child node (so it has a shape that can bump into other shapes).

So, I'll right-click on the CharacterBody2D and add a child node, and search up "CollisionShape2D" to add to it.

But then another yellow exclamation mark shows up, telling us that we haven't actually picked what shape we want our CollisionShape2D to be.

We can pick our shape over in the inspector on the right-hand side, where it says "<empty>". I'll give it a CapsuleShape2D, since most video game characters tend to have capsule-shaped colliders.

A blue capsule will appear right in the middle of our viewport, showing us where our character will be.

Now, my character is going to be a little stick figure that I've drawn and saved as a .png file inside this Godot project's folder. Anything in this Godot project's folder shows up in the FileSystem menu at the bottom-left. You can also click-and-drag an image straight from your image files into the FileSystem menu to add it.

I'll click-and-drag this image into the viewport to add it to the scene.

The image is a little big compared to the collision capsule. I'm going to grab the image and shrink it down by shift-dragging its edges so it fits just about inside the capsule.

I'm also going to grab the capsule and move it just a little bit inward from the sides.

If you want to move around the image or capsule more precisely, you can open up the transform section in the inspector and drag around the values to change its position or size. I've moved the capsule just a little further downwards so its bottom aligns roughly where the player's feet are. Press the chain button next to the Scale values to toggle whether the X and Y axis change with each other or not.

Adding the Character to the Scene

Now with our player character completed, we can go back into the level scene, click the player scene's name from the bottom-left FileSystem menu and drag it into our level scene.

Now let's run the scene to see how it all looks. When you press the play button for the first time, Godot will ask if you want to make the current scene the main scene to run every time we press play. Since this is the main level of our game, we do, so click on "Select Current".

Now our scene will run, and... I can't help but notice it looks a little small.

Rather than scaling up everything in the scene, let me go up to Project in the top toolbar, select Project Settings, then click Window (it's under "Display"). In the Stretch segment, next to where it says Scale, I'll increase that number to 4.

If we go back and try playing our game again, we can see it... uh... let me just grab everything and move it up a little with the move tool (press W in the viewport to activate it).

There. Now we can see it's a lot closer to the action.

We can also see that the grass looks terrible. If I go back into Project Settings, and this time go down to Textures (under "Rendering"), where it says "Default Texture Filter", I can change it from "Linear" to "Nearest". This means the tiles will only render when we're near them, which should free up some processing power and make them look more detailed.

And if we go back into play mode again, we can see the result looks much more detailed.

We're going to come onto coding our character to move next, but I think that's enough for now. Plus, I still need to find away of explaining what code does without turning a blog post into a novel.