Pixi. js Как писать HP? - PullRequest
Новая
       4

Pixi. js Как писать HP?

0 голосов
/ 03 марта 2020

Как должен писать HP?

Поскольку HP будет уменьшаться, но я обнаружил, что он будет деформироваться.

Каждый раз container.hpStatus.width- = 1; Значок HP будет искажен, особенно наиболее очевидным является HP = 0.

введите описание изображения здесь

Вы можете посмотреть, мой Codepen . 

app.ticker.add((delta) => {
    if (container.hpStatus.width > 0) {
      container.hpStatus.width -= 1;
    } else {
      container.hpStatus.width = 450;
    }
 });

Как я могу убедиться, что он не деформируется?

1 Ответ

0 голосов
/ 03 марта 2020

Панель hp искажается, потому что вы уменьшаете ширину «container.hpStatus», который является объектом Geometry, который сам является контейнером:

https://pixijs.download/dev/docs/PIXI.Graphics.html#Graphics

И как вы видите в документах свойства "width": https://pixijs.download/dev/docs/PIXI.Container.html#width

width number

    The width of the Container, setting this will actually modify the scale to achieve the value set

Это означает, что изменение "width" масштабирует весь контейнер ("container.hpStatus").

Чтобы нарисовать такую ​​полосу hp без «искажения», вы можете сделать это, нарисовав полосу hp на каждой «галочке» (каждом кадре).

Простой код проверки следующего кода - это ваш пример, но измененный. Наиболее важными частями являются функция «createHpBar» и измененный «main l oop» (тикер).

(я также добавил несколько комментариев, чтобы вы могли лучше понять)

и вот обновленный codepen : https://codepen.io/domis86/pen/poJrKdq

const app = new PIXI.Application({
  view: document.getElementById('main'),
  width: 900,
  height: 900,
  antialias: true,
  transparent: false,
  backgroundColor: 0x00CC99,
});

// See: https://pixijs.download/dev/docs/PIXI.Ticker.html
let ticker = PIXI.Ticker.shared;
ticker.autoStart = false;



const container = new PIXI.Container();
app.stage.addChild(container);


function createHpBar(currentHp, maxHp, color) {
  let hpBar = new PIXI.Graphics();
  hpBar.beginFill(color);

  let hpPortion = currentHp / maxHp;

  hpBar.drawPolygon([
    50,                     80,
    50 + (400 * hpPortion), 80,
    32 + (400 * hpPortion), 150,
    32,                     150,
  ]);
  hpBar.endFill();
  return hpBar;
}

// Create black hp bar (the one behind the red one) and add it to our container:
let blackHpBar = createHpBar(450, 450, 0x000000);
container.addChild(blackHpBar);



container.x = 100;
container.y = 200;


let renderer = app.renderer;

// Starting amount of hp:
var currentHp = 450;

ticker.add((delta) => {

    // create red hp bar which is a polygon with vertices calculated using "currentHp" amount:
    let redHpBar = createHpBar(currentHp, 450, 0xFF0000);

    // add red hp bar to container:
    container.addChild(redHpBar);

    // render our stage (render all objects from containers added to stage)
    // see https://pixijs.download/dev/docs/PIXI.Ticker.html#.shared
    renderer.render(app.stage);

    // Remove red hp bar from our container:
    // We do this because on next tick (aka: next frame) we will create new redHpBar with "createHpBar" (as you see above)
    container.removeChild(redHpBar);

    // Update current hp amount:
    if (currentHp > 0) {
      currentHp -= 1;
    } else {
      currentHp = 450;
    }
});

// start rendering loop:
ticker.start();
...