Recolor sprites on the fly

take a look at this

68747470733a2f2f7261772e6769746875622e636f6d2f616c65783331342f626c6f625f66696c65732f6d61737465722f696d616765732f4343537072697465576974684875654578616d706c652e706e67

Yea, I saw that before, but I have a palette of 11 colors which I need to replace vs other 11 colors. Is it works with list of colors? Also, it’s not for cocos2d-x and I have no idea how to update it or fix… just to try.

I’m supportive of giving away code, and it’s great you’re working on SpriteBuilderX, but no one should expect any code.

I’ll assume you were just hoping someone knew of code that was already posted that does what you want. It appears there’s not anything that does that exactly.

Shaders are fundamental, though. You should really learn them.

Godspeed on this issue.

I just thought for someone familiar with shaders will be very easy to help me. Later I’ve found this tutorial and probably it can help some smart guys to help me :slight_smile: Hmm?

Like this? https://gist.github.com/KAMIKAZEUA/0e0d9f4fcb25cb2f8361a317c7ccd8c6
And how to use it…?

That looks like it should work. Just copy the default Sprite shader ‘ccPositionTextureColor_noMVP’ or look at the example I posted to figure out what the default position, texture, and color variables are named.
https://gist.github.com/stevetranby/95231e6122aaf97179b3 .

Don’t figure out copy from where?

Ehhm, but there are :

prog = GLProgram::createWithFilenames("res/" + kShaderKey + ".vert",
                                          "res/" + kShaderKey + ".frag");

But I don’t have like vert and frag, right?
And next question will be how to pass colorIn array of RGB colors? Also how to update it in real time for my Sprite? It’s like problem almost solved but you want that I’ve learned something :sunny: yes, I want! But can you please give some code snippet specially for that shader from gist? THank you in advance!>

Search the Cocos2d-x code base.

See my post above: http://discuss.cocos2d-x.org/t/recolor-sprites-on-the-fly/38713/4?u=stevetranby

Search cocos2d-x codebase for GLProgramState class and its ‘setUniformXXXXXX’ methods. You’ll find one that pertains to arrays.

You can’t just provide fully working example code snippet? like here - How to implement this Vignet shader for cocos2dx 3.15?

@Joseph39 :joy: ? It’s only you one who can really help!

When I decide to take the time to work on an exact version I will. I’ve been meaning to implement the “Option 2” for a while now so I’ll probably add it to the todo list and will probably work on it maybe 2-3 from now. Sorry, it’s on, but not near the top of my current task list (which is heavy pending iOS 11 launch) and while I’m taking way more time posting replies to this than I should I assumed at the beginning that my links would be enough, tbh

“almost” done because I’ve faced with problem of performance. Overall it works, but…

When I’ve applied shader to 1 sprite only it’s 60fps, but when I’ve tested like in real situation with just 20 sprites on the scene I’ve got ~10fps only on my device iPod Touch 5G. I’m testing my games on this old device and it should works 60fps ideally on it. Otherwise, it’s not so fast to be used, because it will be slow on most android devices.

Can that shader be improved? Read from “Extension to the answer”. I’m using last shader.

Also, there are solution to “Modify the texture on the CPU”, but I don’t understand how I can modify at runtime all my sprites, without re-creating them. Probably sprite->getTexture()->updateWithData( can help? Any ideas? How can I modify already created Sprite object? Modify it texture to modify it colors? Maybe this logic is wrong and this can be done in some other way…?
For sure I’m using sprite sheets, so my Sprites created from one big sheet and probably the is a way to modify it and so changes will affect to all sprites created from it?
@zhangxm Minggo can you please advice anything?

You should confirm it’s batching and if not figure out how to use only a single uniform value (or send per-sprite data inside the 4 float setColor). Also, iTouch 5G is a very old and slow device. Any game release today can target a much higher-end device.

Or about what batching you asking?

Any examples?

@anon98020523 may be you can use SpriteBatchNode to make sure all sprites are batched.

@zhangxm There is no need to use SpriteBatchNode in cocos2d-x version 3+, it’s auto-batched. So they are too in my game and so there is no anything can be improved this way.
I just added 25 sprites on the simple scene and got 10fps.
Simple static scene:

1134

So I’'m looking for a some other solution. Maybe improve shader(this is looks like most ideal way) or re-color texture for loaded Sprite’s. I don’t know if it possible?

auto batching can work with some limitations. The sprites should be drawn one by one, can not insert other Nodes between them, or it may break the batching.

Finally, using a shader to find and re-color pixels gives me some problems on different devices.
I’m looking for some other solution. What I’m thinking… I can create a grayscale image and so can I somehow colorize it to exactly fit my target image?

For example, I have this image:
in_ -> colorized to: out1 2

in_ -> and also to: out3

It’s very important for me to get same RGB values for every triangle.
Is there way to implement this? @Joseph39 @stevetranby @zhangxm :roll_eyes:

I think you should to it with shader, because the picture has different color in different pixels.

Cool, but how?