如何在PIXI JS中围绕舞台移动Graphics对象？

Question

我正在尝试为一个数字设置动画并在其上添加一个健康栏。我从精灵（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

更好的方法是将健康栏作为猎物Sprite本身的孩子。举个例子（你已经解决的比特错过了）

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

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

现在，健康栏是你的猎物精灵的孩子，当你移动猎物Sprite时，健康栏会随之移动（我认为这是你想要的情况）。

Answer 2

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

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