Visit The new RRC2Soft Tutorials ^_-

We made available new tutorials in Enjoy!


    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...
How to use the tiles: coats.
Advanced techniques with tiles
Source Code
Last Notes


    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:


1 1 2 1
1 1 2 2
1 1 1 1
3 3 3 3

    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 (1)   (*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 ^_^.


    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):

  • Good Things:

  •     P.A) Save disk space, and helps the CRPG maker 'cause is more easy to compose tiles with coats than mix every tile for obtaining all the combinations used in the game.
        P.B) We can make upper tiles (objects over the characters).
        P.C) The transparent tiles can be made of a different size than the ground tiles.
  • Bad Things:

  •     C.A) For every tile in the map we must save one byte/word/dword for every coat (if we have 4 coats, one tile in the map occupy 4 b/w/dw).
        C.B) We need more time for painting a map, 'cause we must paint all the coats, and we must paint transparent tiles.
        C.A is not very important cause we have lots of space to store maps(2). And C.B. fades in the presence of computers' speed. So we think that using coats is better than don't use them.

        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
        (* 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])

        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
        ...And painted after the other coats (like we said).


        Animated tiles

        We think you must have seen in some CRPGs(3) 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:

        Tiles with change in the colors of the palette
        There's animated tiles that can be made rotating(4) the palette. I. E.: If  we want to simulate a Waterfall, we could make its tiles with blues and rotate the palette. See the animated GIF.
        This effect is the most used in Japanese CRPGs for water (river or sea).

        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)(5))

        We have 3 techniques, but only one work to do:
        A) When we are over a Tile, we're in the Tile's Area (current Area). The "roof" of the Area are not painted, and the "roofs" of the other Areas are (see that if an area is "Sky", has no roof).
        B) When entering into a Tile...
            a.1) If the Tile's Area is the same than the previous Area, then nothing happens.
            a.2) If the Area changes, we change the current Area.
        C) Loop to A).


        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 *)

        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.


    (1): In next lesson we'll see the good and bad things of taking a type (Byte/Word/DWord) for a Coat.
    (2): 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.
    (3): BTW, RPG (Role Playing Game) = JDR (Juego De Rol) ^_^.
    (4): 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.

    Color 45 Color 46 Color 47 Color 48 Color 49  
    (0,0,0) (20,20,20) (30,30,30) (35,35,35) (40,40,40) Rotation 1
    (0,0,0) (35,35,35) (20,20,20) (30,30,30) (40,40,40) Rotation 2
    (0,0,0) (30,30,30) (35,35,35) (20,20,20) (40,40,40) Rotation 3
    And again go to Rotation 1 .....

    (5): 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. 1