Progress bar during Config load

Phaser 3
1

I’m using a Palette Swapping Example. In the Create section of my game it calls the function. It takes about 20 seconds to complete and then my game shows up a begins. I’m struggling to find a way to add a progress bar inside the function. Below is the code of that function:

/**
 * Creates new sprite sheets and animations from the given palette and spritesheet.
 *
 * @param {object} config - Config schema.
 */
function createPalettes (config)
{
    // Create color lookup from palette image.
    var colorLookup = {};
    var x, y;
    var pixel, palette;

    var paletteWidth = game.textures.get(config.paletteKey).getSourceImage().width;

    // Go through each pixel in the palette image and add it to the color lookup.
    for (y = 0; y < config.paletteNames.length; y++) {
        palette = config.paletteNames[y];
        colorLookup[palette] = [];

        for (x = 0; x < paletteWidth; x++) {
            pixel = game.textures.getPixel(x, y, config.paletteKey);
            colorLookup[palette].push(pixel);
        }
    }

    // Create sheets and animations from base sheet.
    var sheet = game.textures.get(config.spriteSheet.key).getSourceImage();
    var atlasKey, anim, animKey;
    var canvasTexture, canvas, context, imageData, pixelArray;


    	

    // Iterate over each palette.
    for (y = 0; y < config.paletteNames.length; y++) {
        palette = config.paletteNames[y];
        atlasKey = config.spriteSheet.key + '-' + palette;

        // Create a canvas to draw new image data onto.
        canvasTexture = game.textures.createCanvas(config.spriteSheet.key + '-temp', sheet.width, sheet.height);
        canvas = canvasTexture.getSourceImage();
        context = canvas.getContext('2d');

        // Copy the sheet.
        context.drawImage(sheet, 0, 0);

        // Get image data from the new sheet.
        imageData = context.getImageData(0, 0, sheet.width, sheet.height);
        pixelArray = imageData.data;

        // Iterate through every pixel in the image.
        for (var p = 0; p < pixelArray.length / 4; p++) {
            var index = 4 * p;

            var r = pixelArray[index];
            var g = pixelArray[++index];
            var b = pixelArray[++index];
            var alpha = pixelArray[++index];

            // If this is a transparent pixel, ignore, move on.
            if (alpha === 0) {
                continue;
            }

            // Iterate through the colors in the palette.
            for (var c = 0; c < paletteWidth; c++) {
                var oldColor = colorLookup[config.paletteNames[0]][c];
                var newColor = colorLookup[palette][c];

                // If the color matches, replace the color.
                if (r === oldColor.r && g === oldColor.g && b === oldColor.b && alpha === 255) {
                    pixelArray[--index] = newColor.b;
                    pixelArray[--index] = newColor.g;
                    pixelArray[--index] = newColor.r;
                }
            }
        }

        // Put our modified pixel data back into the context.
        context.putImageData(imageData, 0, 0);

        // Add the canvas as a sprite sheet to the game.
        game.textures.addSpriteSheet(atlasKey, canvasTexture.getSourceImage(), {
            frameWidth: config.spriteSheet.frameWidth,
            frameHeight: config.spriteSheet.frameHeight,
        });

        // Iterate over each animation.
        for (var a = 0; a < config.animations.length; a++) {
            anim = config.animations[a];
            animKey = atlasKey + '-' + anim.key;

            // Add the animation to the game.
            game.anims.create({
                key: animKey,
                frames: game.anims.generateFrameNumbers(atlasKey, {start: anim.startFrame, end: anim.endFrame}),
                frameRate: anim.frameRate,
                repeat: anim.repeat === undefined ? -1 : anim.repeat
            });
        }

        // Destroy temp texture.
        game.textures.get(config.spriteSheet.key + '-temp').destroy();
    }

    // Destroy textures that are not longer needed.
    // NOTE: This doesn't remove the textures from TextureManager.list.
    //       However, it does destroy source image data.
    game.textures.get(config.spriteSheet.key).destroy();
    game.textures.get(config.paletteKey).destroy();


}
2

You have to split that function work into batches somehow.

3

Maybe another way to approach this is to load an image early like what you suggested in another post (Change the Black background loading screen to background image (Phaser) - #2 by samme). I tried this and it seems to work but the image is a neon green box with diagonal line - which represents image not properly loaded in Phaser. I redacted the url below but I did test my url in a new browser tab that it works.

var sceneConfig = {
    preload: preload,
    create: create,
    update: update,
    pack: {
        files: [
            { type: 'image', key: 'sonic', url: '/images/energybar.png' }
        ]
    }
};

var config = {
	
    type: Phaser.AUTO,
        //backgroundColor: 0x003500,
    parent: 'phaser-game',
    scene: {
	sceneConfig,    
        preload: preload,
        create: create,
        update: update
    },
    dom: {
        createContainer: true
    },    
  scale: {
    mode: Phaser.Scale.NONE,
    autoCenter: Phaser.Scale.CENTER_BOTH
  },    
    width: 1200,  
    height: 600
	    
};

In my preload I added this line:

const img = this.add.image(200, 200, 'sonic');
4

I got the scene files payload to work. The “pack:{files[]}” part has to be passed into a constructor.

5

Unfortunately, I now can’t find a way to destroy the image or turn its viability off after I’m finished with it.

6

I figured it out. I restart scenes in my game so the image kept loading. I added a condition to only add the image if the count is <1.