pablo.gg
🎮
coding

Improving sprite sheets generation for Phaser JS game with Webpack 4 - Skate Platformer Game Devlog #02

Written in September 9, 2020 - 🕒 2 min. read

Hey guys, second post in less than a week, unbelievable.

In the gameplay, we don’t have a lot of news since the last video, just some changes in the game build, which I would like to share here with you.

First I have to get all the tileset files, sprites, and the stage files made in 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);

In the sprites folder there is an image for each frame of the animation:

Idle animation
Idle animation

Now I pass the path from that folder to the WebpackFreeTexPacker plugin with some default settings:

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,
            }
        )
    );
}

And for each of the tilesets images I will process them using the extrude plugin:

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

And the last thing I did was to take the stage files created in Tiled and pass them to the frontend using the webpack.DefinePlugin plugin so that it is possible to load the stages dynamically:

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,
        }),
    ],
    ...,
};

And now every time I build the game I can load stages dynamically with the constant STAGES and all my sprites and tilesets are ready to be used.

That’s what I have for you guys today, I hope you liked this video format and blog post, see you next time.

Tags:

Post a comment
Comments

No comments yet.