Introduction

This tutorial will cover the setup of a basic level in TGB for a platformer. First, though, we need to get TGB set up for a new game.

Create a new Project

Open up the Level builder and create a new project (File > New Project...).


Figure 1.1

Call it whatever you wish, the default for this tutorial will be Platformer.

Introduction to Tile Maps

First of all, you should read this article to get an introduction to how TGB’s tile map builder works. That will tell you how to do everything in the tile builder. My purpose here is to help you figure out what to do with it. There are three steps to getting a level from a design or idea into a game. First you have to create image maps, then actually build the level, and finally load them into the game. But before we get into that, you should have a little background on the purpose of tile maps. The main reason we use them instead of just random images is to save memory.

Due to the nature of game levels, there will be many small parts of a level that look exactly the same. And, it doesn’t make sense to store each piece of information more than once. So, we can break the level into a small grid, and set all grid sections that look the same to reference the same image. The exact size of each square in the grid is up to you, though bigger tiles will limit the control you have over the exact layout of the level. In general, the tiles should be square, with size about the width of your main character.

As a side effect of using less memory, tile maps are also much faster to load simply because there is not as much to load.

Drawing and Designing Levels

Before you even open the tile builder, you should have a pretty good idea of what it is you are planning on creating. For the purpose of this tutorial, you probably just want to get something loaded into the game so you can continue to all of the good stuff. But, when you come back later to make real levels, it is important to design before you build.

Because the design of levels is highly dependent on how you want the game to play, the actual layout is entirely up to you. You should try to make the levels suitable to be tile mapped, though. What I mean by that is, any tiles that are similar, you should try to make identical. For example: If you have a ramp that is at a 25 degree angle, and another at a 30 degree angle, consider making them both 30 degrees so you can use the same set of tiles for both. You do want some variation, just don’t overdo it.

I would suggest before you actually start creating the tiles, you should prototype with some default images (like the ones that come with TGB). Creating art can take a lot of time so you should make sure your ideas actually work before devoting too many resources to it. I threw together a quick tile set just for this purpose:



Right click on the above image and select “Save Picture As…” or something similar and save it to the Platformer/data/images directory for this project.

Making Your Own Tile Set

Making images for tiles is very similar to making textures for buildings or terrain in a 3D game. You need to make sure that each image tiles well with any image it may be next to. What this means is, when you place the images next to each other, you can’t tell where one ends and the other starts. It is also important that each individual image has no remarkable features. The reason is that when you have a bunch of them tiled next to each other, any specific features will stand out. For more information on how to accomplish this, read these tutorials: Making a Seamless Texture and Advanced Seamless Textures

Once you have created all of your textures, you need to assemble them into a single image. I usually place all the tiles for a level into one image file. There are both performance and organizational reasons for doing it this way. Each tile should be a power of two (1, 2, 4, 8, 16, etc.) somewhere between 32x32 and 256x256. Line them up with no gaps between each tile and save the final image to T2D/data/images.

For the rest of the tutorial, I am going to assume you are using the image I provided above. It shouldn’t be too hard to follow along with your own, though, since I will mostly be providing concepts.

Building a Level with the Tile Editor

Once you have a set of tiles created, we need to load that into the level builder. Open up the level builder and in the Create Tab, click on the "Create a new ImageMap" button. Find the Tilemap.png file you saved to your images folder. In the image builder change the image mode to cell and the cell width to 128. Your image should now be correctly tiled as seen in the figure below:


Figure 1.2

In the Level Builder, select Project->Tile Map Builder... from the menu or press F12. The first thing I do when I am building a tile map is create my brushes. A brush in the tile editor is basically a way to save a set of parameters for a tile. For instance, you will probably have a series of ground tiles that all use the same image and collision settings. If you save this as a brush, you only have to set up the tile once, then you can use it whenever you need to simply by selecting its brush.

For the tile set I created, we will need 12 brushes. First select TileMapImageMap in the Image Library window. The window should now show the eight tiles we created. Click on the first one (the brown box looking thing), and then click on one of the grid squares to place the image in it. Now, hold down the control key and click on the newly created tile. You should see this dialog:


Figure 1.3

This is the tile properties dialog. For this tile, we just need to enable collision, so click on the ‘Collision Active’ checkbox and then the save button. To create the brush, hold down the alt key and click on the tile. You should now be presented with the assign brush dialog:


Figure 1.4

Select 'Brush #1' from the drop down box and name it ‘crate’ in the ‘Select Brush Name’ text field and then click on save. So as to not overwrite the brush you just created, it is important that you select the next available brush before you select a new tile from the image library. So, open the Brush menu and click on ‘Brush #2’, then click on the second tile in the image library (the solid bluish one). Place this tile somewhere in your map. This brush doesn’t need any property changes, so just alt click on it to open the assign brush dialog, and name it ‘sky’. Repeat this process for the rest of the brushes using the properties that follow. Remember to change the active brush using the brush menu before every time you create a new brush.

The brushes are created using the images from the image library from left to right and top to bottom. ramp45 and ramp-45 use the same tile image for their brush, as do ramp30 and ramp-30, and ramp60 and ramp-60.

Brush # is the brush to select from the Brush menu when creating this brush. Brush name is the name to save this brush as in the assign brush dialog. If Flip X, Flip Y, or Collision Active are ‘yes’, check the corresponding box in the tile properties dialog. Collision Polygon Count and Collision Polygon Definition are the values to put in the corresponding text fields in the tile properties dialog. If a value says ‘default’, do not change it.

Now, we need to save the brushes so we can use them again if we happen to close the tile editor. Select “Save Brushes” from the Brush menu, name the file platformer.bru, and click the save button. Anytime you want to load this brush set, you can now just select “Load Brushes” from the Brush menu and load this file.

Alright, kind of a pain, but now we can build without having to mess around with the mundane stuff.

Go ahead and start placing tiles. Use the sky brush as a background, platform and crate as walking surfaces, and lava and lavaTop as areas in which the player can fall to its death. ramp30 and ramp60 can be placed next to each other to create a full ramp at a 30 degree incline. ramp45 can be used for 45 degree inclines. platformEmpty is for areas beneath the ground that the player will never get to and thus doesn’t need to collide with.

Feel free to create whatever you want, but try to include at least one 30 degree ramp, one 45 degree ramp, a lava pit, and some floating platforms so you can follow the next few tutorials. If you are wondering how large the tile layer has to be, 30 tiles in width and 20 in height will completely cover the default camera view in the level builder and then some.

Don’t forget to save the tile map. Go to File->Save Tile-Layer... and save it as platformer.lyr in the Platformer/data/tilemaps folder.

Using the Tile Layer in the Level Builder

Exit the Tile Map Builder and you should now see your saved tile layer in the Create Tab under Tile Maps. Drag it into the scene view. Depending on how large you made your tile layer, most of what you painted down in the Tile Map Builder might be up in the far left corner of the complete tile layer. Zoom out a bit in case you are having trouble seeing the layer.


Figure 1.5

Now, drag the visible part of your tile layer over the camera view. Hopefully your layer covers the entire camera view. If not you will have to go back into the Tile Map Builder, load your tile layer, add more tiles, and resave it.


Figure 1.6

At this point, save our rather simple level by going to File > Save As... and name it level1.t2d. If you want, you can press the play button in the toolbar to see how your tile layer looks "in game".

With the layout of our level done, let's continue on and get a player controlled character working.
Click Here for the next Tutorial.