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

これを実行するより良い方法は、ヘルスバーを獲物スプライト自体の子として持つことです。ヘルスバーがあなたの獲物のスプライトの子であるあなたの周りの獲物スプライトを移動すると、healthbarはそれと一緒に移動すること（すでに逃し解決してきたビット）今

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

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

、一例として、（これは私はあなたの状況であなたが望むものと推測しています）。

Answer 2

ヘルスバーの最初のコーナーを(0,0)に設定すると、問題が解決されました。

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