Pixi.js惠普应该怎么写？

Question

HP应该如何书写？

因为HP会减少，但我发现他会变形。

每个时间container.hpStatus.width- = 1; HP的图标将失真，尤其是HP = 0最明显。

enter image description here

您可以看我的Codepen。

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

我如何确保他不会变形？

Answer 1

由于您正在减小“ container.hpStatus”的宽度而导致hp条变形，该容器本身就是一个容器，它是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

这意味着更改“宽度”将缩放整个容器（“ container.hpStatus”）。

要绘制没有“失真”的hp栏，您可以通过在每个“刻度”（每个帧）上绘制hp栏来做到。

简单检查以下代码-是您的示例，但已修改。最重要的部分是“ createHpBar”功能和修改的“主循环”（ticker）。

（（我还添加了一些评论，以便您可以更好地理解）

这里是更新的代码笔：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();