Creating The World (utilizing Tile Maps)

Introduction

NOTE: This tutorial is built using Torque Game Builder 1.0.0 [RC3].

Credit: This tutorial copies very heavily from the RTS tutorial. Thanks!.

This tutorial will first help you get familiar with the Tile Map Editor in Torque Game Builder. Then we will step into creating our own simple game world. The last topic covered in this tutorial will step you through bringing it into Torque Game Builder to represent our game world. If you are already familiar with the Tile Map Editor you may want to skip around, we won't get too in depth into the editor since our framework for an RPG doesn't demand too many advanced features of Tile Maps. You will probably want to check out our method for setting up collisions with the tile layers, however.

Preparation for tutorial

To prepare for the RPG tutorial set we are going to first browse to our Torque Game Builder directory. This should be "C:\Program Files\TorqueGameBuilder\games", unless you chose a different install directory. The important thing to keep in mind is folders such as "TGB" and "spacescroller" our working directories. Basically what this means is "TGB" and "spacescroller" our directories for two seperate games, so to create a new game we should start in a directory like this. Boot up TGB and create a new project. What this actually does is create the folder structure and and set-up the project settings!

Now we should be good to go!

The Tile Editor

How do you get to the Tile Editor?

Run your T2D.exe, when Torque Game Builder is open go to the "Project" menu and then the "Tile Map Editor" as demonstrated in the picture.

Now you should be at the Tile Map Editor screen and should be looking at something like this.

Ok now we have the Tile Map Editor open what do we do? Well lets start with some of the basics that will help you navigate the interface a bit better. First lets cover some of the basic principles behind Tile Maps so you know how then to create them effectively.

Principles behind Tile Maps

First there is a Tile Map which containts Tile Layers which can be made up of rows and columns of tiles of a certain size. So basically the Tile Map is just the container for all of the layers and the layers are a container for all of the individual tiles. The best example would be to relate it to our RPG project we're working on. We have a simple world made up of some walkable surface -- like grass or pavement -- and obstacles -- like buildings or crates. We put these things into separate tile layers, which our character will then walk around on top of. The great thing about layers is, we can build a tile map just like you would build a city in real life, by laying down pavement, and then "building" on top of that. So basically you can make a tile layer with a number of rows and columns of tiles a certain width and height and then put an image in each of these tiles. Then you can put a layer over that one with tiles of different sizes.

Some basic things to know

• You can have different images be different tiles, as well as animations.
• All tiles on one layer must be the same size, but can have different widths vs. heights.
• Each layer can have a different size of tiles though each tile within that layer must be the same.
• You can blend tile layers just like any Torque Game Builder object.
• You can specify collision per tile in the Tile Editor (which we will use extensively).

Getting images

Ok now lets get started in creating something. In this tutorial we will create two layers in a Tile Map to represent our world. We need to get ahold of some images for the layers. Feel free to get your own if you wish. Otherwise, browse to \TorqueGameBuilder\games\TGB\data\images\ and copy tileMap.png. In either case, put the result into \TGB\games\"your game"\data\images\ .

Note: These images aren't exactly the best as a massively tiled images but it will work for prototyping. To utilize them in the Tile Map Editor you don't need to do anything special, simply create them as a normal, celled Torque Game Builder Image Map. If you don't currently know how to do this refer to this reference (Torque Game Builder Image Map Reference). If you use the TGB tileMap.png, your settings will be the defaults, except Image Mode is CELL and Cell Width and Height is 128.

Image Library

Once you either have the images I provided for image maps or your own alternatives, and you have created a datablock for them, we can then use them in the Tile Editor. In the Tile Editor you can use any Torque Game Builder image maps you have loaded from script. To access them we make use of the "Image Library..." which is on the right side of our Tile Map Editor Screen. Click the dropdown arrow to get a list of all image maps available to you (Demonstrated in the next picture). By default there should be quite a few already.

Your list will probably be different, but ultimately, your image map should be on the list. Since I Used tileMap.png, I select tileMapImageMap, as shown below.

Painting Tile images

Now we can left click on the grass image to select it as a "Brush." You can load image maps into seperate "Brushes" so you don't have to click the drop down and search out your image map every time you want to go back to an image you've already utilized. Right now we are defaulted to Brush #1 but we can select a new Brush and then select a seperate image map for it by going to the "Brush" drop down menu in the top menu bar. I will not be going over that in depth in this tutorial since we only need two very simple layers. After you have left clicked on the image you can now left click on the tile boxes you see. Try dragging your mouse around and you'll get something along the lines of what I did in the next image. If you get an error saying your brush is not defined then you need to ensure you properly left click on the image first.

Erasing Tile images

Ok so that may not be quite what we want, lets start with a clean slate, which brings us to our next useful operation, erasing what we've painted onto the Tile Map Layer. To do this right click and drag instead of left clicking, you should be able to erase all images off of the Tile Map Layer.

Zooming in and out

