canvas only -> Sprite -> gray scale

canvas only -> Sprite -> gray scale
0.0 0


help code …

cocos2d-grayscale-shader-completed1.png (339.1 KB)


Hi, what exactly do you want to do?

Turn the whole canvas to grayscale? Or convert an image to grayscale?

For converting just an image, it appears it could be done if you create it as an cc.ImageTGA ( ) and then apply the cc.tgaRGBtogreyscale (defined in \cocos2d\tileMap_nodes\CCTGAlib.js) method to it. I’ve also thought about using cc.setColor(cc.c3b) with varying parameters, but there doesn’t seem to exist a combination of RGB modifiers that will always turn an image to grayscale (althought you can get some very funky combinations).

If what you want is to convert the whole canvas to grayscale, I’m not so sure it can be done that easily in a way that wouldn’t kill FPS, since you’d have to manually iterate thru every pixel on the canvas and turn it to grayscale (in which case, it would require some variation of this: ). But I might be wrong, so I’ll keep on researching if I get the time.

Edit: maybe we should post a feature request in the issue tracker for some sort of canvas shaders to be implemented? Or such a thing already exists?


@ZippoLag Thank you for your answer

how to Create cc.ImageTGA
convert Sprite


Looking at the docs and the source code of the engine, it seemed like this should work:

var image = cc.tgaLoad(pathToFile);

But instead it throws a bunch of errors…

I’m oficcially giving up and creating a feature request in the issue tracker for some sort of shader implementation, here:

So lets sit tight and wait for a response from the guys who know what they are doing.



var image = cc.tgaLoad(“HelloWorld.jpg”); <---- error
cc.FileUtils.getInstance().getFileData < ------ No method

My project black screen


Yes, I did say the method isn’t working. I’ve created a issue in the tracker to see if the higher devs can help with this. So just “watch” this thread and wait for a while. Or do you absolutely need the grayscaling right now?