Megaman’s Costumes: the failed Shader approach
In all Megaman games when you equip another power, Megman changes his color.
The “clothing” of the character graphic in Megaman 2 always has exactly two colors swapped. I could create all these graphics by hand but that would be a waste of time. I thought switching the color value in a shader would be nifty, so I started hacking away on a branch and set up Megaman’s material with a fragment shader that replaces two colors.
Well. That does not look good. There is still some blue there. Zooming out a bit makes it worse.
What I failed to predict with this method is that the shader operates on the pixels after the material has been placed in 3d space. That means the picture I get into the shader has been distorted already and some colors have been interpolated.
In order for an image to look good when you shrink it down, resize algorithms has to either throw away pixels (which looks terrible) or invent new intermediate colors. In the illustration above I have resized the leftmost original to 50% and a plethora of colors that didn’t exist in the original image has been inserted. Since my shader only replaces an exact color, it ignores all those inbetween pixels. I scrapped the shader approach. Clearly not the right method for this.
I decided to still use the color replace idea, but to operate on the original graphic using canvas.
After the initial texture load, I clone it and create 9 additional textures with colors swapped. That means that all UV maps used to animate the character can be reused. I store these textures on an object with the weapon code as key. In the Megaman class I overload the equipWeapon() method and if the weapon.code exists as key in the texture object I set that texture to the current and update the material.
Ah, a perfect result.
