# TILE STUDIO TUTORIAL

By Mike Wiering / University of Nijmegen

### Contents

When to use Tile Studio
Importing Tiles
Selecting Colors
The Palette Manager
Drawing Tools
The Map Editor
Bounds and Map Codes
Animation
Importing PovRay animations
Creating a Tile Studio Definition (.tsd) file
Generating Code

### When to use Tile Studio

Tile Studio is a combination of a tile editor and a map editor and was made to design games. The program was not designed to edit large bitmaps like normal drawing programs. Tile Studio works best with small bitmaps (tiles) from 8x8 to about 64x64 pixels. However, larger or smaller sizes can also be used.

With Tile Studio, you can only design graphics and levels, not complete games. You will need a real programming language to write your actual game. In order to use the graphics and levels you create, you will also need (to create) an interface between Tile Studio and your programming language (.tsd file). Besides, you will also need (to write) a library for your language that can actually run your levels. At the moment, the most complete library that can easily be used with Tile Studio is the Clean Game Library.

### Importing Tiles

With Tile Studio, you can easily Import Tiles from existing .BMP or .PNG bitmaps (File | Import Tiles). This way, you can easily reuse tiles you made before in other programs or use tiles from screenshots of other games.

Import tiles from any .BMP bitmap

There is an auto-detect button that can often find the size of the tiles automatically once the transparent color has been set properly. You can set the transparent color by clicking anywhere in the bitmap. Hold shift down to select more than one color (as in the example). To see if your parameters are correct, move the mouse pointer over the image and you will see the separate tiles appear in the box at the bottom-right.

Each set of tiles (called tile set here) must have a unique identifier (name). This identifier is used when you generate code for your game. While programming your game, you can refer to identifiers you define here.

If want to import tiles from several bitmaps, just import them one by one, then copy all these tiles to a new tile set using the Copy Tiles (Edit | Copy Tiles...). Finally, remove all the duplicate tiles with Remove Duplicates from the Tile menu.

If you import tiles and then modify your original bitmap, you can re-import the tiles into your current tile set by pressing F5 (Refresh imported tiles). This only works for the tile set you imported, not for copies of it. Be careful: all changes you have made to your tile set after importing it the first time will be lost! Besides, if you add tiles, remove (duplicate) tiles, move tiles in your tile set or change the dimensions of your imported bitmap, your maps can be screwed up! So either edit your tiles inside Tile Studio or with your external program, but not with both!

### Selecting Colors

By default, Tile Studio uses a smooth RGB palette. However, by pressing Shift-P, you can switch to a different type of palette, which contains horizontal and vertical shades of red, green and blue. This palette may look a bit strange, it is formed by colors that have an equal RGB distance to each other. The order of the colors can be changed at any time by pressing Ctrl+P (Rearrange Palette). The color depth can also be changed from 6 to 10 with Ctrl+6, Ctrl+7, Ctrl+8, Ctrl+9 and Ctrl+0. At depth 6, only 6x6x6=216 colors are used, making your bitmaps suitable for 256 color mode. At any time, tiles can be matched to the current palette (Tile | Match Colors).

The color palette at depth 6 (left) and a color pattern (right)

To select a color, click the palette with the left button. The selected color is displayed in the box under the palette at the left. By clicking in this box you can select any RGB color from a color dialog. You can also select a color with the right mouse button. This color will then be displayed as the transparent color. To reset it, click in the (transparent) box at the center.

Whenever you select a color (with the left mouse button) a color pattern appears in the box at the right. If you click again without moving your mouse pointer, the colors will slightly change. Click several times to find the colors you need. Then you make a selection in this box to indicate which colors you want to use. An arrow appears at the top of this box. You can move this arrow to the left and right by pressing the keys - and =. Most of the drawing tools can work with such color patterns. Color patterns you have used in your tiles are saved and can be selected with [ and ].

Normally, color patterns are based on one color (from dark to light). However, you can create a color pattern from the color you have selected to a new color by holding shift down.

When drawing, you can select a color from your bitmap by clicking with the right button. Its also possible to get a separate palette of all the colors used in your tiles by pressing Ctrl+U.

### The Palette Manager

