[Learning Pixi] 7. Positioning sprites

이 글은 다음 페이지를 번역한 글입니다.

https://github.com/kittykatattack/learningPixi#positioning

GitHub - kittykatattack/learningPixi: A step-by-step introduction to making games and interactive media with the Pixi.js renderi

스프라이트를 만들고 표시하는 방법을 알았으므로 이제 스프라이트를 배치하고 크기를 조정하는 방법을 알아보겠습니다.

이전 예제에서 고양이 스프라이트는 왼쪽 상단 모서리에 있는 스테이지에 추가되었습니다. 고양이의 x 위치(position)는 0이고 y 위치는 0입니다. 고양이의 x 및 y 속성 값을 변경하여 고양이의 위치를 변경할 수 있습니다. 다음은 x 및 y 속성 값을 96으로 설정하여 고양이를 무대 중앙에 배치하는 방법입니다.

cat.x = 96;
cat.y = 96;

스프라이트를 만든 후 setup 함수 내부에 이 두 줄의 코드를 추가합니다.

function setup() {

  //Create the `cat` sprite
  const cat = new Sprite(resources["images/cat.png"].texture);

  //Change the sprite's position
  cat.x = 96;
  cat.y = 96;

  //Add the cat to the stage so you can see it
  app.stage.addChild(cat);
}

(참고: 이 예에서 Sprite는 PIXI.Sprite의 별칭(alias)이고, TextureCache는 PIXI.utils.TextureCache의 별칭이며, resources는 앞서 설명한 PIXI.Loader.shared.resources의 별칭입니다. 저는 별칭을 사용할 것입니다. 이제부터 예제 코드의 모든 Pixi 개체 및 메서드에 대해 이와 동일한 형식을 따릅니다.)

이 두 줄의 새로운 코드는 cat을 오른쪽으로 96픽셀, 아래로 96픽셀 이동합니다. 결과는 다음과 같습니다.

고양이의 왼쪽 위 모서리(왼쪽 귀)는 x 및 y 기준점을 나타냅니다. 고양이를 오른쪽으로 움직이게 하려면 고양이의 x 프로퍼티 값을 높이세요. 고양이를 아래로 움직이게 하려면 y 프로퍼티의 값을 높이십시오. 고양이의 x 값이 0이면 무대의 맨 왼쪽에 있습니다. y 값이 0이면 스테이지의 맨 위에 있습니다.

스프라이트의 x 및 y 속성을 개별적으로 설정하는 대신 다음과 같이 한 줄의 코드에서 함께 설정할 수 있습니다.

sprite.position.set(x, y);