How tiles work
To better understand how tiling works, let’s imagine we have a big game that takes place in an abstract environment that is composed primarily of green rectangles [see left].
A modern interpretation might be to draw all the rectangles manually and import the picture into the game as one big background. That would be pretty wasteful. In classic console RPGs, game environments were usually created with tilesets – collections of small pieces of the world that can be combined among themselves. Using tiles reduces file size and saves memory, so let’s see how is it done in IG Maker.
IG Maker can handle other kind of pictures (like wallpapers) but relies on tiles heavily for actual building of the game environment. We’ll define the most basic elements of every green rectangle from the example above and repeat it as needed.
The goal is to recreate the environment using the lest possible number of elements – the parts have to fit together so we can use them as building blocks. Every rectangle can now be made using the same graphics [see right].
Application in IG Maker (RPG plugin)
(Disclaimer: IG Maker got an update since this tutorial was written – there might be some minor changes but the principles remain the same)
Tiles and autotiling in IG Maker are somewhat similar to the ones used in Enterbrain’s other range of game engines like RPG Maker XP and VX. Here’s an actual IG Maker file to better illustrate how autotiling works: tutorial_autotiling (5.17Mb right-click, save target as).
Download and open it.
Jump to the “Autotiling” part of the tiles section [(1)Action RPG -> (2)Tiles -> (3)Autotiling] – your screen should look like the screenshot on the left (click on the image to enlarge it).
So just to see what’s going on, let’s quickly jump to the canvas and click the first gray tile of the “floor” once in the tiles area [see the screenshot below, left] (the grey tiles are here as an example and we’ll define green ones later). With that tile selected, click with the left mouse button once in the black canvas area, hold the left mouse button and start dragging right or down (not up or left!) [see the screenshot below, right] or just click the neighbouring right / below tile, whatever’s more practical for you. If you started dragging in the direction that the tile is closed in (up / left) the tile would get repeated and look like a mistake – in fact you can test it just to see what it looks like.
With this basic mechanic all sorts of shapes can be created [see below] (draw the outlines for now, don’t worry about filling the central part), just keep drawing in the clockwise direction. This is very useful for making roads, rivers, channels and other elements of the environment.
If we jump to the Materials tab and check the predefined tileset, we’ll find the rectangle division with the addition of 4 new tiles that take care of inward turns – it is easy to understand their role if you try to build a shape of say a greek cross without them 
To see exactly where they are, let’s load a file with this particular set of tiles for inward turning marked with arrows- let’s switch the graphics for the tileset by clicking on the “…” button (IG Maker will maybe ask whether it’s fine to erase the undo data, click “Yes”), selecting the “tutorial(autotiling) tilesetinwardshighlighted” file and going back to RPG plugin [see below] – the special four tiles are marked with arrows.
Now that we know how it works, let’s try defining a new autotiling rule set using the green tiles which are organized in exactly the same way as the gray ones. Head back to “Tiles” section and click on the small “+” sign on the autotiling tab (again, IG Maker will probably ask whether to let go of the undo data, click “Yes”). This will add a new set of tiling rules that are defined using the marked rectangles in the area below [see below].
The squares marked with white and blue represent the basic 9 and the 4 inward turning tiles – it may look confusing at first but actually it’s logical: the square marked “Center” is filled with blue so this means the authors chose “blue” to represent “full” and the white parts of the squares represent “empty” space. To keep things organized, let’s rename this set of rules from “Auto Tiling002″ to something like “Green floor” (double click the automatic name, type the name in, press Enter when finished). While we’re here, let’s also enlarge the area with the autotiling definitions: click on the border below the “Green floor” and above the square representing the first autotiling rule named “Upper left” and drag it up a bit so we can see all the autotiles at once (the area below will not get adjusted, it’s a bug – hopefully Enterbrain will fix it). [see below].
Setting a new autotile definition
As long as we remember that the blue represents the “core” of our tileset block (what would be “solid” if it were a wall, or the walkable area if it were a road) it’s easy to set up new definitions. Here’s a small chart that shows how is it going to be set up:
For the illustration purposes, the inward turns (numbers 10, 11, 12 and 13) are numbered in the “opposite” direction: IG Maker assumes you’ll have your tiles organized in another way [see left, upper part]. It doesn’t matter as long as you have all the tiles present – you can arrange them differently if necessary [see left, lower part].Pairing the tiles is pretty straightforward: first doubleclick on a autotile definition and a window with tiles will pop up. Select the tile you want to pair with a currently selected definition and repeat the same thing for all the 13 definitions – let’s start with the autotile definition named “Upper Left” and after doubleclicking the tile selector appears – doubleclick the first green tile [see below].
Using this procedure (doubleclick on tile definition, then doubleclick on the tile) define all the other tiles, pairing them as seen a few screenshots above and finally check whether it matches the [see below].
Questions? Comments? Discuss this IG Maker tutorial on Nekomura forum!
