이 글은 다음 페이지를 번역한 글입니다.
https://github.com/kittykatattack/learningPixi#alittlemoreaboutloadingthings
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 리포지토리에서 자세한 정보를 확인하십시오.
'그래픽 > PixiJS' 카테고리의 다른 글
[Learning Pixi] 8. Size and scale (0) | 2021.10.19 |
---|---|
[Learning Pixi] 7. Positioning sprites (0) | 2021.10.19 |
[Learning Pixi] 6. Displaying sprites(1) (0) | 2021.10.17 |
[Learning Pixi] 5. Loading images into the texture cache (0) | 2021.10.17 |
[Learning Pixi] 4. Pixi sprites (0) | 2021.10.17 |