🧱 Build a Tile System (Step-by-Step)

We’ll now start building the TileManager, following the original video approach closely.
This is where the game evolves from a moving square into a structured game world.

🧩 STEP 1 — Create Tile class

🎯 Goal

Define what a tile is.
At this stage, a tile is simply:

• something we draw
• something that may block movement

✅ Create file

tile/Tile.java

✅ Code

package tile;

import java.awt.Color;

public class Tile {

    public Color color;
    public boolean collision;

}

🗺️ STEP 2 — Create TileManager

🎯 Goal

The TileManager is responsible for:

• storing map data
• choosing tile types
• drawing the world

✅ Create file

tile/TileManager.java

✅ Basic structure

package tile;

import java.awt.*;
import main.GamePanel;

public class TileManager {

    GamePanel gp;
    Tile[] tile;
    int[][] map;

    public TileManager(GamePanel gp) {
        this.gp = gp;

        tile = new Tile[10];
        map = new int[gp.screenCol][gp.screenRow];

        loadDefaultMap();
        setupTiles();
    }
}

🎨 STEP 3 — Define tile types

🎯 Goal

Create different types of tiles:

• grass (walkable)
• wall (collision)

✅ Add this method

public void setupTiles() {

    tile[0] = new Tile();
    tile[0].color = Color.green;
    tile[0].collision = false;

    tile[1] = new Tile();
    tile[1].color = Color.gray;
    tile[1].collision = true;
}

🧱 STEP 4 — Create a map

🎯 Goal

Define the world layout using simple numbers.

✅ Add this method

public void loadDefaultMap() {

    for (int col = 0; col < gp.screenCol; col++) {
        for (int row = 0; row < gp.screenRow; row++) {

            if (col == 0 || row == 0 || 
                col == gp.screenCol - 1 || 
                row == gp.screenRow - 1) {

                map[col][row] = 1; // wall

            } else {
                map[col][row] = 0; // grass
            }
        }
    }
}

🧠 Concept

1 = wall
0 = floor

Example layout:

111111
100001
100001
111111

👉 You are now defining a world using data.

🖼️ STEP 5 — Draw tiles

🎯 Goal

Render the tile map on the screen.

✅ Add draw method

public void draw(Graphics g) {

    for (int col = 0; col < gp.screenCol; col++) {
        for (int row = 0; row < gp.screenRow; row++) {

            int tileNum = map[col][row];

            int x = col * gp.tileSize;
            int y = row * gp.tileSize;

            g.setColor(tile[tileNum].color);
            g.fillRect(x, y, gp.tileSize, gp.tileSize);
        }
    }
}

🔗 STEP 6 — Connect to GamePanel

Now we integrate the tile system into the game.

✅ In GamePanel.java

1. Import:

import tile.TileManager;

2. Add variable:

TileManager tileM;

3. Initialize it in constructor:

tileM = new TileManager(this);

4. Draw it in paintComponent()

tileM.draw(g);
player.draw(g);

▶️ STEP 7 — Run the game

✅ Expected result

🟩 Green tiles (ground)
⬜ Gray tiles (walls) forming a border
⬜ Player moving inside the map

🧠 What you just built (VERY important)

At this point, your game now has:
✅ Tile system
✅ Grid-based map
✅ World rendering
✅ Structured game world

You’ve moved from drawing a single object
→ to building an actual environment

🚀 Next step

Now we make the world interactive.
👉 Add a Collision System
So the player:
❌ cannot walk through walls
✅ interacts with the environment