Introduction

Let’s make a simple tile map. I will add a new project called TileMapTest and make 864×480.

I will talk about why we need to do this. Now, I go to the layout and make the size 1728×480.

That’s important because we will make a simple platformer to make something quick and easy. So first thing, let’s add a tile map.

Then I will delete this.

I will make this model 32×32.

We could almost make it 8×8, but we’ll make it 32×32 for now. As I mentioned, games must use tile maps, or they won’t work very well. So to make the calculation more efficient. The short answer is whether an exponential of two makes things more efficient. So that’s why you usually see everything in 8×8, 16×16, and 32×32. They are all exponential of two. I’m just going to make a black.

It’s not too complicated. That works well. I like to call Layer 0 to TitleLayer.

Then, I want to add a layer called the PlayerLayer.

That will be significant because when you work with tile maps, you have to be efficient with your mouse clicks, etc. So first thing, we want to ensure the position is 0 0.

I will click on the Tilemap.

Now with the tile map, you can add a few extra items here.

It can be added with a pencil and then a variety, such as drawing it here and filling areas.

But before we even get to this, once you click this here, you can’t click outside of it until you click the mouse again.

I will snap to the grid.

I will make the tile map bigger than the window we’re viewing.

And you might be thinking, why are we doing that? Because you might want to add in an off-screen wall. That’s important to know. So I’m going to add in a wall like this which you won’t be able to see.

You can see that your standard platform is right there. Let’s make a simple common platform, and I’m going to add a little bump here for a player to jump over. Now let’s add in the Player. And we might as well make the Sprite.

We create a 32×32 green Sprite.

We will do everything like that here. We’ll call it Player, and let’s double-click it again.

For some reason, it doesn’t set the origin here.

We also want to move it. We want to move it to PlayerLayer.

Nothing quite happened. That is to make this platform work. We need to add a couple of other items here. We’re going to add in a first of all. We’ll have the platform here.

And watch what happens.

It falls right through. Of course, it does. Let’s click on the title map, add the Solid behavior and look at that.

Now we can work here, but there’s a big problem, that we don’t track players. So how do we do that? It’s simple. Let’s add another behavior. We will choose Scroll To.

I don’t want the Player to go in this direction. If I remember correctly, there was a wall there. I can see that I can jump off the screen because there is nothing. There’s simply nothing there to block the Player. So the Player will continue to go. That’s why you add the scroll. So we now have the Player as well as the tile map. And it’s working out pretty well.

As you can see, all you would have to do to make your level at this point would be to edit the tile map. Suppose you want to add some obstacles etc. It would be pretty simple, and we’ll discuss that in detail in the next couple of tutorials.

Let’s change the background color.

Now we could probably change it to a nice deep red.

We could take the saturation and the brightness down a bit to make it more depth.

And, of course, the green doesn’t fit anymore, so it might make sense to make the Player an off-black.

And let’s add square white eyes.

That’s all we need. And so obviously, we need a little more to work with here.

We now have a straightforward game. Let’s change the background color to brightness. Unfortunately, it’s a bit too dark.

Now we have a game that looks pretty good here. We need to add the Keyboard.

And add an instance variable, and we’ll call this isLeft and make it a Boolean, and we will set it false.

We want the key will be the left arrow.

We go to Player and set boolean for isLeft to true.

And then, I will do the same thing, but change to the right arrow and set isLeft to false.

Let’s see.

Nothing changes here, but we can fix another event here.

We’re not going to make something that’s too complicated.

Then we will play with the mirror. And then, likewise, we can copy and paste that here or invert that, and then we’ll set this to Not mirrored.

We made it look pretty good. That’s all we need to do now. In addition, you can add some different items, such as animations, instead of doing it this way. There are ways to do it, but for the most part, that’s what you can do to set things up here.