[Learning Pixi] 10. Make a sprite from a tileset sub-image

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

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

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

이제 단일 이미지 파일에서 스프라이트를 만드는 방법을 알게 되었습니다. 그러나 게임 디자이너라면 일반적으로 타일셋(tileset)(스프라이트시트(spritesheets) 라고도 함)을 사용하여 스프라이트를 만들 것입니다. Pixi에는 이를 돕는 몇 가지 편리한 내장 방법이 있습니다. 타일셋은 하위 이미지를 포함하는 단일 이미지 파일입니다. 하위 이미지는 게임에서 사용하려는 모든 그래픽을 나타냅니다. 다음은 게임 캐릭터와 게임 개체를 하위 이미지로 포함하는 타일셋 이미지의 예입니다.

전체 타일셋은 192 x 192 픽셀입니다. 각 이미지는 자체 32 x 32 픽셀 격자 셀에 있습니다. 타일셋에 모든 게임 그래픽을 저장하고 액세스하는 것은 그래픽 작업을 위한 프로세서 및 메모리 효율적인 방법이며, Pixi는 이에 최적화되어 있습니다.

추출하려는 하위 이미지(sub-image)와 크기 및 위치가 동일한 직사각형 영역을 정의하여 타일셋에서 하위 이미지를 캡처할 수 있습니다. 다음은 타일셋에서 추출한 로켓 하위 이미지의 예입니다.

이 작업을 수행하는 코드를 살펴보겠습니다. 먼저 이전 예제에서 했던 것처럼 Pixi의 Pixi로 Tileset.png 이미지를 로드합니다.

loader
  .add("images/tileset.png")
  .load(setup);

다음으로, 이미지가 로드되면 타일셋의 직사각형 하위 섹션을 사용하여 스프라이트의 이미지를 만듭니다. 다음은 하위 이미지를 추출하고, 로켓 스프라이트를 생성하고, 캔버스에 배치하고 표시하는 코드입니다.

function setup() {

  //Create the `tileset` sprite from the texture
  const texture = TextureCache["images/tileset.png"];

  //Create a rectangle object that defines the position and
  //size of the sub-image you want to extract from the texture
  //(`Rectangle` is an alias for `PIXI.Rectangle`)
  const rectangle = new Rectangle(192, 128, 64, 64);

  //Tell the texture to use that rectangular section
  texture.frame = rectangle;

  //Create the sprite from the texture
  const rocket = new Sprite(texture);

  //Position the rocket sprite on the canvas
  rocket.x = 32;
  rocket.y = 32;

  //Add the rocket to the stage
  app.stage.addChild(rocket);

  //Render the stage   
  app.renderer.render(app.stage);
}

이게 어떻게 작동하는 걸까요?

Pixi에는 직사각형 모양을 정의하기 위한 범용 개체인 기본 제공 Rectangle 객체(PIXI.Rectangle)가 있습니다. 네 가지 인자가 필요합니다. 처음 두 인자는 사각형의 x 및 y 위치를 정의합니다. 마지막 두 개는 width와 height를 정의합니다. 다음은 새 Rectangle 객체를 정의하는 형식입니다.

const rectangle = new Rectangle(x, y, width, height);

Rectangle 객체는 데이터 객체일 뿐입니다. 사용 방법을 결정하는 것은 사용자의 몫입니다. 이 예에서는 추출하려는 타일셋에서 하위 이미지의 위치와 영역을 정의하는 데 사용합니다. Pixi 텍스처에는 Rectangle 객체로 설정할 수 있는 frame이라는 유용한 프로퍼티가 있습니다. frame은 텍스처를 Rectangle의 크기로 자릅니다. frame을 사용하여 로켓의 크기와 위치에 맞게 텍스처를 자르는 방법은 다음과 같습니다.

const rectangle = new Rectangle(192, 128, 64, 64);
texture.frame = rectangle;

그런 다음 잘린 텍스처를 사용하여 스프라이트를 만들 수 있습니다.

const rocket = new Sprite(texture);

이게 바로 작동하는 방식입니다!

타일셋에서 스프라이트 텍스처를 만드는 것은 자주 할 수 있는 일이기 때문에 Pixi는 이를 도와주는 보다 편리한 방법을 제공합니다. 다음 단계를 알아보겠습니다.