Problems with Sprite Atlas and hue / colour replacement

Phaser 3
1

Good evening to you all. I’ve also posted this on the Phaser Discord so I hope you don’t mind me putting a post up here too for additional exposure.

I’m new to Phaser and have recently been playing around with a proof of concept. I’ve created a replica of the popular game “Among Us” lobby. This has been going fairly well, but I’ve ran into a blocker due to the Among Us assets / sprites. So the official assets for the crewmember are only in 1 colour (RGB). Instead of spending time using some graphics tools to recolour and map a huge sprite atlas, I was hoping to use Hue shift or palette replacement (https://phaser.io/examples/v3/view/textures/edit-texture-hue-shift or https://github.com/Colbydude/phaser-3-palette-swapping-example).

I’ve got a fair way and have been able to replace the colours from my sprite atlas to those I need, but for the life of me I cannot work out how to access the “new” sprite atlas with the new colours for things like animations and such. I don’t think I’m explaining this very well, so please see the codepen I’m currently working on to try and finalise this proof of concept: https://codepen.io/IDemixI/pen/bGwVNRB?editors=0010 - I apologise that it’s a bit of a mess but I’ve been trying a bunch of different methods with no joy as of yet.

I’m certain what I need is possible, and that it’s something fairly simple I’m missing, so I would really appreciate the help.

Kind regards
Ryan

2

As discussed :slight_smile: you can add a third atlas texture combining a canvas copy and the original atlas metadata.

this.textures.addAtlas('new', canvasTexture.getSourceImage(), this.cache.json.get('original'));

Also, I did not try but you can add frames to the canvas texture directly, copying the values from the original frames:

for (var name of originalTexture.getFrameNames(false)) {
  var frame = originalTexture.get(name);

  canvasTexture.add(name, frame.sourceIndex, frame.x, frame.y, frame.width, frame.height);
}
1 Like
3

Thanks again for the assistance, samme!
This did indeed do the trick.

In case anyone else runs into this in the future I think I’m going to tidy up the codepen I linked and comment the code with the solution.

Thanks again
Ryan