이 글은 다음 페이지를 번역한 글입니다.
https://github.com/kittykatattack/learningPixi#positioning
스프라이트를 만들고 표시하는 방법을 알았으므로 이제 스프라이트를 배치하고 크기를 조정하는 방법을 알아보겠습니다.
이전 예제에서 고양이 스프라이트는 왼쪽 상단 모서리에 있는 스테이지에 추가되었습니다. 고양이의 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);
'그래픽 > PixiJS' 카테고리의 다른 글
[Learning Pixi] 9. Rotation (0) | 2021.10.19 |
---|---|
[Learning Pixi] 8. Size and scale (0) | 2021.10.19 |
[Learning Pixi] 6. Displaying sprites(2) (0) | 2021.10.18 |
[Learning Pixi] 6. Displaying sprites(1) (0) | 2021.10.17 |
[Learning Pixi] 5. Loading images into the texture cache (0) | 2021.10.17 |