Hi !. Today we'll learn something that is needed in most CRPGs: Tiles. What is, why use them and how to use them. Let's go!
    NOTE: (STAR) means a technique that is implemented in the game i'm making.
    NOTE2: Thanks (LOTS of thanks) to Greg Taylor and his TileFAQ.
 
 

BEFORE START....

    And what is a Tile?

    Tiles are the graphics that are used for making the maps. terrains, walls, sea, NPC's,... are some examples. So, a map is (after FF VII arrival) like a "puzzle", and tiles are placed in it, making an scenary.

    I. E.: With a grass tile, a mointain tile and a sea tile, we can make a very primitive map:

    We need LOTS of tiles for making a realistic map (i.e. Ultima VII uses 1000 tiles approx).

    Implementation: Remeber File 1 (last lesson). We said that graphics are stored into a list. Well: In a map, a tile is the number of the element of the list that stores the tile:
    TCasillaMapa = Byte/Word/DWord ⁽¹⁾   (*CasillaMapa=TileInMap*)
    (One thing more: Disable the images in your navigator. You'll see how the upper map shows itself like an array of numbers ^_^)

    And why i don't save the map like an image?

    Yes. SquareSoft though this idea, an implemented it in FF VII. You'll win quality (ey, what are we saying?. You'll win QUALITY), but you must think on taking some CD's for saving the graphics.
    I. E.: A map of 100x100 tiles (if a tile is 20x20) will take 4 Mgs of HDD without compressing. And using 4 coats/Tile (will be explained now) and every coat is 1 byte, we'll have (uncompressed) 10 Kb (Including Tiles' graphics, approx 250 Kb uncompressed).

    We think it's easy to view ^_^.
 

