Colbydude 3 Posted March 22, 2018 Report 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. Quote Link to post Share on other sites
rich 2612 Posted March 22, 2018 Report 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 Quote Link to post Share on other sites
Colbydude 3 Posted March 22, 2018 Author Report 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. Quote Link to post Share on other sites
Colbydude 3 Posted March 23, 2018 Author Report 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. Quote Link to post Share on other sites
rich 2612 Posted March 23, 2018 Report 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? Quote Link to post Share on other sites
Colbydude 3 Posted March 23, 2018 Author Report 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... Quote Link to post Share on other sites
Colbydude 3 Posted March 24, 2018 Author Report 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. Sky Alpha 1 Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.