16. Showing Tiles

[[programvideogames]]Hey guys, hope you're doing well. Today we're going to be adding some visual improvements to our game by rendering actual tiles instead of just rectangles. Let's dive in and see how we can make this happen.

First things first, we need to update our LDtk_Auto_Layer_Tile struct to include more information about each tile. We're going to change it to look like this:

LDtk_Auto_Layer_Tile :: struct {
    px:  Vec2,
    src: Vec2,
    f:   u8,
}

This gives us the position of the tile, the source rectangle in our tileset, and a flag for flipping the tile.

Now, we need to add some new fields to our Game_State struct to store our tiles:

Game_State :: struct {
    // ... existing fields ...
    bg_tiles: [dynamic]Tile,
    tiles:    [dynamic]Tile,
    // ... other fields ...
}

And we'll create a new Tile struct to represent each tile:

Tile :: struct {
    pos: Vec2,
    src: Vec2,
    f:   u8,
}

Alright, now let's load our tileset texture. In the main function, right after we load the player texture, add this line:

tileset_texture := rl.LoadTexture("assets/textures/tileset.png")

Next, we need to update our level loading code to handle the new tile data. In the switch statement where we handle different layer types, add these cases:

case "Collisions":
    // ... existing collision code ...

    // Tiles
    for auto_tile in layer.autoLayerTiles {
        append(&gs.tiles, Tile{auto_tile.px, auto_tile.src, auto_tile.f})
    }
case "Background":
    for auto_tile in layer.autoLayerTiles {
        append(&gs.bg_tiles, Tile{auto_tile.px, auto_tile.src, auto_tile.f})
    }

Now for the fun part - rendering our tiles! In the main game loop, after drawing the collision rectangles, add this code to draw the background tiles:

for tile in gs.bg_tiles {
    width: f32 = TILE_SIZE
    height: f32 = TILE_SIZE

    if tile.f == 1 || tile.f == 3 {
        width = -TILE_SIZE
    } else if tile.f == 2 || tile.f == 3 {
        height = -TILE_SIZE
    }
    rl.DrawTextureRec(
        tileset_texture,
        {tile.src.x, tile.src.y, width, height},
        tile.pos,
        rl.WHITE,
    )
}

And then do the same for the foreground tiles:

for tile in gs.tiles {
    width: f32 = TILE_SIZE
    height: f32 = TILE_SIZE

    if tile.f == 1 || tile.f == 3 {
        width = -TILE_SIZE
    } else if tile.f == 2 || tile.f == 3 {
        height = -TILE_SIZE
    }
    rl.DrawTextureRec(
        tileset_texture,
        {tile.src.x, tile.src.y, width, height},
        tile.pos,
        rl.WHITE,
    )
}

This code handles flipping tiles horizontally or vertically based on the flag value.

Finally, let's increase our zoom to better see our new tiles:

ZOOM :: 2

And that's it! We've now added proper tile rendering to our game. When you run it, you should see a much nicer looking level with actual tiles instead of just rectangles.