Tile Studio can be used for projects with palette based graphics. Palettes may contain up to 256 entries. Part of a palette may be left undefined (so you can reserve those non-preset entries for other things). Each tile set can have it's own palette, but one palette can be used for several tile sets. You can create palettes with the palette manager (Ctrl+F9). You can edit each color separately and make smooth transitions between colors (hold Shift down). But you can also import your palette, generated it or create it from the colors you have used in your tile set so far.

The Palette Manager

Normally, its best to create your palette after drawing your tiles. Press Ctrl+U so you have a panel showing all the colors you have used and then start the palette manager. When you create a new palette (New...), it will contain the colors you have used in your tile set. However, this only works if you haven't used more than 256 colors. If you have, set the color depth to a lower value, for example 6 (Ctrl+6) and generate your used colors list again (Ctrl+U).

### Drawing Tools

The drawing tools are displayed at the left. Here is a description of these drawing tools:

| Select this pencil to draw pixel by pixel no matter how thick your line is. If a color pattern is selected, the pencil color is the last color selected in the pattern. Drawing with the transparent color is also possible: click the transparent color with the left mouse button. With the Shift key down, you can erase with the right mouse button.
| The brush works just like the pencil, except it can be made thicker by changing the line width. When a color pattern is selected, all lines drawn with a brush start with the first color and end with the last.
| This line indicates the line width. By clicking with the left button, the line can be made wider, clicking with the right button will make the line narrower. This line width is used with the paint brush, lines, rectangles, circles and round rectangles.
| With these tools you can draw lines, rectangles, circles and round circles. The thickness of the lines depends on the line width again. There are also filled versions of these tools (except the line tool of course). When a color pattern is selected, the shape is filled from the outside to the center with colors in the pattern. Hold Shift down to only overwrite colors that are not in the pattern or have a lower index (try it!). You can also do a gradient fill with these tools: make sure you have selected a pattern, then start drawing and type "h", "v" or "d" for horizontal, vertical or diagonal. Also try holding Ctrl down before you start drawing!
| Use this tool to fill any area with the selected color. Again, this can also be used with the transparent color. You can also fill the entire tile or a selection by pressing F (Fill).
| These are special effects that can be used in combination with the other tools above. Whenever the "Brighten" button (with the sun) is down, instead of drawing with the selected color, you will draw with light! If the "Darken" button is down (the moon), everything becomes darker. Both these buttons can be used in combination with the Alt key, which makes the effect much smaller. The next button "Add Colors" combines the selected color with the colors in your bitmap. You get the average of what you draw and what was already there. Again, you can use Alt to make the effect much smaller. You can also get these effects at real-time (Tile | Real Time Lightening). The last button "Smooth Random Fill" normally makes everything smoother. If you also press Shift, a little noise is added. If a color pattern is selected, the area will be filled with random colors from your pattern.
| With this tool you can make a selection in your tile. You can then drag your selection to a different location, copy it or (stetch) paste into it, flip it, move pixels or match colors.

### The Map Editor

By pressing Ctrl+Tab, you can switch between the tile editor and the map editor. A map is always based on a tile set, so you should first create (some of) your tiles before creating a map. Each tile set can have several maps, but each map can only use tiles from one tile set.

Please note that the Undo function is not available for the map editor in the current version of Tile Studio.

Using the map editor, you can create a complete layer of tiles. As you place your tiles into the map, you can mirror them horizontally and vertically and also combine tiles to new ones. In the example below, the grass is placed in front of the tree and the grass tile is mirrored horizontally.

Example of overlapping tiles (left) and the current tile (right)

Selecting tiles might require some practice. At the right of the screen, the current tile is displayed (at the top). This is the tile you are drawing with. The current tile actually has three layers, so three tiles can be placed in front of each other. These are displayed from left to right. All three of these tiles can be mirrored horizontally or vertically. To change one of these tiles, first select the layer you want to change (in the example above, the middle layer is selected) by pressing the right mouse button or the Tab key, then select a tile from your tile set. Finally, you can select the 'h' and 'v' to mirror the tile.

The map editor has the following drawing tools:

