如何修复我的 tilemap 从其生成的数组中翻转的问题？

Question

我正在尝试在我正在开发的游戏中渲染瓦片地图，但在渲染时它会垂直和水平翻转。我正在使用 JavaScript 在 HTML 5 Canvas 中处理它。我已经尝试了所有我能想到的方法，但我似乎无法摆脱这个问题。

索引 JS:

import Map from './MapClass.js';

export var miniMapScale = .5;

var MiniMap = document.createElement("canvas");
document.body.appendChild(MiniMap);
MiniMap.width = miniMapScale * 640;
MiniMap.height = miniMapScale * 640;
MiniMap.id = "TopDownView";
var ctx = MiniMap.getContext("2d");

var TestMap = new Map([
    [1,1,1,1,1,1,1,1,1,1],
    [1,0,1,0,0,0,0,0,0,1],
    [1,0,1,0,0,0,0,0,0,1],
    [1,0,1,0,0,0,0,0,0,1],
    [1,0,0,0,0,0,0,0,0,1],
    [1,0,0,0,0,0,0,0,0,1],
    [1,0,0,0,0,0,1,1,1,1],
    [1,0,0,0,0,0,0,0,0,1],
    [1,0,0,0,0,0,0,0,0,1],
    [1,1,1,1,1,1,1,1,1,1]

]);

function drawTopDownMap() {
    ctx.clearRect(0, 0, MiniMap.width, MiniMap.height);

    TestMap.draw();

    requestAnimationFrame(drawTopDownMap);
};

requestAnimationFrame(drawTopDownMap);

地图ClassJS:

import { miniMapScale } from './index.js';

export default class Map{
    constructor(mapData) {
        this.data = mapData;
        this.tileSize = miniMapScale * 64;
        this.width = this.data[0].length;
        this.height = this.data.length;
        this.ctx = document.getElementById("TopDownView").getContext("2d");
    };

    draw() {
        for(var y = 0; y < this.height; y++) {
            for(var x = 0; x < this.width; x++) {
                var wall = this.data[x][y];

                if(wall == 0) {
                    this.ctx.fillStyle = "#ffe4c4";

                    this.ctx.fillRect(
                        x * this.tileSize,
                        y * this.tileSize,
                        this.tileSize, this.tileSize
                    );
                }else if(wall == 1) {
                    this.ctx.fillStyle = "#000000";

                    this.ctx.fillRect(
                        x * this.tileSize,
                        y * this.tileSize,
                        this.tileSize, this.tileSize
                    );
                };
            };
        }
    }
};

如有任何帮助，我们将不胜感激！

Answer 1

您的二维数组将 Y 作为第一维，将 X 作为第二维。这是因为您的数据排列为行数组，而不是列数组。

使用 this.data[y][x] 应该会提供预期的结果。

draw() {
    for(var y = 0; y < this.height; y++) {
        for(var x = 0; x < this.width; x++) {
            var wall = this.data[y][x]; // instead of [x][y]

            if(wall == 0) {
                this.ctx.fillStyle = "#ffe4c4";
            } else if(wall == 1) {
                this.ctx.fillStyle = "#000000";
            }

            // Moved this out of the if statement to avoid repeated code
            this.ctx.fillRect(
                x * this.tileSize,
                y * this.tileSize,
                this.tileSize, this.tileSize
            );
        }
    }
}

这是一个工作片段：

var miniMapScale = 0.5;

class Map {
  constructor(mapData) {
    this.data = mapData;
    this.tileSize = miniMapScale * 64;
    this.width = this.data[0].length;
    this.height = this.data.length;
    this.ctx = document.getElementById('TopDownView').getContext('2d');
  }

  draw() {
    for (var y = 0; y < this.height; y++) {
      for (var x = 0; x < this.width; x++) {
        var wall = this.data[y][x];

        if (wall == 0) {
          this.ctx.fillStyle = '#ffe4c4';
        } else if (wall == 1) {
          this.ctx.fillStyle = '#000000';
        }
        this.ctx.fillRect(
          x * this.tileSize,
          y * this.tileSize,
          this.tileSize,
          this.tileSize
        );
      }
    }
  }
}

var MiniMap = document.createElement('canvas');
console.log(document);
document.body.appendChild(MiniMap);
MiniMap.width = miniMapScale * 640;
MiniMap.height = miniMapScale * 640;
MiniMap.id = 'TopDownView';
var ctx = MiniMap.getContext('2d');

var TestMap = new Map([
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  [1, 0, 1, 0, 0, 0, 0, 0, 0, 1],
  [1, 0, 1, 0, 0, 0, 0, 0, 0, 1],
  [1, 0, 1, 0, 0, 0, 0, 0, 0, 1],
  [1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
  [1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
  [1, 0, 0, 0, 0, 0, 1, 1, 1, 1],
  [1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
  [1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
]);

function drawTopDownMap() {
  ctx.clearRect(0, 0, MiniMap.width, MiniMap.height);

  TestMap.draw();

  requestAnimationFrame(drawTopDownMap);
}

requestAnimationFrame(drawTopDownMap);

Answer 2

您在打印数组时犯了一个基本错误。要点 1 是你创建了你的数组作为一个屏幕：

[[1,1,1,1,1,1,1,1,1,1] // <- top screen
[1,0,1,0,0,0,0,0,0,1] ] //<- 1 position after top

但是，当您使用 this.data[x][y] 在屏幕上打印时，y 固定在 0 中，x 移动 0 到宽度。

拳头互动：

x=0, y=0; 
x=1, y=0; 
x=2, y=0.

因此，您在数据[0][0]、数据[1][0]、数据[2][0] 中打印（在列中行走）

正确的是数据[0][1]、数据[0][2]、数据[0][3]（排队）

如果您更改循环顺序：

拳头互动：

x=0, y=0; 
x=0, y=1; 
x=0, y=2.

因此，您在 data[0][0]、data[0][1]、data[0][2] 中打印（在列中走动）

但这是个问题...y正在长大然后你在列中打印!!!

解决方法很简单：您需要旋转地图以匹配代码：

var TestMap = new Map([
[1,1,1,1,1,1,1,1,1,1],
[1,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,1],
[1,1,1,1,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,1,0,1],
[1,0,0,0,0,0,0,1,0,1],
[1,0,0,0,0,0,0,1,0,1],
[1,1,1,1,1,1,1,1,1,1]
]);

或者您将 x 更改为 y：

this.data[x][y];

看例子： https://codepen.io/Luis4raujo/pen/NWbvvay

如何修复我的 tilemap 从其生成的数组中翻转的问题？

How can I fix my tilemap being flipped from the array it's generated from?

javascript

html5-canvas

jstilemap