Best way of coloring greyscale sprites?

Hi, I have a greyscale sprite and I want to colorize it with a new palette. One of the whings I want to do is keep black and white and only change the rest of grey scale. This is what Im trying to achieve: https://gamedev.stackexchange.com/questions/61393/colouring-greyscale-images-sprites-for-html-canvas

Do you know how can I access the colors of the sprite in Creator? And how can I change them?
I dont want to paint the sprite, but change some colors.

I have already checked the API but couldnt find a clue on how to proceed. Any help/tips would be greatly appreciated.

Thanks!

Edit: @slackmoehrle can you please ask the team if they know any tips/best practices to do it?

You can do it through the custom shader, but I am not sure how to use it with Creator.
For C++ version you can check the test example.

1 Like


Here you can get good example for shader in JS

1 Like

Yeah, I thought about shaders but not sure how can I use shaders with Creator. I believe I cant right now. Thats why Im thinking of updating the colors.

Ok. I will check it later. Thanks!

Yes you can use shader in creator. Example shows you how.

Let me know if the shader doesn’t do what you need. I can then ask a team member to take a look at this thread.

I have tried with shaders, but Im not experienced enough with them and couldnt find how to choose and swap the colors. I found out how to colorize the sprite with a shader, but this is not what I need. Is there an easiest way to do it? Adding shaders to Creator is not an easy task… I don’t fully understand how it works and I haven’t been able to find a Creator tutorial so far. Any help would be very much appreciated.

Thanks,

OK, no problem. Let me ask out engineering team to review this thread.

Hi, @jrosich

The problem is that converting from rgb color to greyscale is a lossy operation, original palette will be lost in greyscale sprite, because multiple rgb color could be translated to the same grey color (255 * 255 * 255 -> 255).

For changing sprite to greyscale or restoring it, you actually can use setState API because we are transforming rgb to greyscale in shader, so original texture is not modified.

spriteComponent.setState(cc.Sprite.State.GRAY);
spriteComponent.setState(cc.Sprite.State.NORMAL);

However, if I understand well your need, you want different palette, so might even want to colorize the underwear to blue for example.

This is even harder than restore, basically it means the algorithm have to recognize object or regions in a sprite.

Personally I haven’t tried anything like what you requested, but I will try to explain what I think is possible.

  1. The easiest way, life saver: Just use different colorized textures
  2. Using shader is still the best programmatic way to achieve it, you will need an original texture and a region map texture as shader uniform. You also need to transfer uniforms indicate the color palette for different region. Then in the shader, you can read from the region map for the index of palette, and you can retrieve the target color of this pixel from the palette[index]. You will use a certain transform algorithm to alter the greyscale color to be close to the target color (a ranged mapping for example).

Very sorry that we haven’t expose the shader usage in Cocos Creator, the previous post did explain a hidden way to change shader program of a Sprite but you will need some extra effort to transmit the second texture into shader program. It’s doable, but inconvenient. If you want more information, I can tried to explain more when I got time. I strongly suggest you to use the first solution to move on with your game design. Stick on the programmatic way could spent you much time.

Currently I’m working on a new renderer in Cocos Creator which include a well structured material system, we will have beta version in approximately one month, after that, we will open material system API probably in Cocos Creator v1.9

Hi, thank you for the detailed explanation. I will do it in a different way for now: I will create my sprites as a group of layers so I can colorize them. It is an extra work, but it would be easy to work with them. And I’m looking forward to see the material system!. Thanks!

1 Like

Do we have any simple way to show color sprite in grayscale mode now?

As such way does not work for me:

For changing sprite to greyscale or restoring it, you actually can use setState API because we are transforming rgb to greyscale in shader, so original texture is not modified.

spriteComponent.setState(cc.Sprite.State.GRAY);
spriteComponent.setState(cc.Sprite.State.NORMAL);