[Learning Pixi] 9. Rotation

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

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

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

rotation 프로퍼티를 라디안 값으로 설정하여 스프라이트를 회전시킬 수 있습니다.

cat.rotation = 0.5;

근데 이 회전이 어느 점을 기준으로 시작된 걸까요?

스프라이트의 왼쪽 상단 모서리가 x 및 y 위치를 나타내는 것을 보았습니다. 그 지점을 anchor point 이라고 합니다. 스프라이트의 rotation 프로퍼티를 0.5로 설정하면 스프라이트의 앵커 포인트를 중심으로 회전이 발생합니다. 이 다이어그램은 이것이 고양이 스프라이트에 어떤 영향을 미치는지 보여줍니다.

고양이의 왼쪽 귀인 앵커 포인트가 고양이가 회전하는 가상 원의 중심임을 알 수 있습니다. 스프라이트가 고양이의 중심을 기준으로 회전하도록 하려면 어떻게 해야 할까요? 스프라이트의 anchor 포인트를 다음과 같이 스프라이트 내부의 중앙에 위치하도록 변경합니다.

cat.anchor.x = 0.5;
cat.anchor.y = 0.5;

anchor.x 및 anchor.y 값은 텍스처 크기의 백분율을 0에서 1(0%에서 100%)까지 나타냅니다. 0.5로 설정하면 텍스처가 포인트 위에 중앙에 놓입니다. 점 자체의 위치는 변경되지 않고 텍스처가 점 위에 배치되는 방식만 변경됩니다.

다음 다이어그램은 앵커 포인트를 가운데에 놓으면 회전된 스프라이트에 어떤 일이 발생하는지 보여줍니다.

스프라이트의 텍스처가 위아래로 이동하는 것을 볼 수 있습니다. 이것은 기억해야 할 중요한 부작용(side-effect)입니다!

position 및 scale과 마찬가지로, 다음과 같은 한 줄의 코드로 앵커의 x 및 y 값을 설정할 수 있습니다.

cat.anchor.set(x, y);

스프라이트에는 anchor와 유사한 방식으로 작동하는 pivot 프로퍼티도 있습니다. pivot은 스프라이트의 x/y 원점 위치를 설정합니다. 피벗 포인트를 변경한 다음 스프라이트를 회전하면 해당 원점을 중심으로 회전합니다. 예를 들어 다음 코드는 스프라이트의 pivot.x 지점을 32로 설정하고 pivot.y 지점을 32로 설정합니다.

cat.pivot.set(32, 32);

스프라이트가 64x64 픽셀이라고 가정하면 스프라이트는 이제 중심점을 중심으로 회전합니다. 그러나 기억하십시오: 스프라이트의 피벗 포인트를 변경하면 x/y 원점도 변경됩니다.

그렇다면 anchor와 pivot의 차이점은 무엇일까요? 둘은 정말로 비슷합니다! anchor는 0에서 1로 정규화된 값을 사용하여 스프라이트 이미지 텍스처의 원점을 이동합니다. pivot은 픽셀 값을 사용하여 스프라이트의 x 및 y 점의 원점을 이동합니다. 어떤 것을 사용하면 되냐구요? 그것은 당신에게 달려 있습니다. 둘 다 가지고 놀아보고 당신이 선호하는 것을 찾으십시오.