我应该如何处理 Pixi.js 中的像素网格渲染？

Question

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

网络套接字
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);
}

我应该如何处理 Pixi.js 中的像素网格渲染？

How should I approach rendering pixel grid in Pixi.js?

javascript

pixi.js