[Learning Pixi] 8. Size and scale

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

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

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

width 및 height 프로퍼티를 설정하여 스프라이트의 크기를 변경할 수 있습니다. 고양이에게 width 80픽셀, height 120픽셀을 지정하는 방법은 다음과 같습니다.

cat.width = 80;
cat.height = 120;

다음과 같이 두 줄의 코드를 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;

  //Change the sprite's size
  cat.width = 80;
  cat.height = 120;

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

결과는 다음과 같습니다:

고양이의 위치(왼쪽 상단 모서리)는 변경되지 않고 너비와 높이만 변경되었음을 알 수 있습니다.

또한 스프라이트에는 스프라이트의 너비와 높이를 비례적으로 변경하는 scale.x 및 scale.y 프로퍼티가 있습니다. 고양이의 스케일을 절반 크기로 설정하는 방법은 다음과 같습니다:

cat.scale.x = 0.5;
cat.scale.y = 0.5;

스케일 값은 스프라이트 크기의 백분율을 나타내는 0에서 1 사이의 숫자입니다. 1은 100%(전체 크기)를 의미하고 0.5는 50%(절반 크기)를 의미합니다. 다음과 같이 스케일 값을 2로 설정하여 스프라이트의 크기를 두 배로 늘릴 수 있습니다.

cat.scale.x = 2;
cat.scale.y = 2;

Pixi에는 scale.set 메서드를 사용하여 한 줄의 코드에서 스프라이트의 크기를 설정하는 간결한 대안이 있습니다.

cat.scale.set(0.5, 0.5);

당신이 끌리는 방법을 사용하십시오!

</ div>