Créer une tuile à projection isométrique pour une carte à carreaux avec Pixi JS ?

Question

J'ai décidé de ne pas utiliser de sprites et de créer la tuile dynamiquement avec PIXI.Graphics, mais je ne sais pas trop par où commencer. Je peux créer des formes de base comme des carrés et des rectangles, mais j'ai besoin d'aide pour créer une tuile.

Le plus proche que je puisse obtenir est ceci

var graphics = new PIXI.Graphics();

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

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

app.stage.addChild(graphics);

Quelque chose comme l'image ci-dessous est ce que je recherche

Answer 1

Il s'agit de ma première tentative, faite par essais et erreurs (il semble que cela fonctionne comme prévu).

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>