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을하는 것이 작업을 수행하는 더 좋은 방법. 예를 들어 건강 줄은 당신이 주변에 먹이 스프 라이트를 이동하면, 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);