Rendering multiple layers of tiles

Question

I have a little problem, when I try to draw multiple layers of tiles in my game, only the top layer shows up. For example, I have a for loop to draw air tiles, and below that I have another to draw stone tiles. Only the air tiles will draw, the stone tiles won't no matter what I do. Heres my map class:

public class Map {

public static final int CLEAR = 0;
public static final int STONE = 1;
public static final int GRASS = 2;
public static final int DIRT = 3;

public static final int WIDTH = 32;
public static final int HEIGHT = 24;

public static final int TILE_SIZE = 25;

static ArrayList<ArrayList<Integer>> map = new ArrayList<ArrayList<Integer>>(WIDTH * HEIGHT);

Image air, grass, stone, dirt;

public Map() {

    for (int x = 0; x < WIDTH; x++) {
        ArrayList<Integer> yaxis = new ArrayList<Integer>();
        for (int y = 0; y < HEIGHT; y++) {
            yaxis.add(CLEAR);
        }
        map.add(yaxis);
    }

    for (int x = 0; x < WIDTH; x++) {
        ArrayList<Integer> yaxis = new ArrayList<Integer>();
        for (int y = 0; y < HEIGHT; y++) {
            yaxis.add(STONE);
        }
        map.add(yaxis);
    }

    try {
        init(null, null);
    } catch (SlickException e) {
        e.printStackTrace();
    }
    render(null, null, null);

}

public void init(GameContainer gc, StateBasedGame sbg) throws SlickException {
    air = new Image("res/air.png");
    grass = new Image("res/grass.png");
    stone = new Image("res/stone.png");
    dirt = new Image("res/dirt.png");
}

public void render(GameContainer gc, StateBasedGame sbg, Graphics g) {

    for (int x = 0; x < map.size(); x++) {
        for (int y = 0; y < map.get(x).size(); y++) {
            switch (map.get(x).get(y)) {
            case CLEAR:
                air.draw(x * TILE_SIZE, y * TILE_SIZE, TILE_SIZE, TILE_SIZE);
                break;
            case STONE:
                stone.draw(x * TILE_SIZE, y * TILE_SIZE, TILE_SIZE, TILE_SIZE);
                break;
            case GRASS:
                grass.draw(x * TILE_SIZE, y * TILE_SIZE, TILE_SIZE, TILE_SIZE);
                break;
            case DIRT:
                dirt.draw(x * TILE_SIZE, y * TILE_SIZE, TILE_SIZE, TILE_SIZE);
                break;
            }
        }
    }
}

}

If anyone could help, that would be amazing!

Answer 1

You're adding air rows then adding stone rows here:

for (int x = 0; x < WIDTH; x++) {
    ArrayList<Integer> yaxis = new ArrayList<Integer>();
    for (int y = 0; y < HEIGHT; y++) {
        yaxis.add(CLEAR);
    }
    map.add(yaxis);
}

for (int x = 0; x < WIDTH; x++) {
    ArrayList<Integer> yaxis = new ArrayList<Integer>();
    for (int y = 0; y < HEIGHT; y++) {
        yaxis.add(STONE);
    }
    map.add(yaxis);
}

The problem is that the stone tiles are out of the expected map size (32 x 24) because you've addded twice a much rows as you think you would.

Try replacing the list of lists by an array and you will see that you're going out of bounds.

Edit: here's a proper way to initialize your map with random data:

java.util.Random random = new java.util.Random();

for (int x = 0; x < WIDTH; x++) {
    ArrayList<Integer> yaxis = new ArrayList<Integer>();
    map.add(yaxis);
    for (int y = 0; y < HEIGHT; y++) {
        yaxis.add(random.nextInt(4));
    }
}

Note that afterwards you won't be adding tiles, just changing the values, eg.

map.get(10).set(5, CLEAR);