[Learning Pixi] 4. Pixi sprites

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

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

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

이제 렌더러가 있으므로 여기에 이미지를 추가할 수 있습니다. 렌더러에서 보여주고 싶은 모든 것은 stage라고 하는 특별한 픽시 객체에 추가되어야 합니다. 다음과 같이 이 특수 stage 객체에 액세스할 수 있습니다.

app.stage

stage는 Pixi Container 객체입니다. 컨테이너는 당신이 추가한 것들을 그룹화하고 저장하는, 일종의 빈 상자로 생각할 수 있습니다. stage 객체는 장면에서 보이는 모든 사물의 루트 컨테이너입니다. stage 안에 무엇을 넣어도 캔버스에 렌더링됩니다. 지금은 stage가 비어 있지만 곧 그 안에 물건을 넣기 시작할 것입니다. (Pixi의 Container 객체에 대한 자세한 내용은 여기에서 읽을 수 있습니다.)

(중요: stage는 Pixi Container이기 때문에 다른 Container 객체와 동일한 프로퍼티와 메서드를 가지고 있습니다. 그러나 staege에는 width와 height 프로퍼티가 있지만 렌더링 창의 크기를 나타내지는 않습니다. 스테이지의 width와 height 프로퍼티는 그 안에 넣은 물건이 차지하는 면적을 알려줍니다. 앞으로 더 자세히 설명할 겁니다!)

그래서 스테이지에는 뭘 올리는 걸까요? 스프라이트라고 하는 특별한 이미지 객체를 올리는 것입니다. 스프라이트는 기본적으로 코드로 제어할 수 있는 이미지입니다. 대화형 및 애니메이션 그래픽을 만드는 데 유용한 위치, 크기 및 기타 속성 호스트를 제어할 수 있습니다. 스프라이트를 만들고 제어하는 방법을 배우는 것은 Pixi를 사용하는 방법을 배우는 데 있어 정말로 가장 중요합니다. 스프라이트를 만들고 스테이지에 추가하는 방법을 알고 있다면 거의 게임 제작을 시작하는 단계에 와 있는 것입니다.

Pixi에는 게임 스프라이트를 만드는 다재다능한 방법인 Sprite 클래스가 있습니다. 이를 만드는 세 가지 주요 방법이 있습니다:

• 단일 이미지 파일로 만들기.
• 타일셋(tileset) 의 하위 이미지로 만들기. 타일셋은 게임에 필요한 모든 이미지를 포함하는 하나의 큰 이미지입니다.
• 텍스처 아틀라스(texture atlas) 로 만들기.(타일셋에서 이미지의 크기와 위치를 정의하는 JSON 파일)

세 가지 방법을 모두 배우게 되지만, 그 전에 Pixi로 이미지를 표시하기 전에 이미지에 대해 알아야 할 사항을 알아보겠습니다.