Replace colour in the image

Replace colour in the image
0.0 0


I’ve been digging but what I found is either in c++ with setPixel and getPixel plus ccImage or works with canvas.

I’m using JSB and the target is both Android and iOS so both solution above won’t work for me.

For start I have a huge sprite sheet in PNG format and a (2048pixel*2048pixel) png
And the total colour is only 8 rgb colour with transparency.
I want to let user customise the character by selecting the replacing rgb colour (e.g. black to white or blue to red)
I can prepare my png in Photoshop with alternate colour that 64 times of the texture in actual data size.

If anyone has good solution, please help.



You could split your image into multiple images, with the areas that are to be coloured being their own separate images. Colour them white for the image file and then just use setColor() to change the colour for the sprite that belongs to what is being coloured.

You could also use shaders by colouring the parts you want to be able to change to a specific colour and then having the shader look for that colour and change it to another when it finds it. (I don’t know how use shaders with JavaScript, so I wouldn’t be much help with this.)

If you really needed to use getPixel and setPixel, you could also investigate creating bindings. Create a class with the C++ code you found and then create a binding to be able to call it from JS. Might even be more efficient than doing it in JS.


Hi, unfortunately the solution you suggest won’t work as that huge png is only for a single character (probably 200 frames of animations in 8 Bit colours)
I’m trying to offer player to customise their own colour and doing it in code is the best solution.

I guess probably has to go down the manual jsb path but I always trying to avoid customise cocos2d native code as it will caught you badly when you update the cocos2d version very often.


You don’t need to modify cocos code to create bindings. You can create your own bindings file and just include it in AppDelegate.cpp. Not sure about bindings for cocos nodes in your own binding file, if that’s what you want to do, but you can at least add bindings for a static function or a custom class that could then handle the C++ code.


Yes, that is nice trick to include new file in AppDelegate.cpp. Thanks.
I normally modify the original class itself, in this example I will mostly add extra function to ccTexture and pass the alternate colour arrays I want to match and update.
But as end result like I said before it will bite me if I update cocos2d version often.