我应该如何接近渲染像素网格在Pixi.js

Question

我正尝试着创造一款简单的，基于像素的实时游戏，并利用新的HTML5技术获得乐趣:

• Web Sockets
• WebGL通过Pixi.js

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

就性能而言，最好的策略是什么?现代屏幕非常大，所以我希望单个像素达到5000。

Answer 1

看起来有点脏，但是很简单的方法就是从Pixi:

创建一些图形对象

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