"Beveled" Shapes with cocos2d

I would like to draw 2d shapes like this in an iPhone app:

alt text http://www.shaggyfrog.com/junk/beveled-circle.jpg

I asked a similar question here to see if I could do it easily with Quartz, but didn't get a solution. So I got to thinking that I might be able to leverage an exsiting 2d library out there, and then I thought of cocos2d.

The goal is to draw these kinds of beveled shapes dynamically, i.e., using arbitrary colours, and possi开发者_运维技巧bly with the highlight/bevel drawn at an arbitrary position.

Is this possible with cocos2d?

As far as my knowledge of cocos2d goes, cocos2d will not enable you to do this in any other way than OpenGL would allow you to do. Cocos2d uses OpenGL under the hood. Cocos2d comes with no built-in set for creating such graphics.

Since the bevel is used to create a 3D effect, perhaps you shouldn't be looking at simulating it with 2D drawing, but instead use a 3D drawing library? OpenGL would certainly be capable of drawing such shapes. Cocos2d focuses on 2D drawing instead of 3D.

I'm not sure if Cocos2D would allow for a custom object to draw 3D using the underlying OpenGL mechanism. I have never tried.

Wouldn't it instead be easier to create the image in photoshop and adjust colors dynamicly? I'm not sure what you are trying to do.
You could also create a mask shape with a transparent "bevel effect" and scale that along with the image you need to have shine?

Aside from the bevel effect, if you want to "colorize" each semi-circle, you can use [sprite setColor:] or sprite.color = ccc3(r,g,b)

CCSprite *sprite = [CCSprite spriteWithSpriteSheet:sheet rect:CGRectMake(32 * idx,0,128,32)];
[sprite setColor:ccc3(CCRANDOM_0_1()*255,CCRANDOM_0_1()*255,CCRANDOM_0_1()*255)];

You would design a "white semicircle" with beveled (gray) edges. Then you can make sprites and color each separately.