Torque 2D/Tile Map Editor Tutorial
From TDN
| This article or section needs updating. Parts of this article or section have been identified as out of date. Reason: TGB 1.1.1 completely removed the Tilemap editor and replaced it with an inline Tilelayer editing tool. Check /documentation/tutorials/Feature Tutorials/Tile Map.pdf in the meantime. For 1.1.5, see Tutorials / Feature / Tile Maps (\documentation\content\documentation\Tutorials\Feature\Tile Maps.html) If you are able to revise this information, please do so and remove this 'update' flag when finished. |
Torque Game Builder - Tile Map Tutorial
Welcome to TGB! This tutorial is set up with beginners in mind and will cover the following:
- Tile Map Builder Basic Functions
- Creating Brushes in the Tile Map Builder
- Working with Layers in the Tile Map Builder
- Collision areas in the Tile Map Builder
- Bringing Tile Layers into the Level Builder
What Are Tiles For?
The main use of the TGB Tile Map Builder is to make the map of your game world. Any 2D game that happens in some sort of a world will use a map of some sort whether it is a top-down map (e.g. Frogger), side-view map (e.g. Mario Bros.), or something more complicated like a "3/4 view" map (e.g. Double Dragon). In almost every case, the map used for a 2D game will have repeating elements. Using the examples above, here are screenshots with some repeating elements outlined in yellow:
Using a tilemap to create repeating elements has many advantages. One of the most important of these is that memory is used more efficiently... rather than having to load a large graphics file with your whole map in it, your game refers to a few small files that are repeated. This decreases overall filesize for your game as well, which means faster download time for online games. Another advantage is the ease of level construction. When you use a tilemap system, you have a level construction set that makes changes and initial construction very quick and simple.
Setting Up For This Tutorial
A good, standard practice for TGB when starting something new is to create a new project. Load up the Level Builder and click on File...New Project. Feel free to name this new project whatever you wish, the example used here will be TileTutorial. Our Template will remain Empty Game.
 |  |
| Figure 1.1 | Figure 1.2 |
After your project is created, copy this bitmap into your games\YourProjectName\data\images folder: 
Inside the Level Builder again, click on the “Create a new ImageMap†button found in the Create Tab.
Figure 1.3
Find the exampletile.png you pasted into your images folder and click Select. In the Image Builder, change the Image Mode to cell. The only other thing that might need changing is to check the Filter Pad box. Click Save and now you are ready to work with the Tile Editor.
Figure 1.4
Figure 1.5
The TGB Tile Map Builder
To open up the Tile Map Builder, run TGB and from the Project menu, select Tile Map Builder...
Figure 1.6
Now you see our blank-slate Tile Map Builder. The Image Library window in the upper right is where we'll load our image files. The blue grid is our actual map, where we'll be placing our tiles. Let's start by loading the image we set up in the Level Builder. In the Image Library, click on the drop down next to the red 'X', and from the drop-down select ExampletileImageMap (Figure 1.7). Your Image Library will now look like Figure 1.8.
 |  |
