Problems altering the saturation of a texture-atlas

Phaser 3
1

Hi everybody,

our game shall start in grayscale and progress to be ever more colorful. For this purpose, I am trying to set the saturation of my texture-atlas(es). I found this example for reference: Phaser - Examples - Edit Texture Hue Shift .

Now, converting my atlas texture to a CanvasTexture and altering saturation works fine. But I have issues bringing the resulting texture back to the atlas and/or apply it to all the images in the game.

Here’s my code so far:

/**
 *
 *
 * @method PhaserGame.Level#setLevelSaturation
 * @memberof PhaserGame.Level
 * @param {number} saturation
 * @private
 */
PhaserGame.Level.prototype.setLevelSaturation = function (saturation) {

    var levelTexture = this.scene.textures.get('levelAtlas').getSourceImage();
    var canvasTexture = this.scene.textures.createCanvas('levelAtlasCanvas', levelTexture.width, levelTexture.height);
    canvasTexture.draw(0, 0, levelTexture);

    var context = canvasTexture.getSourceImage().getContext("2d");
    var pixels = context.getImageData(0, 0, levelTexture.width, levelTexture.height);

    for (var i = 0; i < pixels.data.length / 4; i++)
        this.applySaturationToPixels(pixels.data, i * 4, saturation);

    context.putImageData(pixels, 0, 0);
    canvasTexture.refresh();

    // this does nothing
    levelTexture.setDataSource(canvasTexture.getSourceImage()); 

    // this results in the atlas to be broken: "texture frame missing: ***.png"
    this.levelElements.forEach(element => { element.setTexture(canvas.getSourceImage()); }); 
};
/**
 *
 *
 * @method PhaserGame.Level#applySaturationToPixels
 * @memberof PhaserGame.Level
 * @param {object} pixels
 * @param {number} index
 * @param {number} saturation
 * @private
 */
PhaserGame.Level.prototype.applySaturationToPixels = function (pixels, index, saturation) {

    var r = pixels[index];
    var g = pixels[index + 1];
    var b = pixels[index + 2];

    var hsv = Phaser.Display.Color.RGBToHSV(r, g, b);
    var rgb = Phaser.Display.Color.HSVToRGB(hsv.h, saturation, hsv.v);

    pixels[index] = rgb.r;
    pixels[index + 1] = rgb.g;
    pixels[index + 2] = rgb.b;
};

Any ideas? I’m also very open for other ways of accomplishing this.

2

I would try a shader for this. I’m sure one exists.

3

Thank you!! I wasn’t even aware there are shaders in Phaser. I’ll have a look!