Carregando imagens no cache de textura

Como o Pixi renderiza a imagem na GPU com WebGL, a imagem precisa estar em um formato que a GPU possa processar. Uma imagem pronta para WebGL é chamada de textura . Antes que você possa fazer um sprite exibir uma imagem, você precisa converter um arquivo de imagem comum em uma textura WebGL. Para manter tudo funcionando de maneira rápida e eficiente, o Pixi usa um cache de textura para armazenar e fazer referência a todas as texturas que seus sprites precisarem. Os nomes das texturas são sequências que correspondem aos locais dos arquivos das imagens às quais eles se referem. Isso significa que, se você tiver uma textura que foi carregada "images/cat.png", poderá encontrá-la no cache de textura da seguinte forma:

PIXI . utils . TextureCache [ " images / cat.png " ];

- As texturas são armazenadas em um formato compatível com WebGL que é eficiente para o renderizador do Pixi trabalhar. Você pode então usar a Spriteclasse do Pixi para fazer um novo sprite usando a textura.

deixe textura = PIXI . utils . TextureCache [ " images / anySpriteImage.png " ];

deixe sprite = novo PIXI.Sprite (textura);

- Mas como você carrega o arquivo de imagem e o converte em uma textura? Use o loader objeto embutido do Pixi.O loader objeto do Pixi é tudo o que você precisa para carregar qualquer tipo de imagem. Veja como usá-lo para carregar uma imagem e chamar uma função chamada setup quando a imagem terminar de carregar:

PIXI . carregador

. add ( " images / anyImage.png " )

. carga (setup);

function setup () {

// Este código será executado quando o carregador terminar de carregar a imagem

}

- É aconselhável que, se você usar o carregador, crie o sprite referenciando a textura no objeto loader's resources, desta forma:

deixe sprite = novo PIXI.Sprite (

PIXI . loader . resources [ " images / anyImage.png " ]. texture

);

- Aqui está um exemplo de algum código completo que você poderia escrever para carregar uma imagem, chamar a setup função e criar um sprite a partir da imagem carregada:

PIXI . carregador

. add ( " images / anyImage.png " )

. carga (setup);

function setup () {

deixar sprite = novo PIXI.Sprite (

PIXI . loader . resources [ " images / anyImage.png " ]. textura

);

}

- Você pode carregar várias imagens ao mesmo tempo, listando-as com addmétodos de cadeia , como este:

PIXI . carregador

. add ( " images / imageOne.png " )

. add ( " images / imageTwo.png " )

. add ( " images / imageThree.png " )

. carga (setup);

- Ou basta listar todos os arquivos que você deseja carregar em um array dentro de um único add método, como este:

PIXI . carregador

. add ([

" images / imageOne.png " ,

" images / imageTwo.png " ,

" images / imageThree.png "]

])

. carga (setup);