Recolor sprites on the fly

cocos2d-x C++
#21

“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?

#22

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.

#23

Or about what batching you asking?

Any examples?

#24

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

#25

@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?

#26

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.

#27

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:

#28

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

#29

Cool, but how?