Question

我正在构建一个分块的tilemap系统，使用更大的地图中的3x3迷你地图块。在这一点上，我已经使用了块，但是我无法弄清楚如何在tile类中偏移tile，以便它相对于对象的原始x / y填充它们。它目前使用嵌套的for循环进行迭代，但只显示一个tile - 位于每个对象的左上角。这就是我目前所拥有的：

(function() {

var tile = function(array, _x, _y, spritesheet) {
  this.initialize(array, _x, _y, spritesheet);
}
tile.prototype = new createjs.Container();

tile.prototype.Container_initialize = this.initialize;
tile.prototype.initialize = function(array, _x, _y, spritesheet) {

    this.x = _x * 120;
    this.y = _y * 120;

    this.tileArray = array; 

    this.tilesheet = spritesheet;

    this.i = 0;

    for (this.x = 0; this.x < 3; this.x++)
    {
        for (this.y = 0; this.y < 3; this.y++)
        {
            var tileSprite = new createjs.Sprite(this.tilesheet, this.tileArray[this.x][this.y]);
            tileSprite.x = this.x; 
            tileSprite.y = this.y;


            this.addChild(tileSprite);



            this.i++;
        }       
    }
}

window.tile = tile;
}());

任何人都可以提供有关如何正确修复偏移的建议，以便所有九个图块都被抽出，而不仅仅是一个吗？

Answer 1

布局网格的更好方法是使用一些数学进行单次迭代以进行放置。

这是一些伪代码（未经过测试，但应该让您了解自己想要的内容）

var cols = 3;
var rows = 3;
for (var i = 0; i<rows*cols; i++) {

    // Determine the row & column using simple math
    var row = Math.floor(i/cols);
    var col = i%cols;

    // Create the item
    var tileSprite = new createjs.Sprite(this.tilesheet, this.tileArray[row][col]);
    // Note there is probably a better way to determine the item you want, you can probably
    // use the "i" variable instead.
    var tileSprite = new createjs.Sprite(this.tilesheet, i);

    // Position it using width/height variables
    tileSprite.x = col * COL_WIDTH;
    tileSprite.y = row * ROW_HEIGHT;
    this.addChild(tileSprite);
}

在Javascript和EaselJS中使用3x3阵列，偏移分块图块地图的最佳方法是什么？

1 个答案: