Colbydude

[SOLVED] Phaser 3 Palette Swapping?

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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. :)

Share this post


Link to post
Share on other sites

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.

 

Mar-22-2018 20-58-27.gif

Share this post


Link to post
Share on other sites
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...

Share this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.