Como carregar arquivos de forma assíncrona com o Phaser 3

Escrito em 18 de novembro de 2021 - 🕒 1 min. de leitura

No Phaser 3, é possível pré-carregar os assets do jogo na função preload, para eles estarem prontos para uso quando a função create iniciar. Mas e se você precisar esperar por um request de uma API antes de carregar um asset?

Infelizmente, não é possível fazer com que a função preload seja async para forçá-la a esperar por funções assincronias, mas existem maneiras de contornar isso.

Usando o Rex Await Loader Plugin

rexrainbow é um grande desenvolvedor que traz muito para a comunidade Phaser, como um site cheio de exemplos de Phaser e um monte de ótimos plugins para o Phaser.

O Rex Await Loader Plugin pode ser carregado no contexto global do jogo, basta adiciona-lo no atributo plugins na configuração do Phaser.

import AwaitLoaderPlugin from 'phaser3-rex-plugins/plugins/awaitloader-plugin.js';

const game = new Phaser.Game({
    ...config,
    plugins: {
        global: [
            {
                key: 'rexAwaitLoader',
                plugin: AwaitLoaderPlugin,
                start: true,
            },
        ],
    },
});

Então na função preload da game scene:

preload() {
    this.load.image('image', 'path/to/image.png');
    this.load.rexAwait((successCallback, failureCallback) => {
        fetch('localhost', {
            method: 'GET'
        }).then(() => {
            // do stuff then call the success callback
            successCallback();
        });
    });
    this.load.image('image2', 'path/to/image2.png');
}

Usando o Phaser Loader

Para evitar o carregamento de plugins externos, também existe a opção de usar o Phaser Loader nativo, conforme descrito pelo usuário yannick no Discourse do Phaser.

preload() {
    const asyncLoader = (loaderPlugin) => new Promise((resolve, reject) => {
        loaderPlugin.on('filecomplete', resolve).on('loaderror', reject);
        loaderPlugin.start();
    });

    const doStuff = async () => {
        await asyncLoader(this.load.image('image2', 'path/to/image2.png'));
    };

    this.load.image('image', 'path/to/image.png');
    doStuff();
    this.load.image('image3', 'path/to/image3.png');
}

E é isso, caso esse post tenha sido de alguma forma útil para você, não esqueça de deixar um comentário.

pablo.gg

Usando o Rex Await Loader Plugin

Usando o Phaser Loader

Posts relacionados

Publicar um comentário

Comentários