Image Map Creation Reference

Introduction

This is a simple reference on how to create an Image Map in Torque 2D. This is specifically for a full image Image Map. This means our source image (either a .jpg or .png) should have our desired resulting image as the entire image file (other options would allow us to have multiple images tiled).

Getting the source art

What images to use

Here are two images provided as source art for our example (feel free to gather your own two images).

To get a copy of these images right click the images and choose a save image option

Where do I save the images?

There are a couple things to keep in mind when saving your images. First it must be a part of your Torque 2D working directory. This means if you are working in default Torque your directory should first start with "Example"... then it should go to a few folders, these may include "common", "spacescroller", and "T2D". Well "common" is one utilized by all of our other directories; however, "spacescroller" and "T2D" are entirely different projects/games. So if you are working in "T2D" you'll want your images to be somewhere within that. By default there already is an images folder at "T2D/client/images" which is a good location to place our art now.

Once you have the images saved in "T2D/client/images" then we can move on to adding the necessary scripts to tell Torque 2D to load these images when we start making our game.

How to load the Image Maps in script

What scripts to edit?

The first step in scripting the Image Maps is knowing where to script them, sometimes this means creating a new file. In this case we can simply append them to an existing script file. The file we will add our scripts to is in the (note: if you aren't working in the T2D directory - if you are doing the Strategy tutorial then you will want to replace T2D with "Strategy" - then replace T2D with whichever directory you are working in) "T2D/client/datablocks.cs". So open the datablocks.cs file in your choice of text/script editor and you'll see its empty. ready for us to insert our own Image Map "Datablocks." Insert this code into the file.

// --------------------------------------------------------------------
// Forest Moss Image Map.
// --------------------------------------------------------------------
datablock t2dImageMapDatablock(ForestMossImageMap)
{
	imageName = "~/client/images/ForestMoss";
	imageMode = full;
};

// --------------------------------------------------------------------
// Thick Grass Image Map.
// --------------------------------------------------------------------
datablock t2dImageMapDatablock(ThickGrassImageMap)
{
	imageName = "~/client/images/ThickGrass";
	imageMode = full;
};

Ok lets go over the sintax line by line

First we have "datablock t2dImageMapDatablock(ForestMossImageMap)" Much like when we create a static sprite we specify "new t2dStaticSprite(testSprite);" we have datablock. This initializes that we are in fact creating a datablock and not a standard object. Just like an object we place the objects name within the parenthesis. We then start the object parameters/properties with a curly brace.

Next we have two parameters specified... "imageName" and "imageMode". The T2D Image Map reference doc by Melv gives you an incredibly detailed description of this, so I will lay it out very simply (be sure to reference that doc to fully understand Image Maps). "imageName" is pretty easy to understand, its the path to the image minus the extension. Note we don't specify imageNAlso note the tilde represents the relative path from your home directory, in this case for me its "T2D".

Last we close the object with a curly brace and a ";" this is the same as any other T2D object.

Thats it... now your Image Map will be loaded on running Torque 2D. To test this you can simply start Torque 2D, bring up the console with the tilde key. Type this command:

new t2dStaticSprite(testSprite) { sceneGraph = t2dScene; };

Press enter and then type this command:

testSprite.setImageMap(ForestMossImageMap);

Press enter another time and close the console window with the tilde key. Now you should see your Forest Moss image sitting in the middle of your screen.

All in all it isn't hard to create Image Maps.