| Figure 1.7 | Figure 1.8 |
If it doesn't show all the tiles, grab the bottom-right corner and resize it.
What we have now is a set of tiles to choose from. This is a very simple set of small images for the sake of example. Your tiles can be as high resolution as you like, and you can store a large number of tiles in a single image.
To select a tile to draw with, simply left-click on it in the Image Library. Now, left-clicking on the actual Tile Map (the blue grid) will draw that tile in the spot that you select. Right-clicking on the grid will erase. Shift-Left-Click and drag will create an area that will be filled with the selected tile. Shift-Right-Click will erase the selected area. Give it a try. (When you change draw tiles, it will ask you to confirm that you want to change your brush... just click YES). You can see how simple it will be to draw out a level. Go ahead and play around with it... if you do something you don't like, just choose Edit>Undo from the menu. It took me about a minute to make this little scene that looks like it was plucked out of an 80's arcade game:
Figure 1.9
So that's how simple it is to draw a level with the Tile Map Builder. Before we go on to making brushes, lets explore a few other commands available to us. Obviously, your game isn't confined to the size of your screen... you can scroll in all directions, which means your map has to exist in all directions. To see more of your map, you can zoom out with the '[' key and zoom in with the ']' key. Give it a try. You can also move around in all directions using the cursor arrow keys. Go ahead and give that a try. When you're ready to return to the default view, simply hit the Home key. Pretty cool, pretty cool. If you forget the keys, you can find a list under Help>Shortcut keys... in the menu. If you try it now, you can see there's a few more basic commands to talk about...
Note: sometimes selecting a menu item will draw on your tilemap at the same point you clicked on the menu. Simply right-click to erase the tile. This will be fixed in future releases. This appears to have been fixed in TGB v1.0.0 Tile Builder v1.2
Brushes
Another great time saving feature of the Tile Map Builder is the ability to create brushes. A brush is really a set of tiles that you want to draw in your game in the same configuration in multiple places. This is maybe easier to understand by example. Let's say in the example above that the far left floating platform is something that we want to have many of in our game. What we can do is create a brush that just draws the whole platform. To do this, hold down Alt while dragging across a set of tiles, so that it looks like this:
Figure 1.10
A screen will come up asking you to assign this selection to a brush. Click SAVE. After you do this, left-clicking in the grid will draw the whole set of selected tiles at once. Go ahead and test this system out on your Tile map. Interestingly, right-clicking will erase a pattern of tiles in the shape of your brush. Now, if you make another brush or select a tile from the Image Library (and confirm in the dialog box) your multiple tile brush will be replaced by the single tile you've selected. To avoid this, just choose a different brush from the Brush menu before changing. For example, to make a second brush, select Brush>Brush #2, then click on one of the tiles in the Image Library. If for some reason you want to turn off that brush overwrite message, you can de-select Brush>Confirm Brush Overwrites from the menu.
In the Brush menu you can also see that there are options for loading and saving the brushes you create. Saving will save all your brushes into one file for later use. The only requirement is that whatever imagemaps you used in the original brushes are still available when the brushes are loaded.
Layers
The Tile Map Builder supports multiple layers of tiles. This way you can create backgrounds and other effects using layers. If you click on the Layer menu item, you'll see the options available for this system... adding, removing, clearing, and resizing. The Resize Layer... option allows you to change the overall number of tiles in your world. The Resize Tiles... option lets you change the actual tile size.
Allowing layers with different size tiles is an unusual feature of Torque Game Builder. You could use this to create backgrounds with smaller versions of your tiles, creating the illusion of distance. You can also use this feature to cover a greater area with fewer tiles. This is what we're going to do as an example. Using the example tilemap shown above, I selected Layers>Add Layer... to make a new layer. In the Add Tile-Layer dialog box, I changed the Tile Count (both width and height) to 25, and the Tile Size (both width and height) to 8. This makes tiles twice as big as the default tiles that we used in the first layer. When you do this, you'll see that the grid has changed size. If you don't see your old layer, under your new one, choose View>All Layers from the menu. You should now see this:
Figure 1.11
Now, if you select the water tile from the Image Library, and fill in the tiles on the bottom of the screen, you'll see what I mean about using less tiles for a larger area. When you're done, the bottom of the level should look like this:
Figure 1.12
With two layers of tiles on the screen like this, it's easier to understand some of the layer view functionality. If you de-select View>All Layers in the menu (or just press 'A') you'll see one layer at a time. Page-Up and Page-Dn will move up and down in the layers, respectively. In the View menu, you can see how to choose the layers explicitly, and you can also see that it's possible to set the view 'Up to Current Layer', meaning that you will only see the currently selected layers and all layers below it.
Before moving on, select File>Save Tile-Map... from the menu. Be sure to give the name an extension and save it to your tilemaps folder. Currently the tile editor will accept any extension, but ".map" is commonly used. In order for us to bring a Tile Map into the Level Builder, we need to save each layer seperately. To do this, select File>Save Tile-Layer... with the extension of ".lyr". While you might be able to view all layers at once, you can only select and save one at a time. You can see your current layer either in the lower right corner of the screen or towards the bottom of the view menu (Layer #--).
Collision Areas
Torque Game Builder has a versatile collision area system within its tile system. The simplest way to set up a tile that will be collided with is to use the Image Library collision toggle. That's the little red 'X' next to the ImageMap label. If you click it, you'll see the 'X' replaced with a green check-mark. Now select one of your tiles to draw with and draw one on the screen. It should be outlined in a green square.
Figure 1.13
This method sets a whole tile as a collision area. More complex collision areas can be created using the Edit Tile dialog...
Collision Areas and The Edit Tile Dialog
The Edit Tile dialog is used for more fine-grained control over individual tiles. To bring it up, left-click on a tile while holding the Ctrl key. There are a variety of configuration options here, but since we were already talking about collision, lets start there (at the bottom) and work our way up.
The Collision Polygon Scale, Collision Polygon Count, and Collision Polygon Definition fields together define the collision area for the tile. The empty button below the Collision Polygon Definition contains a drop-down of predefined collision areas. Select the one called Spike (Narrow-Up), make sure that the Collision Active toggle is checked, and click Save. You'll see a sharp green triangle on the selected tile.
Figure 1.14
I'll use this "spike" as an example of how to set up a collision polygon... Collision Polygon Count defines the number of points in the polygon. In this case we have a triangle, so the value is 3. Collision Polygon Definition is the coordinates of those points in a list. For these coordinates, the center of the tile is (0,0). So, in our example, we have the bottom-left, top, and bottom-right points: (-0.25, 1), (0,-1), and (0.25, 1) defining our triangle. Collision Polygon Scale provides a simple way of scaling the collision area. All the coordinate values are multiplied by these 2 scale values. The allowed range of the scale values and the coordinate values is from 0 to 1.
More in the Edit Tile Dialog
The Edit Tile Dialog has a few more nifty features to check out besides the collision polygon system. Let's start back at the top...
The Script (when shown) field contains the info that will be passed to the layer-callback when the tile is shown on screen. This is useful for tiles requiring initialization when they are first displayed.
The Custom Data field can be used to contain data about the tile, often for collision. Most commonly, this would be used to define your tile-types for collisions or other script functionality. So, in our example, we might use "GroundOverWater", "Tree", "Ground", and "Water" to label each of our tile types. The drop-down under Custom Data contains all the different entries for Custom Data in tiles on the current layer. This drop-down helps you be consistent, and makes it easier to select your tile types from other tile types already in the layer. Both Custom Data and Script are related to scripting with your tile layer, which will be covered in more detail in another tutorial.
Flip X and Flip Y simply flip the graphics of a tile. Note that this does not affect the collision polygon.
This can be a lot of data to set up for each tile, especially if you had to do the same thing for a whole bunch of similar tiles. Luckily when you create brushes, the selected tiles are copied including any tile info set up in this dialog.
Blending
The Tile Builder has the built in option to blend different layers of a tile map so you can preview the look in real time. To access this go to the Layers menu and select Layer Blend...
 |  |
| Figure 1.15 | Figure 1.16 |
To make one of your layers semi transparent, for example, set the last blend value to 0.5 as seen in Figure 1.16.
Loading Tile Layers into the Level Builder
Hopefully from the examples above you have saved some tile layers (with the .lyr extension). For the Level Builder to correctly find your files, they need to be saved into the games\YourProjectName\data\tilemaps folder. Exit out of the Tile Map Builder (File>Quit...). If you now look in your Create Tab in the Tile Maps rollout, you should now see the tile layer or layers you saved.
Figure 1.17
Drag your layers out into the scene view. You might need to edit their sizes via the edit tab to fit properly within your camera or scene view.
Figure 1.18
Loading a Tilemap via Script
This is not a scripting tutorial, but here is a brief example of how to load a tilemap into a TGB game. This example assumes that you have saved your tilemap as "tilemap.map" and that you are loading it in a function called "createLevel".
function createLevel()
{
%tileMap = new t2dTileMap() { scenegraph = t2dscene; };
%tileMap.loadTileMap("~/data/tilemaps/tilemap.map");
%layer = %tileMap.getTileLayer(0);
%layer.setImmovable();
%layer.setCollisionActive(false, true); // arguments are (send, receive) collisions
}
The first two lines are the meat of loading your tilemap. First, we create a t2dTileMap object and add it to our scenegraph. In the next line, we tell that object what file to find the tilemap information in.
The next lines set up collisions for your tilemap. You'll notice from the first line that collision is set up per layer. The next line sets our layer to be immovable (as far as our physics engine goes). The setCollisionActive function sets our layer up to not check if it ran into something (since it can't move) but to check if things ran into it. This is the simplest possible collision setup. Other Torque Game Builder tutorials contain more in depth explanations of setting up collisions in your game.
Conclusion
This has been a basic introduction to TGB's Tile Map Builder and tile system in general. We have been working here with static tiles only. Animated tiles are also possible, as well as "active" tiles, which are tiles that can be controlled by script in complex ways, such as a mounted turret. You can see some examples of animated tiles in the Image Library dropdown. These will be discussed in another tutorial, along with how to use tiles and tilemaps in script.
Happy Tiling!
Categories: Needs Updating | T2D | TGB | Tutorial
