0

我正在构建一个分块瓷砖地图系统，使用更大地图中的 3x3 小地图块。在这一点上，我已经让它与块一起工作，但我不能完全弄清楚如何在瓦片类中偏移瓦片，以便它相对于对象的原始 x/y 填充它们。它目前使用嵌套的 for 循环进行迭代，但仅显示一个图块 - 在每个对象的左上角。这是我目前拥有的：

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

谁能提供有关如何正确修复偏移量的建议，以便绘制出所有九个瓷砖，而不仅仅是一个？

4

1 回答 1

1

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

这是一些伪代码（未经测试，但应该让你知道你想要什么）

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);
}
于 2013-10-31T15:27:21.897 回答