Loading and Displaying Images

Image Tiling for Game Maps

How can I implement image tiling for creating large game maps?

Abstract art representing computer programming

Implementing image tiling for large game maps is a common technique in 2D games. It allows you to create vast, detailed environments using a relatively small set of tile images. Here's how you can implement this using SDL2:

Basic Concept

The idea is to create a grid where each cell represents a tile. Each tile is an image that can be reused multiple times across the map. This approach is memory-efficient and allows for easy map editing.

Implementation

Let's create a simple tilemap system:

#include <SDL.h>

#include <string>
#include <vector>

class Tilemap {
public:
  Tilemap(SDL_Renderer* Renderer,
          const char* TilesetPath,
          int TileWidth,
          int TileHeight, int MapWidth,
          int MapHeight)
    : Renderer{Renderer},
      TileWidth{TileWidth},
      TileHeight{TileHeight},
      MapWidth{MapWidth},
      MapHeight{MapHeight} {
    SDL_Surface* Surface{
      SDL_LoadBMP(TilesetPath)};
    if (!Surface) {
      // Handle error
    }
    Tileset = SDL_CreateTextureFromSurface(
      Renderer, Surface);
    SDL_FreeSurface(Surface);

    SDL_QueryTexture(Tileset, nullptr, nullptr,
                     &TilesetWidth,
                     &TilesetHeight);

    TilesPerRow = TilesetWidth / TileWidth;

    // Initialize map with empty
    // tiles (represented by -1)
    Map.resize(MapHeight,
               std::vector<int>(MapWidth, -1));
  }

  void SetTile(int X, int Y, int TileIndex) {
    if (X >= 0 && X < MapWidth && Y >= 0 && Y <
      MapHeight) { Map[Y][X] = TileIndex; }
  }

  void Render(int CameraX, int CameraY) {
    int StartX{CameraX / TileWidth};
    int StartY{CameraY / TileHeight};
    int EndX{
      StartX + (ScreenWidth / TileWidth) + 1};
    int EndY{
      StartY + (ScreenHeight / TileHeight) + 1};

    for (int Y{StartY}; Y < EndY && Y <
         MapHeight; ++Y) {
      for (int X{StartX}; X < EndX && X <
           MapWidth; ++X) {
        int TileIndex{Map[Y][X]};
        if (TileIndex >= 0) {
          SDL_Rect SrcRect{
            (TileIndex % TilesPerRow) * TileWidth,
            (TileIndex / TilesPerRow) * TileHeight,
            TileWidth,
            TileHeight};
          SDL_Rect DestRect{
            X * TileWidth - CameraX,
            Y * TileHeight - CameraY,
            TileWidth, TileHeight};
          SDL_RenderCopy(Renderer, Tileset,
                         &SrcRect, &DestRect);
        }
      }
    }
  }

  ~Tilemap() { SDL_DestroyTexture(Tileset); }

private:
  SDL_Renderer* Renderer;
  SDL_Texture* Tileset;
  int TileWidth, TileHeight;
  int TilesetWidth, TilesetHeight;
  int TilesPerRow;
  int MapWidth, MapHeight;
  std::vector<std::vector<int>> Map;
  
  // Adjust as needed
  static const int ScreenWidth{800};
  static const int ScreenHeight{600};
};

To use this class in your main game loop:

int main() {
  // SDL initialization code...

  Tilemap GameMap{
    Renderer, "tileset.bmp", 32, 32, 100, 100};

  // Set up the map
  for (int Y{0}; Y < 100; ++Y) {
    for (int X{0}; X < 100; ++X) {
      // Example: checkerboard pattern
      GameMap.SetTile(X, Y, (X + Y) % 2);
    }
  }

  int CameraX{0}, CameraY{0};
  bool Running{true};
  while (Running) {
    // Handle events, update camera position...

    SDL_RenderClear(Renderer);
    GameMap.Render(CameraX, CameraY);
    SDL_RenderPresent(Renderer);
  }

  // SDL cleanup code...
}

This implementation creates a tilemap where each tile is 32x32 pixels, and the map is 100x100 tiles. The Render function only draws the tiles that are currently visible on the screen, which is crucial for performance with large maps.

Optimization Tips:

  1. Tile Caching: For complex tiles, consider caching rendered tiles to textures.
  2. Layered Maps: Implement multiple layers for depth (e.g., ground, objects, overhead).
  3. Chunk Loading: For extremely large maps, load and unload chunks of the map as the camera moves.
  4. Tile Animation: Extend the system to support animated tiles by cycling through different tile indices.

Remember to handle potential errors when loading images and creating textures. Also, ensure your tileset image is designed with tiles placed in a grid for easy indexing.

Answers to questions are automatically generated and may not have been reviewed.

sdl2-promo.jpg
Part of the course:

Game Dev with SDL2

Learn C++ and SDL development by creating hands on, practical projects inspired by classic retro games

Free, unlimited access

This course includes:

  • 62 Lessons
  • 100+ Code Samples
  • 91% Positive Reviews
  • Regularly Updated
  • Help and FAQ
Free, Unlimited Access

Professional C++

Comprehensive course covering advanced concepts, and how to use them on large-scale projects.

Screenshot from Warhammer: Total War
Screenshot from Tomb Raider
Screenshot from Jedi: Fallen Order
Contact|Privacy Policy|Terms of Use
Copyright © 2024 - All Rights Reserved