| When the pencil tool is selected, you can draw with the current tile. Just hold the left mouse button down and move the mouse pointer through the map. All three layers are completely overwritten, not only the selected layer. With the right mouse button, you can select a new current tile from the map.
| With this tool you can make a selection in the map. You can easily fill a whole selection with a tile by clicking on the tile in your tile set. By pressing Del, you can remove all tiles in the selection. Whenever you copy a selection, it appears on the clipboard at the right, see the image below. To unselect, press the right mouse button.
| Use this tool if you have several small bitmaps that together form a larger one. Select the first (top-left) tile and move the mouse pointer. The area you select will be filled with separate tiles in the same order as they appear in your tile set. This function works with one layer at a time.
| This is a normal block fill function. Just create your current tile with three layers and use this tool to draw larger areas. All three layers are overwritten.

You can paste areas from the clipboard into your map by first making a selection and then pressing Ctrl+V. If your selection is too large, the tiles will be repeated. There is also a special Stretch Paste function to paste a block of tiles into a selection with a different size. All the edge tiles will be placed at the edge of the new selection.

The Clipboard (left) and example of the Stretch Paste function (right)

In this example, the large wall was made by copying the small one and then Stretch-Pasting it into a much larger selection. Another interesting function is Random Fill (Ctrl+R). It fills the selection with random tiles from the clipboard.

### Bounds and Map Codes

In Tile Studio, you can define bounds in the tile editor and in the map editor. Bounds are "walls" in your map that indicate where objects can move (whenever an object passes a bound, a collision occurs). Usually, you will use bounds to indicate the ground, walls, platforms, etc.

Bounds in a level

The image above shows some bounds (the white lines). Each tile can have upper, lower, left and right bounds set or not set. Diagonal bounds are also possible (/ and \). When you draw a tile that will always have the same bounds, you can set create these bounds in the tile editor. Every time you insert this tile in a map, these bounds are automatically set. You can also first place a tile in your map, then select it and change the selection's bounds.

Map Codes are numbers from 1 to 255 that can be placed at any position in the map. These numbers can be used by your game to create objects and for other things. In the map, these codes are displayed as hexadecimal numbers (takes less space than decimal), from 01 to FF. To change a map code, click on the button with 00.

### Animation

Tile Studio is also very useful for designing animated sprites. You can design sprites in the same way as tiles and use several tiles for the separate animation frames. You can even have your animation run while you are drawing! Select the first frame with Shift+[, the last with Shift+]. Then turn animation on (Ctrl+A) and your animation start to run.

To create animation sequences you can use in your game, you have to create a special map for the sequence. Place all the frames in a row in this map and add a map code to each tile, indicating the number of frames the tile should be displayed.

Tile Sequence

The sequence above consists of two tiles, which both run for 10 (hex) frames. You can create a Tile Sequence by selecting these tiles (two in this example) and pressing Shift+F7 (Convert to Tile Sequence). You will see your new tile sequence running at the bottom-right of the screen. You can insert this tile sequence by selecting an area in the map and pressing F7 (Insert Tile Sequence). The number of the tile sequence is displayed in red (01 in the example). This number is actually everything you need to be able to use the sequence in your game. So removing the separate tiles from this map (at the left) would do no harm.

### Importing PovRay animations

If you use PorRay to create your animations, you can import them into Tile Studio (Animation | Import PovRay Animation...). To do this, you must first render all the frames and make sure you have .BMP bitmaps, with names like: Name0.bmp, Name1.bmp, Name2.bmp, etc. Select one of these files (Open...) and wait for Tile Studio to find the number of frames. You can choose a divide factor and X and Y shift values to make the graphics fit into your tile set. Warning: importing a PovRay animation clears the entire tile set.

### Creating a Tile Studio Definition (.tsd) file

The output Tile Studio generates is programmable and depends on the .tsd file you use. You can edit this file in Tile Studio by pressing Shift+F10. Because this is rather complicated, only try this if you have some programming experience.

The .tsd files are meant as source code which you can import directly into your game source. A very simple .tsd file could look like this:

        ; My first Tile Studio Definition file
        #file c:\\hello.txt
        Hello, world!
        #end file

