Creating The World (utilizing Tile Maps)

Introduction

NOTE: This tutorial is built using Torque Game Builder 1.1 Beta 3.

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 multi-layered 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 the next section, we won't get too in depth into the editor since our framework for a RTS doesn't demand advanced sets of Tile Maps.

Preparation for tutorial

To prepare for the Strategy tutorial set we are going to first browse to our Torque Game Builder directoy. This should be "C:\Torque2D\games", unless you chose a different install directory. The important thing to keep in mind is folders such as "T2D" and "spacescroller" are working directories. Basically what this means is "T2D" and "spacescroller" are 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 RTS project we're working on. We have a simple world made up of differing grass tiles. So the bottom layer is a broad tilemap made up of many grass tiles, while the layer above it is of a differing color grass tile that we can blend into the lower layer. Tile Maps should start to be clicking a bit more, we can then make multiple layers of trees or water if we like, making sure everything is ordered how we want it. 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 be different widths and 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 (though we won't utilize this in the Strategy set of tutorials).

Getting images

Ok now lets get started in creating something. In this tutorial we will create two layers of grass on a Tile Map to represent our world, the next two images are the ones I used from Nauris' free T2D pack, feel free to use your own.

Base Layer

Over Layer

Note: These images aren't exactly the best as a massively tiled grass image 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 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).

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 sure 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.

If you used the images I provided, you might see the same list, the next step is to select the image map you want to use, in this case I'm going to select "ForestMossImageMap." After you select it you should see your image map come up zoomed in within the Image Library like this.

Painting Tile images

Now we can left click on the zoomed in 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.

Making selections brushes

Ok now that we can see the entire Tile Map Layer we want to paint the base grass layer accross the entire thi ng. Fortunately, there's another useful function of Brushes. We can select a group of images on the Tile Map Layer and store than entire set as a brush to paint on the Tile Map Layers. This could greatly speed up what we want to do. First we must paint a box of image maps, its your choice how big you want your brush to be, I'm going to do mine roughly 9 x 9, so it will look something like this.

Now to make this block of images a Brush we need to hold ALT then left click and drag a selection box within the boxes. What I mean by within is that it will grab all the Tiles that the selection box touches, so it is usually best to target the middle of the each corner Tile... something like this would work well.

When you let go of your mouse you'll get a confirmation box asking if you want to assign this selection to a brush. rename the brush name to "Grass Chunk" and click save like this.

Now if you click and drag it will paint that entire block of grass textures, also note that if you right click and drag it will erase at that size as well. This tool can be extremely useful. With the tools we now know we can get to our next section, the actual construction of our Multi-Layered Tile Map.

Creating the Multi-Layered Tile Map

Building our base layer

Paint the entire Tile Map

Ok now leaving off our previous step you should have a 9 x 9 set of Forest Moss images on the default Tile Map Layer. We then held ALT and created a selection box within all the boxes to make it its own brush called "Grass Chunk."

Now lets use this new brush and paint our entire Tile Map Layer full of the Forest Moss image, like this.

Zoom in and check it out

Now that we have our base layer done we can zoom in and look at it 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 use the other grass-like texture as highlights. First we will create a new Tile Map Layer and then we will paint a few highlight tiles in this layer. Tile Map Editor we will lower the alpha of our "over" layer so it blends nicely into our world Tile Map when we bring it into the engine.

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 over highlight 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 highlight grass textures in with our base layer visible.

Select our "over" image

Now we want to select the image we chose as our "over" layer grass texture in the "Image Library." So just as we originally chose the "Forest Moss" image map, we click the Image Library drop down and choose "ThickGrassImageMap" (unless you have a different set/named images you're using), like this.

Select our "over" image as a new Brush

Now our selected over layer grass texture should show up zoomed in the Image Library menu box (just like our base layer image). To select it we will do one step before we repeat our previous process. Since we have our current Brush set as "Grass Chunk" if we were to left click the zoomed in over image right now we would be prompted with a yes/no dialog asking if we want to overwrite our "Grass Chunk" brush. Since we went through all the work of creating our brush we might as well keep it, so to select another brush slot to place our new image in we simply go to the "Brush" dropdown menu and select "Brush #2" as in the following picture.

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

Paint some highlights

Now that we have a different Brush selected lets left click the over grass image. This should now set it as our Brush #2. Time to start painting some highlights, its up to you how much you want to put on this layer. Here is my results (keep in mind I am no artist lol).

Blend our "over" Layer

Now we can do a useful thing, we can preview what it will be like with blending options set inside the Tile Map Editor. To do this go to the Layers dropdown menu and select "Layer Blend..." like this.

This will then bring up the following dialog, I simply set the last blend value to 0.5... this will bring the alpha level down to half so its halfway transparent, like this.

The result is a nice blend like this (compare this to my picture before modifying the alpha level to see how useful this can be).

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 "Strategy/data/tilemaps" and type in "worldMap_top.lyr" in the "File Name:" box... like this.

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.)

Drop the first one on, worldMap_bottom, and put it so that it is in the camera area, (the blue square).

Image:Torque 2D/GenreTutorials/Strategy Place TileMap.png

Set its layer to 30 (this way it renders behind most things), we set its group to 10 for further organization and later referencing, and its name to worldMap_bottom.

Image:Torque 2D/GenreTutorials/Strategy Set Name.png

Do this for the second one but name it worldMap_top.

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