[Learning Pixi] 6. Displaying sprites(1)

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

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

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

이미지를 로드하고 이를 사용하여 스프라이트를 만든 후에는 다음과 같이 stage.addChild 메서드를 사용하여 Pixi의 stage에 스프라이트를 추가해야 합니다.

app.stage.addChild(cat);

stage는 모든 스프라이트를 보관하는 메인 컨테이너라는 것을 기억하세요.

중요: stage에 추가하지 않으면 스프라이트를 볼 수 없습니다!

계속하기 전에 방금 배운 내용을 사용하여 단일 이미지를 표시하는 방법에 대한 실제 예를 살펴보겠습니다. examples/images 폴더에서 고양이의 64 x 64 픽셀 PNG 이미지를 찾을 수 있습니다.

다음은 이미지를 로드하고, 스프라이트를 만들고, Pixi의 스테이지에 표시하는 데 필요한 모든 JavaScript 코드입니다.

//Create a Pixi Application
const app = new PIXI.Application({ 
    width: 256, 
    height: 256,                       
    antialias: true, 
    transparent: false, 
    resolution: 1
  }
);

//Add the canvas that Pixi automatically created for you to the HTML document
document.body.appendChild(app.view);

//load an image and run the `setup` function when it's done
PIXI.Loader.shared
  .add("images/cat.png")
  .load(setup);

//This `setup` function will run when the image has loaded
function setup() {

  //Create the cat sprite
  const cat = new PIXI.Sprite(PIXI.Loader.shared.resources["images/cat.png"].texture);

  //Add the cat to the stage
  app.stage.addChild(cat);
}

이 코드가 실행되면 다음과 같이 표시됩니다.

좋아요 잘하고 있습니다!

스테이지에서 스프라이트를 제거해야 하는 경우 removeChild 메서드를 사용하세요.

app.stage.removeChild(anySprite);

그러나 일반적으로 스프라이트의 visible 속성을 false로 설정하는 것이 스프라이트를 사라지게 하는 더 간단하고 효율적인 방법입니다.

anySprite.visible = false;

Using aliases

자주 사용하는 Pixi 객체 및 메서드에 대한 짧은 형식의 별칭(alias)을 만들어 약간의 입력을 줄이고 코드를 더 읽기 쉽게 만들 수 있습니다. 예를 들어, PIXI를 모든 Pixi의 객체에 접두어로 붙이면 답답하시죠? 그렇게 생각한다면 그것을 가리키는 더 짧은 별칭을 만드세요. 예를 들어 TextureCache 객체에 대한 별칭을 만드는 방법은 다음과 같습니다.

const TextureCache = PIXI.utils.TextureCache;

그런 다음 다음과 같이 원본 대신 해당 별칭을 사용합니다.

const texture = TextureCache["images/cat.png"];

약간 더 간결한 코드를 작성할 수 있을 뿐만 아니라 별칭을 사용하면 추가적인 이점이 있습니다: 즉, Pixi의 자주 변경되는 API를 버퍼링하는 데 도움이 됩니다. 향후 버전에서 Pixi의 API가 변경되면 변경될 것입니다! - 코드 전체에서 사용되는 모든 인스턴스 대신에 프로그램 시작 시 한 곳에서 이러한 별칭을 Pixi 객체 및 메서드로 업데이트하기만 하면 됩니다. 따라서 Pixi의 개발 팀이 가구를 약간 재배치하기로 결정하면 귀하가 그들보다 한 발 앞서게 될 것입니다!

이 작업을 수행하는 방법을 보려면 모든 Pixi 객체 및 메서드에 대한 별칭을 사용하여 이미지를 로드하고 표시하기 위해 작성한 코드를 다시 작성해 보겠습니다.

//Aliases
const Application = PIXI.Application,
    loader = PIXI.Loader.shared,
    resources = PIXI.Loader.shared.resources,
    Sprite = PIXI.Sprite;

//Create a Pixi Application
const app = new Application({ 
    width: 256, 
    height: 256,                       
    antialias: true, 
    transparent: false, 
    resolution: 1
  }
);

//Add the canvas that Pixi automatically created for you to the HTML document
document.body.appendChild(app.view);

//load an image and run the `setup` function when it's done
loader
  .add("images/cat.png")
  .load(setup);

//This `setup` function will run when the image has loaded
function setup() {

  //Create the cat sprite
  const cat = new Sprite(resources["images/cat.png"].texture);

  //Add the cat to the stage
  app.stage.addChild(cat);
}

이 튜토리얼의 대부분의 예제는 동일한 모델을 따르는 Pixi 객체에 대한 별칭을 사용합니다. 달리 명시되지 않는 한, 뒤에 오는 모든 코드 예제는 다음과 같은 별칭을 사용한다고 가정할 수 있습니다.

이것이 이미지 로드와 스프라이트 생성을 시작하기 위해 알아야 할 전부입니다.