如何在 Pixi.js 中绘制精灵板？

【问题标题】：How to draw board of sprites in Pixi.js?如何在 Pixi.js 中绘制精灵板？
【发布时间】：2015-03-14 11:13:00
【问题描述】：

我有 10 个精灵和地图的数组

 for (var i = 0; i < 35; i++) {
            this.Map.push([]);
            for (var j = 0; j < 30; j++)
                this.Map[i][j] = (Math.random() * 9) | 0;
        }

【问题讨论】：

标签： javascript arrays pixi.js

【解决方案1】：

假设你想创建一个矩形地图，你可以试试这个：

for(var y = 0; y < this.Map.length; y++) {
  for(var x = 0; x < this.Map[y].length; x++) {
    var sprite = new PIXI.Sprite.fromImage('assets/image.png');
    sprite.position.x = x* tileWidth;
    sprite.position.y = y* tileHeight;

    yourDisplayObjectContainer.addChild(sprite);
  }
}

当然，你必须启动渲染器。然后它应该会显示您的地图。

【讨论】：

【解决方案2】：

好的，我发现了一些东西。做到这一点的唯一好方法是使用 drawImage 将所需的板放到画布上，然后：

var pixiTexture = PIXI.Texture.fromCanvas(canvas);

如果板子太大，把它分成块。

【讨论】：