使用Pixi JS为瓷砖地图创建等距的投影瓷砖？

Question

我决定不使用精灵，而是使用PIXI.Graphics动态创建图块，但是我不确定从哪里开始。我可以创建基本形状，例如正方形和矩形，但是在瓷砖中需要一些帮助。

我能得到的最接近的是这个

var graphics = new PIXI.Graphics();

graphics.beginFill(0x989865);
graphics.lineStyle(1, 0x8E8E5E);
graphics.endFill();

graphics.drawRect(50, 50, 50, 50);

app.stage.addChild(graphics);

类似下面的图像是我想要的

Answer 1

这是我的尝试，是通过反复试验（它似乎按预期的方式工作。）。

PIXI.utils.skipHello();

var app = new PIXI.Application(500, 500, {
  backgroundColor: 0x000000,
  antialias: true
});
document.body.appendChild(app.view);

renderIsometricTile(app, 20, 20, 50, 5, 0x989865, 0x767643, 0x545421);
renderIsometricTile(app, 60, 40, 50, 5, 0x2A63FF, 0x0841DD, 0x0620AA);
renderIsometricTile(app, 148, 39, 50, 5, 0x59CD90, 0x37AB70, 0x257750);
renderIsometricTile(app, 200, 200, 150, 10, 0x3D3D8B, 0x1B1B6A, 0x1B1B48);
renderIsometricTile(app, 100, 150, 75, 20, 0xFFD23F, 0xDDB01D, 0xBB7A0A);


function renderIsometricTile(app, x, y, size, height, topColor, leftColor, rightColor) {
  var topSide = new PIXI.Graphics();

  topSide.beginFill(topColor);
  topSide.drawRect(0, 0, size, size);
  topSide.endFill();
  topSide.setTransform(x, y + size * 0.5, 1, 1, 0, 1.1, -0.5, 0, 0);

  var leftSide = new PIXI.Graphics();

  leftSide.beginFill(leftColor);
  leftSide.drawRect(0, 0, height, size);
  leftSide.endFill();
  leftSide.setTransform(x, y + size * 0.5, 1, 1, 0, 1.1, 1.57, 0, 0);

  var rightSide = new PIXI.Graphics();

  rightSide.beginFill(rightColor);
  rightSide.drawRect(0, 0, size, height);
  rightSide.endFill();
  rightSide.setTransform(x, y + size * 0.5, 1, 1, 0, -0.0, -0.5, -(size + (size * 0.015)), -(size - (size * 0.06)));

  app.stage.addChild(topSide);
  app.stage.addChild(leftSide);
  app.stage.addChild(rightSide);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.2.1/pixi.min.js"></script>