javascript - 使用 Pixi JS 为瓦片 map 创建等距投影瓦片？

Question

我决定不使用 Sprite 并使用 PIXI.Graphics 动态创建图 block ，但我不知道从哪里开始。我可以创建正方形和矩形等基本形状，但我需要一些图 block 方面的帮助。

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

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({
    width: 800,
    height: 600,
    backgroundColor: 0x000000,
    antialias: true,
    autoDensity: true,
    resolution: 2 
});

document.body.appendChild(app.view);

var stage = app.stage;

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

function renderIsometricTile(stage, 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)));

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

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