This is just to give you an idea how it works, it isn't very useful at all. Every type you press F10 (Generate Code), the file c:\hello.txt is created with the text "Hello, world!". Note that `\\` is converted to `\`. In the same way, `\n` can be used for a new line. All commands are preceded by a `#` and comment lines start with a `;`. Everything you place between `#file` and `#end file` will be written to the file.

There are several variables, known by Tile Studio, which can be placed between `<` and `>`. These will be interpreted as the information is written to the file.

        ; create the graphics files
        #tileset
        #tilebitmap <TileSetIdentifier>.BMP
        #end tilebitmap
        #end tileset

        ; Pascal procedure to check if all graphics files exist
        #file CHECKBMP.INC
          procedure CheckBMPFiles;
          begin
        #tileset
            if not Exists ('<TileSetIdentifier>.BMP') then
              Error ('Cannot find <TileSetIdentifier>.BMP');
        #end tileset
          end;
        #end file

This example is a little more complicated. First it goes through all the tile sets you have created (`#tileset` ... `#end tileset`). The command `#tilebitmap` makes Tile Studio create a bitmap containing all the tiles you have used in your maps (24-bit BMP only). Here, we use the name `<TileSetIdentifier>.BMP`. Here, TileSetIdentifier is a variable, which is replaced by the names you gave to your tile sets. Suppose you have two tile sets, named Tiles1 and Tiles2, then two bitmaps would be created, named Tiles1.BMP and Tiles2.BMP.

In the example, a file is written named CHECKBMP.INC, containing a Pascal procedure that checks the existence of all the graphics files. If you had the two tile sets Tiles1 and Tiles2 again, you would get the following file, which could be included into a Pascal program.

        procedure CheckBMPFiles;
        begin
          if not Exists ('Tiles1.BMP') then
            Error ('Cannot find Tiles1.BMP');
          if not Exists ('Tiles2.BMP') then
            Error ('Cannot find Tiles2.BMP');
        end;

Below is the complete list of variables and commands you can use in a .tsd file. The syntax of all commands is `#command` ... `#end command`, some commands have optional parameters.

The variables are usually only available within a certain scope, defined by a command. For example, `FrameCount`, can only be used between `#sequencedata` and `#end sequencedata`.

You can print a variable in a special way by adding a colon and a format string to a variable. For example: `<BoundMapValue:"%4xH">` would print the variable BoundMapValue as a 4-digit hexadecimal value followed by the letter `H`.

You can even write complete numeric expressions between the `<` and `>`, these are evaluated by Tile Studio, for example `<TileHeight - Overlap>`. Normally, this feature isn't really necessary, since your compiler is probably capable of calculating `<TileHeight>` - `<Overlap>`. However, it can make your final output file a lot smaller and more readable, like in the following example: `<(R shr 2)+(G shr 2)*0x100+(B shr 2)*0x10000:"0%06xh">`.

#file FileName - Command to start writing to an output file
ProjectName - Name of your Tile Studio project file (without .tsp)
Author - Project information: author
Notes - Project information: notes
Copyright - Project information: copyright notice
OutputDir - Current ouput directory
CurrentDate - Current date
CurrentTime - Current time
TSVersion - Version of Tile Studio
PaletteCount - Total number of palettes
#palette - Command to go through all the palettes

PaletteIdentifier - The identifier of the current palette
PaletteNumber - The number of the current palette (0, 1, 2, ...)
PaletteSize - The total number of entries in the palette
PalettePreset - Number of colors defined in the palette
#palettedata - Command to go through all the palette entries

Index - Current index number
RGB - RGB color value of palette entry
R - Color value for red (0..255)
G - Color value for green
B - Color value for blue

TileSetCount - Total number of tile sets
#tileset - Command to go through all the tile sets

