[PIXI] 이미지를 로드하여 texture -> sprite -> canvas에 add 하는 과정

이미지 로드

이미지로 작업하기 위한 첫 번째 단계는 웹 서버에서 사용자의 웹 브라우저로 이미지 파일을 가져오는 것입니다. 이를 PIXI.Texture.from()위해 빠른 데모용으로 작동하는 를 사용할 수 있지만 프로덕션에서는 Loader 클래스를 사용합니다. 로더는 요소를 사용하여 래핑하고 관리하여 <IMG>브라우저에 이미지를 가져오도록 지시한 다음 완료되면 알려줍니다. 이 프로세스는 비동기식 입니다 . 로드를 요청한 다음 시간이 지나면 로드가 완료되었음을 알리는 이벤트가 발생합니다. 

BaseTextures는 데이터를 소유합니다

로더가 작업을 완료하면 로드된 <IMG>요소에 필요한 픽셀 데이터가 포함됩니다. 그러나 무언가를 렌더링하는 데 사용하려면 PixiJS가 원시 이미지 파일을 가져와 GPU에 업로드해야 합니다. 이것은 우리에게 텍스처 시스템의 진정한 주역인 BaseTexture 클래스를 제공합니다. 각 BaseTexture는 단일 픽셀 소스(일반적으로 이미지이지만 Canvas 또는 Video 요소일 수도 있음)를 관리합니다. BaseTexture를 사용하면 PixiJS가 이미지를 픽셀로 변환하고 해당 픽셀을 렌더링에 사용할 수 있습니다. 또한 랩 모드(0.0-1.0 범위 밖의 UV 좌표용) 및 스케일 모드(텍스처 크기 조정 시 사용)와 같이 텍스처 데이터가 렌더링되는 방식을 제어하는 ​​설정도 포함되어 있습니다.

BaseTexture는 자동으로 캐시되므로 PIXI.Texture.from()동일한 URL을 반복적으로 호출하면 매번 동일한 BaseTexture가 반환됩니다. BaseTexture를 파괴하면 연관된 이미지 데이터가 해제됩니다.

텍스처 불러오기

이후 가이드에서 리소스 로딩에 대해 논의하겠지만, 새로운 사용자가 PixiJS 프로젝트를 빌드할 때 직면하는 가장 일반적인 문제 중 하나는 텍스처를 가장 잘 로드하는 방법입니다. 데모 스니펫에서와 같이 사용 PIXI.Texture.from()하면 작동하지만 개체가 장면 그래프에서 이미 렌더링되는 동안 각 텍스처가 로드될 때 팝업이 발생합니다.

대신, 다음은 좋은 솔루션에 대한 빠른 치트 시트입니다.

1. 로딩 이미지 표시
2. 로더 만들기
3. 모든 텍스처 기반 객체 실행, 텍스처를 로더에 추가
4. 로더를 시작하고 선택적으로 진행률 콜백을 기반으로 로딩 이미지를 업데이트합니다.
5. 로더 완료 시 모든 개체를 실행 PIXI.Texture.from()하고 텍스처 캐시에서 로드된 텍스처를 가져오는 데 사용합니다.
6. 텍스처 준비(선택 사항 - 아래 참조)
7. 로딩 이미지 숨기기, 장면 그래프 렌더링 시작

이 워크플로를 사용하면 텍스처가 미리 로드되어 팝인을 방지하고 상대적으로 쉽게 코딩할 수 있습니다.

텍스처 준비 관련: 텍스처를 로드한 후에도 이미지를 GPU로 푸시하고 디코딩해야 합니다. 많은 수의 소스 이미지에 대해 이 작업을 수행하면 속도가 느려지고 프로젝트가 처음 로드될 때 지연 급증이 발생할 수 있습니다. 이 문제를 해결하려면 프로젝트를 표시하기 전에 마지막 단계에서 텍스처를 미리 로드할 수 있는 준비 플러그인을 사용할 수 있습니다.

https://pixijs.io/guides/basics/textures.html

PixiJS: Textures

https://www.codeandweb.com/texturepacker/tutorials/how-to-create-sprite-sheets-and-animations-with-pixijs5

How to create sprite sheets & animations for PixiJS 5

https://www.pixiplayground.com/#/edit/FoChFu40Ql48ApAaf_BbG

 

실습 코드

//pixi의 스프라이트 클래스를 생성하고
const girlTexture = PIXI.Texture.from('images/girl.png');
//텍스처를 인수로 설정하는 스프라이트 클래스를 생성해준다.
const girlSprite = new PIXI.Sprite(girlTexture);
//스프라이트를 스테이지에 추가해준다.
app.stage.addChild(girlSprite);

 

전체 코드

const Application = PIXI.Application;
const app = new Application({
	width: window.innerWidth,
	height: window.innerHeight,
	transparent: false,
	antialias: true,
	backgroundColor: 0xAAAAAA
});
//배경색 변경
app.renderer.backgroundColor = 0x23395D;
//생성자가 아니더라도 이와 같이 크기 조정 가능
app.renderer.view.style.position = 'absolute';
document.body.appendChild(app.view);


const graphics = PIXI.Graphics;

//pixi의 스프라이트 클래스를 생성하고
const girlTexture = PIXI.Texture.from('images/girl.png');
//텍스처를 인수로 설정하는 스프라이트 클래스를 생성해준다.
const girlSprite = new PIXI.Sprite(girlTexture);
//스프라이트를 스테이지에 추가해준다.
app.stage.addChild(girlSprite);

 

캡처