Melhorando o build de sprite sheets no Phaser JS com Webpack 4 - Skate Platformer Game Devlog #02

Escrito em 9 de setembro de 2020 - 🕒 2 min. de leitura

Fala galera, segundo post em menos de uma semana, inacreditável.

No gameplay não temos muitas novidades desde o último video, apenas algumas mudanças no build do jogo, nas quais gostaria de compartilhar aqui com vocês.

Primeiro tenho que pegar todos os arquivos de tileset, sprites e os arquivos das fases feitas no Tiled.

const stageFiles = await fs.readdir(STAGES_PATH);
const tilesetFiles = await fs.readdir(TILESETS_PATH);
const tilesetImageFiles = tilesetFiles
    .filter((tilesetFile) => supportedImageTypes.includes(tilesetFile.split('.')[1]));
const spritesFolders = await fs.readdir(SPRITES_PATH);

Na pasta dos sprites tem uma imagem para cada frame da animação:

Agora eu passo o caminho dessa pasta para o plugin WebpackFreeTexPacker com algumas configurações básicas:

const textPackerPlugin = [];
for (const spritesFolder of spritesFolders) {
    texPackerPlugin.push(
        new WebpackFreeTexPacker(
            path.resolve(__dirname, `${SPRITES_PATH}/${spritesFolder}`),
            '../assets/atlases',
            {
                height: 32,
                textureName: spritesFolder,
                fixedSize: false,
                padding: 0,
                allowRotation: false,
                detectIdentical: true,
                allowTrim: true,
                exporter: 'Phaser3',
                removeFileExtension: true,
                prependFolderName: false,
            }
        )
    );
}

E para cada uma das imagens de tilesets vou processá-las pelo plugin de extrude:

for (const tilesetFile of tilesetImageFiles) {
    await extrudeTilesetToImage(
        tileWidth,
        tileHeight,
        `${TILESETS_PATH}/${tilesetFile}`,
        `${DIST_PATH}/assets/tilesets/${tilesetFile}`,
        {
            margin: 0,
            spacing: 0,
        }
    );
}

E a última coisa que fiz foi pegar os arquivos das fases criadas no Tiled e envia-las para o frontend usando o plugin webpack.DefinePlugin para que seja possível carregar as fases dinamicamente:

const STAGES = JSON.stringify(
    stageFiles
        .filter((stage) => stage.split('.')[1] === 'json')
        .map((stage) => stage.split('.')[0])
);

return {
    ...,
    plugins: [
        new webpack.DefinePlugin({
            CANVAS_RENDERER: JSON.stringify(true),
            WEBGL_RENDERER: JSON.stringify(true),
            IS_DEV: JSON.stringify(true),
            VERSION: JSON.stringify(packageJson.version),
            STAGES,
        }),
    ],
    ...,
};

E agora toda vez que eu faço o build do jogo eu consigo carregar fases dinamicamente com a constante STAGES e todos os meus sprites e tilesets estão prontos para serem usados.

É isso que eu tenho para vocês hoje pessoal, espero que tenham gostado desse formato de vídeo e post no blog, até a próxima.

pablo.gg

Posts relacionados

Publicar um comentário

Comentários