As you can imagine with a big Tile Map Layer setting each individual tile can be quite tedious. Well there are some nifty little operations and tools we can use to make this a whole lot easier, first we want to zoom out so we can see the entire Tile Map Layer within our view. You can accomplish this two different ways, the first is by the menus, use the View drop down menu from the top menu bar. The keyboard shortcuts to zoom in and out are "[" will zoom out and "]" will zoom in. You can also move the camera's position by using the arrow keys. So lets press "[" three times to zoom completely out... I also will move the camera down once and right once. Now your screen should look something like this.

Filling a Rectangle

Among other, numerous features, the tile map editor has one that's going to come in handy for us right now. If you shift-click drag, you can fill an entire rectangle with a particular brush. It should look something like this:

When you let go of your brush, you'll have filled the entire layer with grass. Now we're ready to make another layer, for obstacles.

Creating the Multi-Layered Tile Map

Inspecting our base layer

Ok now leaving off our previous step you should have an entire map of grass. We can zoom in to look a bit closer. (A reminder - to zoom in press "]" and to move around press the arrow keys). Yours should look something like this.

Building our "over" layer

Next we want to build our "over" layer. This layer will house obstacles our player will have to walk around. First we will create a new Tile Map Layer and then we will paint a few obstacles. The Tile Map will then layer them correctly for us.

Add a new Layer

To do this our first step is to add a new Tile Map Layer. We accomplish this by clicking the "Layers" menu and then the "Add Layer..." option, like this.

You then are presented with an "Add Tile-Layer..." dialog. In our case since our base layer is the default settings and we want a simple obstacle layer, we will keep the default settings the same so the tiles match, so just click create, like this.

Making all Layers visible

After you click create you may notice your Tile Map going blank, fortunately this just means you added the new layer correctly, the default is for the Tile Map Editor to not show all layers at once. To change this simply click the View menu dropdown and choose the All Layers option... like this.

Once you do this your base layer should become visible again. In some cases you could see how hiding all other layers could be useful, though in our case it will be easiest to paint the obstacles in with our base layer visible.

Save our current Brush

Let's (for practice's sake) keep our current grass brush as Brush #1, so we can easily switch back to it. To do so, click the Brush menu, and select Brush #2, like this.

Note: the Brush you currently have selected is displayed in the bottom left of your screen

Create an obstacle Brush

We should have some good choices for an obstacle in our Image Map. I'm going to go with a wooden crate image. Once you select which obstacle to use, simply left click on its image in the Image Library. Now, paint one square of that obstacle, like so.

We now need to set some special properties about this tile, in order to prevent the player from walking over it. To edit the tile's properties, Control-Click on it. Edit the Custom Data and Collision Active? fields as shown, and click save.

The Custom Data field can be accessed whenever our player collides with the object, so we could allow custom behavior if the tile is something special. Collision Active simply tells the game that we want the engine to tell us when things try to walk on this tile.

Now, we can make the fully modified, tricked out tile into a brush. Simply Alt-Click on it. Once that's done, you can paint obstacles to your heart's content.

Painting up an obstacle course

Make some interesting formations, like possibly a maze for your player to run around in, and make sure to close off the boundaries so your player can't escape (for the time being). Also, if you want to have other types of obstacles, simply go back through the steps to create an obstacle brush with a different image. You might get something like this.

Saving our Tile map

Lets save our results. The TGB level builder only supports tile layers, so we have to export them seperately. Click the "File" dropdown menu and select "Save Tile-Layer...".

Next a save dialog should appear with a folder tree on the left side. Browse down to "RPG/data/tilemaps" and type in "worldMap_obstacle.lyr" in the "File Name:" box. Click save and you should get an "OK" confirmation box, click ok and you've finished saving out the first Tile-Layer.

Now click on view and select the layer we haven't saved:

Now you have to save that one, save it as worldMap_bottom.lyr.

Ok so we have finished creating our Multi-Layered Tile Map for our game world. Nothing fancy but just enough to get us started and familiar with the Tile Map Editor and Tile system.

Bringing the Tile Map into Torque Game Builder as our Game World

Starting with the level-editor.

We need to make a level to put our tilemaps on. Click new level. (You can save it later as level1.t2d.)

If you look on the sidebar, under TileMaps, you should see our layers. (You may need to restart TGB.)

Drag and drop the first one (worldMap_bottom.lyr) so that it covers the camera (the blue box). Click the edit tab on the right panel to open the layer's properties. Drag the object until its position is 0, 0. Then, under Scene Object, set its layer to 30 (so it draws behind most things), and under Scripting, set its name to worldMap_bottom, like this.

Do the same with our obstacle layer, except set its layer to 29 (so it draws above the previous layer), set its group to 10 (for future use), set its name to worldMap_obstacle, and under Collision, check Receive Collision and uncheck Send/Receive Physics, so that only "Receive Collisions" is checked. Basically, since the layer will sit still, it won't bump into anything, so it can't Send anything, but it can Receive collisions from moving objects. Additionally, we don't want the layer to react in any way when it is bumped into.

Now you should be safe to press the Play button on TGB:

If yours works like mine (though with your different Tile Map creation) then congratulations!

Back to the Torque Game Builder section of TDN