Why Aren't My Tile Maps Displaying Correctly?

Question

I am trying to load and render levels (tile maps) in Slick2D from text files. The text files look something like this:

res/RPGSheet 32x32.png     (tileset to be used with this map)
5                          (How many tiles wide the map is)
5                          (How many tiles tall the map is)
16                         (How many tiles wide the tileset is)
16                         (How many tiles tall the tileset is)
4,1 4,1 4,1 4,1 4,1
4,1 1,1 2,0 4,1 4,1
4,1 4,1 1,1 4,1 4,1
4,1 1,1 4,1 1,1 4,1
4,1 4,1 4,1 4,1 4,1

First I'll explain how my tilemaps work:

Each coordinate indicates where the tile is located on the tileset image. So 0,0 is the tile in the upper left hand corner of the map, 0,1 is the tile below it, and 1,0 is the tile to the right of it.

Now for the problem...

For some reason, the tilemaps don't render to the screen correctly. I am sure that it is reading the files correctly, but it's not rendering them correctly for some reason. For example, the tilemap above should display like this:

 W W W W W
 W G D W W
 W W G W W
 W G W G W
 W W W W W

 (If W is a water tile, G is grass and D is dirt)

But instead, it renders the tiles to the screen in this formation:

 W W W W W
 W G W G W
 W D G W W
 W W W G W
 W W W W W

Why does this happen?

Here is my code:

public class Play extends BasicGameState{

int x;
int y;

Image image;
SpriteSheet tileset;

int MapWidth;
int MapHeight;

int TilesAcross;
int TilesTall;

int TileWidth;
int TileHeight;

String[] coords;

int[] tilesX;

int[] tilesY;

String TileDir;

Image tile;

String map;

int renderCount = 0;

   public void init(GameContainer gc, StateBasedGame sbg) throws SlickException{

       int count = 0;

       map = new String("res/DefaultMap.txt");

        try(BufferedReader in = new BufferedReader(new FileReader(map))){
            String line;

            TileDir = new String(in.readLine());
            MapWidth = Integer.parseInt(in.readLine());
            MapHeight = Integer.parseInt(in.readLine());
            TilesAcross = Integer.parseInt(in.readLine());
            TilesTall = Integer.parseInt(in.readLine());

            System.out.println("(DEBUG)Tileset Directory: " + TileDir);
            System.out.println("(DEBUG)Map Width: " + MapWidth);
            System.out.println("(DEBUG)Map Height: " + MapHeight);
            System.out.println("(DEBUG)Tileset is " + TilesAcross + "x" + TilesTall + " Tiles");


            tilesX = new int[MapWidth * MapHeight];
            tilesY = new int[MapWidth * MapHeight];

            while((line=in.readLine())!=null){
                String[] values = line.split(" ");
                for(String v:values){
                    coords = v.split(",");

                    tilesX[count] = Integer.parseInt(coords[0]);
                    tilesY[count] = Integer.parseInt(coords[1]);

                    System.out.println("Coords: " + tilesX[count] + "," + tilesY[count]);

                    count++;
                }
            }

                }catch(IOException e){
                    e.printStackTrace();
                }

                image = new Image(TileDir);
                TileWidth = image.getWidth() / TilesAcross;
                TileHeight = image.getHeight() / TilesTall;
                tileset = new SpriteSheet(image, TileWidth, TileHeight);
                System.out.println("(DEBUG)Tile Width: " + TileWidth);
                System.out.println("(DEBUG)Tile Height: " + TileHeight);

        }

   public Play(int state){
   }

   public void render(GameContainer gc, StateBasedGame sbg, Graphics g) throws SlickException{
       tileset.startUse();
       for(renderCount = 0; renderCount < MapWidth * MapHeight;){
       for(int i = 0; i < MapWidth; i++){
           for(int j = 0; j < MapHeight; j++){
                   tileset.getSubImage(tilesX[renderCount], tilesY[renderCount]).drawEmbedded(i * TileWidth, j * TileHeight, TileWidth, TileHeight);
                   renderCount++;
           }
           }
       }
       tileset.endUse();
   }

   public void update(GameContainer gc, StateBasedGame sbg, int delta) throws SlickException{
   }

   public int getID(){
      return 3;
   }
}

Answer 1

for(renderCount = 0; renderCount < MapWidth * MapHeight;){
   for(int i = 0; i < MapWidth; i++){
       for(int j = 0; j < MapHeight; j++){
               tileset.getSubImage(tilesX[renderCount], tilesY[renderCount]).drawEmbedded(i * TileWidth, j * TileHeight, TileWidth, TileHeight);
               renderCount++;
       }
       }

This is a pretty strange piece of code and it seems you are rendering the tiles column-wise but you array is arranged line-wise. Try to replace it with:

for(int column = 0; line < MapHeight; column++)
{
    for(int line = 0; column < MapWidth; line++)
    {
        tileset.getSubImage(tilesX[line*MapWidth + column], tilesY[line*MapWidth + column]).drawEmbedded(i * TileWidth, j * TileHeight, TileWidth, TileHeight);
    }
}