Colbydude Posted March 22, 2018 Share Posted March 22, 2018 Hey all, I'm looking to implement palette swapping into my project as detailed in this article: http://laxvikinggames.blogspot.com/2015/01/build-dynamic-texture-atlas-in-phaser.html The article goes about doing it by referencing palettes from a texture and using BitmapData to swap the colors and build a dynamic texture atlas that's stored in cache for use later. From the looks of it BitmapData has either been removed or renamed to something that's seemingly less obvious to me. Has anyone tried implementing palette swapping in Phaser 3 yet? What tools do I have available in Phaser 3 to go about achieving this? I'm a pretty new user to Phaser, so perhaps I'm missing something. Link to comment Share on other sites More sharing options...
rich Posted March 22, 2018 Share Posted March 22, 2018 A BitmapData was basically just a canvas object with some helper methods attached to it. It’s not in v3 because it’s easier to just create your own tbh. The Texture Manager has the ability to add canvas objects to it, along with texture data, which any Game Object can then use. You can update the source canvas at any point and everything using it will update too. Pretty sure there is an example showing this in the labs actually. If not, I can make one. Colbydude 1 Link to comment Share on other sites More sharing options...
Colbydude Posted March 22, 2018 Author Share Posted March 22, 2018 Ah, excellent. I figured it was just a matter of me not knowing what to look for. I'll see if I can get working implementation going later tonight and report back. The Create Canvas example should be enough to get me started. Link to comment Share on other sites More sharing options...
Colbydude Posted March 23, 2018 Author Share Posted March 23, 2018 So this is about as far as I got: https://github.com/Colbydude/phaser-3-palette-swapping-example/blob/master/public/js/palette-swap.js I was successfully able to generate the dynamic texture atlases and animations, but things started to get a little hairy when I actually tried to copy the image data over to the new canvas. The frame numbers and placement seemingly check out, but I get a bizarre result. This is the current result is attached. Suggestions on what I might be messing up, or the next steps from here? Improvements on the overall process are more than welcome as well. Link to comment Share on other sites More sharing options...
rich Posted March 23, 2018 Share Posted March 23, 2018 Was is it you're trying to do? Load one sprite sheet and, via code, re-color it several times? Then use it on a sprite? Link to comment Share on other sites More sharing options...
Colbydude Posted March 23, 2018 Author Share Posted March 23, 2018 59 minutes ago, rich said: Was is it you're trying to do? Load one sprite sheet and, via code, re-color it several times? Then use it on a sprite? Yup, precisely. In the case of my WIP example, the goal is to start with a single sprite sheet, 'link', then color it with 4 different palettes as specified in 'link-palette'. This would give us 4 spritesheets/atlases 'link-green', 'link-red', 'link-blue', and 'link-purple.' Then from those new sheets also create newly colored animations named 'link-green-walk-up', 'link-green-walk-down', 'link-green-walk-left', 'link-red-walk-down', etc... Link to comment Share on other sites More sharing options...
Colbydude Posted March 24, 2018 Author Share Posted March 24, 2018 I managed to figure it out and cleaned it up a bit! Full source is at https://github.com/Colbydude/phaser-3-palette-swapping-example and a demonstration is attached. Cheers for the point in the right direction, Rich. AlanFonderflick and Sky Alpha 2 Link to comment Share on other sites More sharing options...
Recommended Posts