Pixi.js How should HP write?

问题

How should HP write?

Because HP will decrease, but I found that he will deform.

Each time container.hpStatus.width- = 1; HP's icon will be distorted, especially HP = 0 is most obvious.

enter image description here

You Can Look My Codepen.

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

How can i make sure he doesn't deform？

回答1:

The hp bar is getting distorted because you are decreasing width of "container.hpStatus" which is Geometry object which is itself a Container:

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

And as you see in docs of the "width" property: 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

It means that changing "width" scales whole container ("container.hpStatus").

To draw such hp bar without "distortion" you can do it by drawing hp bar on each "tick" (each frame).

Plaese check following code - is your example but modified. Most important parts are "createHpBar" function and modified "main loop" (ticker).

(i also added some comments so you can understand better)

and here is updated 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();

来源：https://stackoverflow.com/questions/60504247/pixi-js-how-should-hp-write

标签

pixi.js