I’m working on a game similar to Super Mario War so I want to use the same graphics they have in that repo but all the graphics have this magenta/pink background color on them. For example:
I’m guessing there was some mechanism for the C++ game to strip out this color so I want to do the same thing.
How can I use an image, sprite, or bitmap and make sure that the pink background is stripped out of it, just leaving me with the image I want?
The best solution is probably to crop out the pink background manually in an image editor. There are free programs (such as Paint.NET) which can pretty easily select and delete all instances of a given color in an image.
If you have a build system which can be easily changed (Webpack, Grunt, likely Parcel), another option is to remove the magenta during the build with a Node package like JIMP. Personally, this is how I’d do it, but it might be hard for someone who isn’t familiar with the packages involved.
If you really want to strip out the color at runtime, the only solution I can think of is using a custom rendering pipeline with a fragment shader which detects and removes the color. If you used the pipeline on every game object, I don’t think performance would suffer, but this method works only on WebGL and would require you to learn the basics of GLSL even though it’s a pretty simple shader.
These are good points, thank you. I have Webpack setup in my project but I think configuring Webpack to strip the background might be overkill so I’ll likely figure out a script to run with ImageMagick, JIMP, or something else that will make this a speedy one-time deal for any affected images I want to use.