#tilebitmap FileName [MaxWidth] - Command to create the .BMP file
TileSetIdentifier - The identifier of the current tile set
TileSetNumber - The number of the current tile set (0, 1, 2, ...)
TileWidth - Tile width in pixels
TileHeight - Tile height in pixels
HorizontalTileCount - Number of tiles horizontally
VerticalTileCount - Number of tiles vertically
TileSetBitmapWidth - Total bitmap width
TileSetBitmapHeight - Total bitmap height
TransparentPosX - X-position of a transparent pixel
TransparentPosY - Y-position of a transparent pixel
TransparentColorR - Transparent color value for red (0..255)
TransparentColorG - Transparent color value for green
TransparentColorB - Transparent color value for blue
Overlap - Height of vertical overlapping area
BackgroundColorR - Background color value for red (0..255)
BackgroundColorG - Background color value for green
BackgroundColorB - Background color value for blue
PaletteIdentifier - The identifier of the current palette
PaletteNumber - The number of the current palette (0, 1, 2, ...)
PaletteSize - The total number of entries in the palette
PalettePreset - Number of colors defined in the palette
#palettedata - Command to go through all the palette entries

Index - Current index number
RGB - RGB color value of palette entry
R - Color value for red (0..255)
G - Color value for green
B - Color value for blue

TSTileCount - Total number of actual tiles in your tile set
#tstile - Command to go through all the tiles in your tile set

TileNumber - Number of the current tile (0, 1, 2, ...)
#tiledata - Command to go through the pixels of the current tile

X - Current X-position within the tile
Y - Current Y-position within the tile
Pixel - Index number of closest color in palette
RGB - RGB color value of current pixel
R - Color value for red (0..255)
G - Color value for green
B - Color value for blue

TileCount - Total number of tile combinations in your map(s)
#tile - Command to go through all the separate tile combinations

TileNumber - Number of the current tile (0, 1, 2, ...)
#tiledata - Command to go through the pixels of the current tile

X - Current X-position within the tile
Y - Current Y-position within the tile
Pixel - Index number of closest color in palette
RGB - RGB color value of current pixel
R - Color value for red (0..255)
G - Color value for green
B - Color value for blue

SequenceCount - Number of sequences defined
#sequence - Command to go through all the sequences

SpriteName - Name of sprite (if sprite has its own map)
SpriteNumber - Number of the sprite (0, 1, 2, ...)
SpriteLength - Number of frames
SequenceNumber - Number of the sequence (1, 2, 3, ...)
SequenceLength - Number of frames
#sequencedata - Command to go through all the frames

TileNumber - Number of the tile in the bitmap
FrameCount - Duration of the tile in the sequence

MapCount - Number of maps that belong to the current bitmap
#map - Command to go through all the maps

MapIdentifier - Identifier of the map
MapNumber - Number of the map (0, 1, 2, ...)
MapWidth - Number of tiles horizontally
MapHeight - Number of tiles vertically
ScrollX - Map scroll function X value
ScrollY - Map scroll function Y value
#mapdata - Command to go through all the map cells

X - Current X-position within the map
Y - Current Y-position within the map
TileNumber - Number of the tile combination
TileNumberLoByte - Tile combination number mod 256
TileNumberHiByte - Tile combination number div 256
Bounds - Bounds (see table below)
MapCode - Map code value (0..255)
BoundMapValue - bit 0..7: Bounds, bit 8..15: Map code
TSBackTile - Number of the tile in your tile set (back layer)
TSMidTile - Number of the tile in your tile set (middle layer)
TSFrontTile - Number of the tile in your tile set (front layer)
TSBackHF - Horizontal flip (back layer): 0 or 1
TSMidHF - Horizontal flip (middle layer)
TSFrontHF - Horizontal flip (front layer)
TSBackVF - Vertical flip (back layer): 0 or 1
TSMidVF - Vertical flip (middle layer)
TSFrontVF - Vertical flip (front layer)

#tinytiles Width Height - Split all tiles and maps into smaller tiles

How to interpret the Bounds byte:

Bit 7 = 0:

Bit 0: Upper bound
Bit 1: Left bound
Bit 2: Lower bound
Bit 3: Right bound

Bit 7 = 1:

Bit 0: Diagonal direction: 0=/, 1=\
Bit 6..1:

0: y = x
Not (yet) implemented:
1: y = 2 * x
2: y = 2 * (x + 1/2)
3: y = x / 2
4: y = x / 2 + 1/2

### Generating Code

Before you can generate code for your game, you must select the Tile Studio Definition file you want to use (Shift+F10) and also select an output directory. This is where the output files will be placed. Then press F10 and your code will be generated. Switch to your favorite programming environment and finish your game!

###

###

Return to Tile Studio Homepage