[Resolved]LayerGradient With Multiple Gradients

[Resolved]LayerGradient With Multiple Gradients
0.0 0


I’m trying to draw multiple gradients using Cocos2d-HTML and I’m having a really difficult time doing so. The effect that I’d like to accomplish can be seen in the image that I’ve attached. All that I’ve been able to accomplish is having two colors in the gradient though.

Thanks in advanced for any light that can be shed on this issue!

test.jpg (8.3 KB)


I think you should create an subclass from cc.LayerGradient, and override the “draw” function, but this class only works on canvas mode.

You can see the details of cc.LayerGradient’s “draw” implement.

Best regards


David, thanks for your advice. I did exactly that, and ended up having to override a large number of functions but finally was able to accomplish this on both canvas and WebGL. With canvas it was easy just adding additional color stops, with WebGL it was a whole other ball game.

For WebGL I had to create an additional array of bot vertices and colors and make the original arrays (from cc.LayerColor) stretch only half of the screen then draw the second arrays on the second half of the screen. I had to override most every function in both cc.LayerGradient and in cc.LayerColor, but I finally got it to work.

If anyone is interested in seeing the code I did for this let me know, but for now I won’t post it as it’s quite long and I’m not sure if it’s applicability to others at this point.


Oh, that’s great, Trey.

Could you please commit your codes to our github: https://github.com/cocos2d/cocos2d-html5?

I think somebody need this class.

Thanks a lot.