如何在 PIXI JS 的舞台上移动图形对象？

Question

我正在尝试为人物制作动画并在其上添加健康栏。我从 sprite (new PIXI.sprite()) 创建图形，从图形对象 (new PIXI.Graphics()) 创建健康栏。

我可以通过设置其 X、Y 坐标来移动精灵，但是当我对 Graphics 对象执行相同操作时，它总是会移位，看起来它的原点就是精灵的当前位置。见下图。血条应该在图的上方。

var app = new PIXI.Application(windowWidth, windowHeight, {backgroundColor: 0x1099bb});
var prey = new PIXI.Sprite(texturePath);
var healthBar = new PIXI.Graphics();
healthBar.beginFill(0x00BB00);
healthBar.lineStyle(1, 0x000000);
healthBar.drawRect(prey.x - spriteLength, prey.y - spriteLength, spriteLength, 5);
prey.energyBar = healthBar;

app.stage.addChild(prey);
app.stage.addChild(healthBar);

prey.energyBar.position.set(prey.x,prey.y);

如何设置健康条的位置在图形正上方？

Answer 1

将健康栏的初始坐标设置为 (0,0) 解决了这个问题。

healthBar.drawRect(0, 0, spriteLength, 5);

Answer 2

更好的方法是将健康栏作为猎物 Sprite 本身的子项。举个例子（你已经解决的部分遗漏了）

var prey = new PIXI.Sprite( texturePath );
var heathbar = new PIXI.Graphics();
healthbar.y = -100;

prey.addChild( healthbar );
app.stage.addChild( prey );

现在，健康栏是猎物 Sprite 的子项，当您移动猎物 Sprite 时，健康栏将随之移动（我想这就是您所希望的情况）。

如何在 PIXI JS 的舞台上移动图形对象？

How to move a Graphics object around the stage in PIXI JS?

move

pixi.js