如何在Pixi.js中实现像素网格的绘制？

Question

我正在尝试制作一个简单的、基于像素的实时游戏，以便使用新的HTML5技术获得乐趣：

• Web套接字
• WebGL通过Pixi.js

游戏的概念将会像蛇一样。为了允许所有类型的模式，我决定将基本渲染建立在像素网格上--这也将使计算碰撞变得更加容易，我并不是真正地这样做是为了训练我的解析几何技能。其他视觉效果将在稍后添加，现在我只需要渲染几种不同的颜色像素。

就业绩而言，最好的策略是什么？现代屏幕真的很大，所以我预计每个像素最多可达5000像素。

Answer 1

好的，看起来很脏，但很简单，我们从Pixi创建了一些Graphics对象：

this.stage = new PIXI.Container();
...
this.gameMap = new PIXI.Graphics();

然后，在数据更改的每个呈现操作中：

GameRenderer.prototype.drawPixels = function() {
  var gr = this.gameMap;
  this.stage.removeChild(this.gameMap);
  //This clears previous image. May be ommited in special cases
  gr.clear();

  for( y coordinate... ) {
    for( x coordinate...) {
      if(something here) {
        gr.lineStyle(0, 0x0000FF, 1);
        gr.beginFill(PIXEL COLOR HERE, 1);
        gr.drawRect(x+20, y+20, 1, 1);
      }
    }
    }
  }
  this.stage.addChild(this.gameMap);
}