[Learning Pixi] 6. Displaying sprites(2)

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

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

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

A little more about loading things

위에서 보여드린 형식은 이미지를 로드하고 스프라이트를 표시하기 위한 표준 템플릿으로 사용하는 것이 좋습니다. 따라서 다음 몇 단락을 안전하게 무시하고 다음 섹션인 "Positioning sprites"으로 바로 이동할 수 있습니다. 그러나 Pixi의 Loader 객체는 매우 정교하며 정기적으로 사용하지 않더라도 알고 있어야 하는 몇 가지 기능을 포함합니다. 가장 유용한 몇 가지를 살펴보겠습니다.

Make a sprite from an ordinary JavaScript Image object or Canvas

최적화와 효율성을 위해 Pixi의 텍스처 캐시에 미리 로드된 텍스처에서 스프라이트를 만드는 것이 항상 가장 좋습니다. 그러나 어떤 이유로 일반 JavaScript Image 객체에서 텍스처를 만들어야 하는 경우 Pixi의 BaseTexture 및 Texture 클래스를 사용하여 이를 수행할 수 있습니다.

const base = new PIXI.BaseTexture(anyImageObject),
    texture = new PIXI.Texture(base),
    sprite = new PIXI.Sprite(texture);

기존 캔버스 요소에서 텍스처를 만들려면 BaseTexture.from을 사용할 수 있습니다.

const base = new PIXI.BaseTexture.from(anyCanvasElement);

스프라이트가 표시하는 텍스처를 변경하려면 texture 프로퍼티를 사용하십시오. 다음과 같이 설정합니다.

anySprite.texture = PIXI.utils.TextureCache["anyTexture.png"];

게임에서 중요한 일이 발생하면 이 기술을 사용하여 스프라이트의 모양을 인터액티브하게 변경할 수 있습니다.

Assigning a name to a loading file

로드하려는 각 리소스에 고유한 이름을 할당할 수 있습니다. add 메소드의 첫 번째 인자로 이름(a string; 문자열)을 제공하기만 하면 됩니다. 예를 들어 고양이 이미지의 이름을 catImage로 지정하는 방법은 다음과 같습니다.

PIXI.Loader.shared
  .add("catImage", "images/cat.png")
  .load(setup);

그러면 Loader.shared.resources에 catImage라는 객체가 생성됩니다. 즉, 다음과 같이 catImage 객체를 참조하여 스프라이트를 만들 수 있습니다.

const cat = new PIXI.Sprite(PIXI.Loader.shared.resources.catImage.texture);

하지만 이 기능은 사용하지 않는 것이 좋습니다! 로드된 각 파일에 지정한 모든 이름을 기억해야 하고 실수로 같은 이름을 두 번 이상 사용하지 않도록 해야 하기 때문입니다. 이전 예에서 했던 것처럼 파일 경로 이름을 사용하는 것이 더 간단하고 오류가 덜 발생합니다.

Monitoring load progress

Pixi의 Loader에는 파일이 로드될 때마다 실행되는 사용자 정의 기능을 호출하는 특별한 progress 이벤트가 있습니다. progress 이벤트는 다음과 같이 Loader의 onProgress 메서드에 의해 호출됩니다.

PIXI.Loader.shared.onProgress.add(loadProgressHandler);

로딩 체인에 onProgress 메서드를 포함하고, 파일이 로드될 때마다 loadProgressHandler라는 사용자 정의 기능을 호출하는 방법은 다음과 같습니다.

PIXI.Loader.shared.onProgress.add(loadProgressHandler);
PIXI.Loader.shared
  .add([
    "images/one.png",
    "images/two.png",
    "images/three.png"
  ])
  .load(setup);

function loadProgressHandler(loader, resource) {

  //Display the file `url` currently being loaded
  console.log("loading: " + resource.url); 

  //Display the percentage of files currently loaded
  console.log("progress: " + loader.progress + "%"); 

  //If you gave your files names as the first argument 
  //of the `add` method, you can access them like this
  //console.log("loading: " + resource.name);
}

function setup() {
  console.log("All files loaded");
}

이 코드가 실행될 때 콘솔에 표시되는 내용은 다음과 같습니다.

loading: images/one.png
progress: 33.333333333333336%
loading: images/two.png
progress: 66.66666666666667%
loading: images/three.png
progress: 100%
All files loaded

로딩 진행률 표시줄을 만들기 위한 기초로 이것을 사용할 수 있기 때문에 정말 좋습니다.

(참고: resource 객체에 액세스할 수 있는 추가 프로퍼티가 있습니다. resource.error는 파일을 로드하는 동안 발생한 가능한 오류를 알려줍니다. resource.data를 사용하면 파일의 원시 이진 데이터(raw binary data)에 액세스할 수 있습니다.)

More about Pixi's Loader

Pixi의 Lodaer는 엄청나게 많은 기능과 구성이 가능합니다. 시작하기 위해 사용법을 간략히 살펴보겠습니다.

로더의 연결 가능한 add 메소드는 4가지 기본 인자를 취합니다.

add(name, url, optionObject, callbackFunction);

다음은 로더의 소스 코드 문서에서 이러한 매개변수에 대해 말하는 내용입니다.

name(string): 로드할 리소스의 이름입니다. 통과되지 않으면 url이 사용됩니다.
url(문자열): 로더의 baseUrl과 관련된 이 리소스의 url입니다.
options(객체 리터럴): 로드에 대한 옵션입니다.
options.crossOrigin(Boolean): 요청이 cross-origin인지 아닌지 결정합니다. 기본값은 자동으로 결정하는 것입니다.
options.loadType: 리소스의 로드타입입니다. 기본값은 Resource.LOAD_TYPE.XHR입니다.
options.xhrType: XHR을 사용할 때 로드되는 데이터를 해석하는 타입입니다. 기본값은 Resource.XHR_RESPONSE_TYPE.DEFAULT입니다.
callbackFunction: 이 특정 리소스가 로드를 완료할 때 호출할 함수입니다.

이러한 인수 중 필요한 유일한 것은 (로드하려는 파일의)url입니다.

다음은 add 메소드를 사용하여 파일을 로드할 수 있는 몇 가지 방법의 예입니다. 이 첫 번째 것들은 문서에서 로더의 "일반 구문(normal syntax)"이라고 부르는 것입니다.

.add('key', 'http://...', function () {})
.add('http://...', function () {})
.add('http://...')

다음은 로더의 "객체 구문(object syntax)"의 예입니다.

.add({
  name: 'key2',
  url: 'http://...'
}, function () {})

.add({
  url: 'http://...'
}, function () {})

.add({
  name: 'key3',
  url: 'http://...',
  onComplete: function () {}
})

.add({
  url: 'https://...',
  onComplete: function () {},
  crossOrigin: true
})

또한 add 메소드에 객체 배열, url 또는 둘 다를 전달할 수 있습니다.

.add([
  {
    name: 'key4',
    url: 'http://...',
    onComplete: function () {}
  },
  {
    url: 'http://...',
    onComplete: function () {}
  },
  'http://...'
]);

(참고: 새 파일 뭉치를 로드하기 위해 로더를 재설정해야 하는 경우, 로더의 reset 메소드를 호출하십시오. PIXI.Loader.shared.reset();)

Pixi의 Loader에는 모든 유형의 바이너리 파일을 로드하고 구문 분석할 수 있는 옵션을 포함하여 더 많은 고급 기능이 있습니다. 이것은 일상적으로 수행해야 하는 작업이 아니며 이 자습서의 범위를 벗어나므로 로더의 GitHub 리포지토리에서 자세한 정보를 확인하십시오.