为什么我的图块地图显示不正确? [英] Why Aren't My Tile Maps Displaying Correctly?

问题描述

我正在尝试从文本文件加载和渲染 Slick2D 中的关卡(平铺贴图).文本文件看起来像这样:

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:

每个坐标表示图块在图块集图像上的位置.所以 0,0 是地图左上角的图块，0,1 是它下面的图块，1,0 是它右边的图块.

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.

现在的问题...

出于某种原因，瓷砖地图无法正确呈现到屏幕上.我确信它正在正确读取文件，但由于某种原因它没有正确呈现它们.例如，上面的 tilemap 应该显示如下:

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?

这是我的代码:

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;
   }
}

推荐答案

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);
    }
}

这篇关于为什么我的图块地图显示不正确?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！