Создать проекционную плитку isometri c для карты мозаики с Pixi JS? - PullRequest
Новая
       5

Создать проекционную плитку isometri c для карты мозаики с Pixi JS?

2 голосов
/ 08 февраля 2020

Я решил не использовать спрайты и динамически создавать плитку с помощью PIXI.Graphics, но я не уверен, с чего начать. Я могу создать базовые c фигуры, такие как квадраты и прямоугольники, но мне нужна помощь с плиткой.

Самое близкое, что я могу получить, это 

var graphics = new PIXI.Graphics();

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

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

app.stage.addChild(graphics);

Что-то похожее на изображение ниже, это то, что Я ищу

enter image description here

1 Ответ

0 голосов
/ 17 февраля 2020

Это моя первая попытка, сделанная методом проб и ошибок (похоже, она работает как задумано). 

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>
...