Pixi.js HP应该怎么写？

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

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")。

要在没有 "distortion" 的情况下绘制这样的生命值条，您可以通过在每个 "tick"（每帧）上绘制生命值条来实现。

请检查以下代码 - 是您的示例但已修改。最重要的部分是 "createHpBar" 函数和修改后的 "main loop"（代码）。

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

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

Pixi.js HP应该怎么写？

Pixi.js How should HP write?

pixi.js