Pixi.js 惠普应该怎么写？

Question

惠普应该怎么写？

因为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”的宽度，它是几何对象，它本身就是一个容器：

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 条，您可以通过在每个“tick”（每帧）上绘制 hp 条来做到这一点。

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

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

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