HOW TO USE THE TILES: COATS

    Tiles = Coats of Tiles

    We have one thing learned: Maps are composed of Tiles (In this tutorial and in most Japanese old CRPG's ^_^).
    But there's something important to say: every tile in the map is composed of more tiles: coats of tiles:
 

=

    These coats have some good things and some bad ones (we will say only the most important to us):

    Implementation: Including Coats, a tile in a map will look like this:
    TTileInMap= Record
                                    GroundCoat : Byte/Word/DWord
                                    TransparentCoat : Byte/Word/DWord (* over the ground and below the Charactes *)
                                    CharactersCoat : Byte/Word/DWord
                              End;
    (* I.E.: Ground = grass, Transparent = rock, Character = child *)

    Transparent Tiles

    If we want to use coats, then some tiles of the coat must be transparent. It means that there's parts of the tile that aren't painted.
    So you must use a color like transparent. When we draw the tile onto the screen, the transparent color is not painted.

    For X=1 To Width_sprite
        For Y=1 To Height_sprite
            If Sprite[X,Y]<>TranspColor Then PutPíxel(IX+X,IY+Y,Sprite[X,Y])
        FinPara
    FinPara

    Like a curiosity, in old games (Spectrum/MSX => only 2 colors) this technique could not be used (How i can use a color like transparent, if i have only two ?).
    So they made another technique: Every tile had a Mask tile (pixels that are and aren't painted), and they made (Screen AND Mask) OR Tile for drawing the tile onto the screen.
    (Eso también se hacía con XOR, pero he perdido la documentación ^_^)

    (STAR) uses the transparent color technique (Color=Blue, index 1).

    Upper Tiles

    With coats we can make a spectacular technique: Upper Tiles. With this, a Character can pass below an element of the map. It's very simple to make: Only add one coat more, and draw it after the other coats (including Characters' coat).

    Implementation: Upper Tile is added like a new coat:
    TTileInMap = Record
                                    (* Other coats... *)
                                    UpperCoat : Byte/Word/DWord
                                End;
    ...And painted after the other coats (like we said).
 

ADVANCED TECHNIQUES WITH TILES

    Animated tiles

    We think you must have seen in some CRPGs⁽³⁾ that there're animated tiles. I. E.: A waterfall moving, an hologram,....
    This can be made placing in the same position several tiles, and those tiles forms an animation. Look at the animated GIF. Is made by 4 tiles but they forms an animated tile.

    Implementation: This is a bit more difficult. there's two ways:

• Easy and Economical (STAR ^_^): Using the coats.

    If we are using coats, we can reuse them like the frames of the animation. We must add a flag that says "Ey, Animate me, I'm not a tile composed by coats".
    With this technique we lost the capacity of using coats in the animated tiles ('cause the coats are used like the frames of the animation).
 
• Complex one: Add more flags to the tile.

    We must add more flags/fields to the tile (exactly 4):
    a) Is_Animated?. The tile is animated or not.
    b) Is_Upper_Or_Transparent?. Indicates if the tile is painted like an upper coat or like a transparent coat, saving in UpperCoat or in TransparentCoat the number of the first frame of the animation.
    c) Index_Frame. Indicates the actual frame of the animation.
    d) Nº_Of_Frames. Shows how much frames have the animation (if we have x frames, the animation is composed by the tiles [First_Frame...First_Frame+Nº_Of_Frames]

    (NOTE 1: We can optimize this using a),b) and d) like flags in one byte (a=>1 bit, b=>1 bit, d=> 6 bits)).
    (NOTE 2: We think that this technique can be understand easily. But if you have a doubt, e-mail us and we'll put the entire explanation).

    Implementation: We don't need more fields. Only make the tile with some special colors that are rotated in the game.
 

    Tiles with a roof (Greg Taylor=>TileFAQ)

    Tiles with roof are tiles that have a "roof" (A Coat that is over the upper coat), and this "roof" cover an scenario that we don't want to show.
    (I. E. Imagine that we are in a castle. When we are walking through a corridor, we don't want to show the rooms. And when we enter into a room, we want to show ONLY it).
    A "roof" can be a lot of things: a black tile, tiles that are roofs of a house,.....

    Implementation: There're three techniques (depending on the number of Areas and/or the number of different roofs):
(NOTE: Area = group of tiles that show themselves when we enter into them and cover themselves when we get out of them(I.E. a room)⁽⁵⁾)
 

• Easiest and cheapest: only 2 Areas and one type of "roof" for map.

    Every Tile has a bit that says the Area of the Tile (0,1), and every map has its "roof".
    With this technique we could, i.e., show or rooms or corridors.

• The Middle: 2 Areas and lots of roofs / 2 roofs and lots of areas,.....

    Every Tile has a new Field: RoofCoat. It contains the Area of the tile and the "roof" it has. We could assign more or less bits to Areas/"roofs". I. E. If RoofCoat is a byte, ÁÁÁCCCCC -> 8=2³ Areas y 32=2⁵> Roofs.
 
• Complex: Lots of Areas and "roofs".

    Every Tile has two new Fields: AreaCoat (Area of the tile) and RoofTileCoat ("roof" of the tile).

SOURCE CODE

    In the Game we give, TTileInMap doesn't exist (is part of TPantalla (=TMap)). But if it should exist, the format of TTileInMap will be:

(File TIPOS.PAS)
Type TCasilla = Record (* TTileInMap at 23-September-1999 *)
                                Fondo:Byte (* Ground coat *)
                                CapInf:Byte (* Transparent coat *)
                                Pnjs:Byte (* Characters coat *)
                                CapSup:Byte (* Upper Coat *)
                                Paso:Byte (* Flags Coat *)
                          End;

    Flags coat is a byte (bits 76543210) that contains some information:
    a) Bits 3210: When we can or cannot walk (see next lesson).
    b) Bit  4: Is_An_Animated_Tile? Yes(1) No(0). Uses Economic implementation.
    c) Bit  5: Difference between see and walk (Wait until Combat File and we'll explain it).
    d) Bits 76: Not Used. (Bit 6 will be the Roof Bit => Cheapest implementation)

    In STARFGEN.PAS is the procedure DibujarMapaAnimado (DrawsAnimatedMap), so if you want to see how coats are painted, look at it.

LAST NOTES

⁽¹⁾: In next lesson we'll see the good and bad things of taking a type (Byte/Word/DWord) for a Coat.
⁽²⁾: At HDD level there's no problem, but there's a "problem" with the memory (we must have the map in memory). We'll see more things in next lesson.
⁽³⁾: BTW, RPG (Role Playing Game) = JDR (Juego De Rol) ^_^.
⁽⁴⁾: Rotate colors = rotate the (R,G,B) values of some colors in the palette. I. E. we're going to rotate the colors number 46,47 y 48.
 

⁽⁵⁾: We must say a thing: There's Areas ("Sky" Areas) that are shown always. (cover a field of grass when we are in a house? ¿¿??).

    TT..T...T..That's all, folks!! Next lesson: Maps and their problems.
    PD: (Doubt=Mail. Don't be shy!!!)
    PD2: If you have a best term for "Coat", please tell us.