Mask sprite in circle with cocos2d 3

Question

Update of my question since I got further.

I am trying to mask a sprite with a circle, with the code below it seems to work.

    // Create the clipping node
    self.clippingNode = [CCClippingNode clippingNodeWithStencil:[CCSprite spriteWithImageNamed:@"Home Scene/top-circle-mask.png"]];

    self.clippingNode.alphaThreshold = 0;

    // Add the image
    [self.clippingNode addChild:self.maskedImage];

    // And add the clipping node to the tree
    [self addChild:self.clippingNode];

I also had to add this to my AppDelegate:

[cocos2dSetup setObject:@GL_DEPTH24_STENCIL8_OES forKey:CCSetupDepthFormat];

However, the "first frame" renders the image unmasked, so that looks kinda ugly, how could I fix that? I have made a small video displaying the problem. http://cl.ly/U3QF

I am going for this look:

Thanks

Answer 1

You can not directly set circle sprite with image in CCSprite. so you take view and add it into CCScene.

first of all you download AGMedallionView class and add in to your project.

After import that class in your scene

#import "AGMedallionView.h"

in init method of scene

-(id) init
{
    if( (self=[super init]) )
    {
        AGMedallionView *view1 = [[AGMedallionView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
        [view1 setImage:[UIImage imageNamed:@"[email protected]"]];
        view1.borderColor = [UIColor redColor];
        view1.borderWidth = 5.0;
        [[[CCDirector sharedDirector] view] addSubview:view1];
    }
}

display as below