2.TILES
tga images, colors, tiles format




As I said before, tiles are small images that are used to create the tile map. DizzyAGE stores these tiles in uncompressed TGA files of 24 or 32 bits per pixel. A TGA file stores the image as a matrix of pixels (points), each pixel being represented by it's color.



As you probably know, computer colors are composed from three color channels (red, green, blue) each holding values from 0 to 255. By mixing these three channels together, a computer is able to display up to 16 milion colors. 32 bits TGA have an extra channel, called alpha, used for transparency ranging from 0 (invisible) to 255 (opaque). This alpha channel acts like a transparency mask applied to the image. If alpha is missing (24 bit TGA files) the opaque value is assumed. Here is an example:


Observe the difference between the opaque version of the tile (where alpha channel is ignored) and the transparent one. The red part of the image is made fully transparent where the alpha channel is black (0) and the blue background can be seen through it. The part where the alpha channel is white (255) makes the image opaque so it is overlapped on the background.

To edit or create tiles you must use a graphic editor that supports alpha channel editing,
like Adobe Photoshop or GIMP that is free. You can also search the article section on the DizzyAGE website about how to edit tiles in such programs.


Tiles content

Now, I must tell you that in DizzyAGE, a tile can contain not only one element, but it can represent multiple objects or parts of them. The editor will allow you to select a rectangular area from the tile and use it in the tile map, like it would be a single tile itself. This way, you can group similar elements in a single tile, like more versions of grass or plants.



DizzyAGE also supports animated tiles. This kind of tiles contains a number of animation frames, placed horizontaly one after another, in the order of appearance. All frames must have the same width and height. The tile must have the with size multiple of the frame's width.



The above tile animate Dizzy "in place" and it will be the job of the game engine to acctually move it up and down, during the jump, if permited by surrounding enviroment.


Tiles names

The DizzyAGE engine access each tile using an unique ID, specified in it's file name. And also from the file name, it knows if the tile is animated or not. So the tile's file name must have a special format to be understood by the engine or by the editor. Here it is:

ID tilename.tga
for non-animated tiles

ID tilename FRAMES.tga
for animated tiles

The ID is an unique and positive integer number, folowed by a space character and a suggestive, not to long, name for the tile. No spaces are allowed inside this tile's name. If the tile is animated, after the tile's name, another space character follows and then, the number of animated frames.
Here are some examples:


Tile files can be placed in any folder inside the tiles folder and, as long as the above naming convention is respected, the editor and the engine will find and load all of them.

Don't worry about the tiles being uncompressed. When you release the game, all it's data is packed and it's size will be very much reduced.


Conclusion

Here are a few things to remember:
  • use only uncompressed TGA files with 24 or 32 bits.
  • in the alpha channel, black (0) is full transparent and white (255) is full opaque.
  • use only unique ids in the names of tile files.
  • animated tiles must have the width multiple of the animation frame's width.
  • match the number of animation frames from a tile with the frames count in the file's name.
  • when naming tile files, use the space character only to separate the id and the frame's count.
So, in this chapter you have learned about TGA files, computer colors and their red, green, blue and alpha channels, about simple and multi-element tiles, about animations and about the naming convention of tile files. Now you are ready to start the editor which is exactly what we'll do in the next chapter!