This tutorial was put together by our community member shawnBuilds for Rosebud AI, the AI-powered game creation platform. Check out shawn’s games here, and join our Discord to find more tutorials and connect with other creators!
Tile editors are a key tool for creating game levels in many 2D games.
Imagine a grid, like a piece of graph paper, where each square can hold a different type of tile - like ground, spikes, or walls. By placing tiles on this grid, you can design the layout of a level. The tile editor lets you do this easily, using your mouse to place and erase tiles on a grid.
In this quick guide, I'll show you how to use Rosie, our coding AI, to make a tile editor for placing and erasing tiles in your game with the mouse. By the end, you will be able to easily design a level you can play. We will update the 2D platformer template, which already has a player and level setup for you. Here is what we'll end up with:
To follow along, create a new 2D platformer in Rosebud. Here's how:
- Open the Rosebud homepage
- Look for the '2D Platformer' game template
- Click 'Create Game' button below '2D Platformer'
Now, let's get started!
Step #1: Creating Tiles and a Grid
In this step, we will add basic tiles to the game, and a grid with squares that each can hold a tile. A basic tile is a building block that will look the same and behave the same way no matter where you place it on the grid. This makes sure all the tiles are the same size and fit together perfectly on the grid.
Submit this prompt to Rosie:
I want to create a simple tile that looks the same everywhere and always has the same size and position. Also, make sure the player can't walk through these tiles. Next, I need a grid on the screen with white lines that make it easy to see each square. Remove any existing ground and platforms, and then add ground tiles along the bottom row of this grid.
Here is the result:
Step #2: Add and Remove Tiles with the Mouse
Next, we'll make a tool that lets us add and remove tiles by pressing the mouse button over them and switch between editing the level and playing the game. We'll place buttons on the screen you can click to choose whether you want to add tiles or remove them, and to choose whether you want to edit the level or play the level.
Submit this prompt to Rosie:
I want to make a basic tile editor tool. Here’s what I’m aiming for:
- Start with an empty game scene.
- When the user clicks to turn on the editor mode:
- The player character should disappear.
- Show the grid and a toolbar at the top with buttons for "Place" and "Erase."
- The buttons should change color when they’re clicked.
- When the user clicks the "Place" button and holds the mouse down, tiles should be added to each square the mouse moves over.
- When they click the "Erase" button, they should be able to remove tiles by holding the mouse down on them.
- After turning off the editor mode, the player should reappear, positioned above any tiles that might be in the way.
Here is the result:
You can toggle the editor, click the "Place" button, and hold the mouse down over squares to place tiles in the game.
You can toggle the editor once again, the player reappears, and you can jump between the new tiles with the arrow keys.
Step #3: Adding and Using Another Tile
In this step, we'll add a new tile to the game, a spike, which we can place in the level. To use the new tile we will create a tile palette, which is a menu of buttons that let you choose which tile to place or erase on the grid. Each button in the palette will have a name of a tile,like 'ground' or 'spike', that's ready to use in your game.
Submit this prompt to Rosie:
I want to add a tile palette to the editor. This palette will be a set of HTML buttons showing different tiles you can use. When you click on one of these buttons, it will let you choose that tile to place or erase on the grid.
Each button in the palette should have the name of the tile it represents, like "ground" or "spike." The button for the currently selected tile should have a border or a color change to show it's the one you're using.
The tiles available will depend on what’s loaded in the game. For now, we’ll have two tiles: "spike" and "ground."
Here is the result:
Now, you can toggle the editor, click the "Place" button, click a tile button (like "Spike"), and hold the mouse down over squares to place that kind of tile in the game.
Step #4: Make Spike Tiles 'Kill' The Player
We will update our tiles so each type of tile will do something different when the player touches it. Then, we will change the spike tile to act differently than the basic ground tile, which only stops the player. Now, when the player hits a spike tile, they will be sent back to the starting point of the level.
Submit this prompt to Rosie:
I want to make each tile type behave differently when the player touches it. For example:
- Ground tiles should act as obstacles that the player can bump into.
- Spike tiles should also stop the player, but they should send the player back to the starting point of the level when they touch them.
So, we need to make sure that ground tiles just block the player, while spike tiles have that special reset feature.
Now, your game will work like this:
Here's a demo project you can try out too.
Wrapping up
You've just created a useful tile editor for your 2D platformer game. We walked through setting up basic tiles and a grid, designing an easy-to-use menu for adding and removing tiles, a palette to select different tiles, and updated the spike tiles to put the player back at beginning of the level. Have fun playing with your new tool and making levels for your game!
.svg)
.svg)
.svg)