I am an iOS developer but I'm new to cocos2d. I'm working on new game, I use Kobold2D, have cocos2d installed too, and I want to make this effect:

enter image description here

I know how is done with Flash, but can't make it with Kobold2D. There's 2 images with the same size: one is a low-res image for the background and the second is a hi-res over the first one. When the "reticle" mask moves, it reveals the second image inside the circle and the background is visible outside only. I googled with no success, saw some Ray Wenderlich projects they weren't helpful.

  • \$\begingroup\$ Please see this tutorial. \$\endgroup\$
    – rraallvv
    Jan 17, 2013 at 4:02

1 Answer 1

  1. First draw the mask sprite, with the src color (the mask) set to GL_ONE and the destination color (an empty buffer) to GL_ZERO.

  2. Draw the sprite, with the src color set to GL_DST_ALPHA.

  3. Call the CCRenderTexture (renders the masked sprite)

  4. Open up HelloWorldLayer.m and add the following method right above init:

- (CCSprite *)maskedSpriteWithSprite:(CCSprite *)textureSprite maskSprite:(CCSprite *)maskSprite { 
    // 1
    CCRenderTexture * rt = [CCRenderTexture renderTextureWithWidth:maskSprite.contentSizeInPixels.width height:maskSprite.contentSizeInPixels.height];
    // 2
    maskSprite.position = ccp(maskSprite.contentSize.width/2, maskSprite.contentSize.height/2);
    textureSprite.position = ccp(textureSprite.contentSize.width/2, textureSprite.contentSize.height/2);
    // 3
    [maskSprite setBlendFunc:(ccBlendFunc){GL_ONE, GL_ZERO}];
    [textureSprite setBlendFunc:(ccBlendFunc){GL_DST_ALPHA, GL_ZERO}];
    // 4
    [rt begin];
    [maskSprite visit];        
    [textureSprite visit];    
    [rt end];
    // 5
    CCSprite *retval = [CCSprite spriteWithTexture:rt.sprite.texture];
    retval.flipY = YES;
    return retval;
  1. Replace the area between BEGINTEMP and ENDTEMP with the following:
CCSprite * mask = [CCSprite spriteWithFile:@"SpriteToUse.png"];        
CCSprite * maskedCal = [self maskedSpriteWithSprite:cal maskSprite:mask];
maskedCal.position = ccp(winSize.width/2, winSize.height/2);
[self addChild:maskedCal];

I found these instructions from here: How to Mask a Sprite with Cocos2D


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .