How to implement circular clipper on an image in cocos2dx? - cocos2d-iphone

Question

target is to achieve -> a circular clipper on the profile pictures in cocos2dx, so the profile picture looks like as they look like in the whatsapp profile picture nowadays.
I want to set a clipper first on the profile picture, then scale it according to the requirement.

Answer 1

I've used RenderTexture for this purposes in cocos2d-x v2.x. believe this approach would also work with v3.x. here is pseudocode:
sprite* MaskedSpriteWithSprite(textureSpriteName, maskSpriteName)
{
sprite* textureSprite = create(textureSpriteName);
sprite* maskSprite = create(maskSpriteName);
textureSprite->setPosition(ccp(textureSprite.width * 0.5f, textureSprite.height * 0.5f));
maskSprite->setPosition(ccp(maskSprite.width * 0.5f, maskSprite.height * 0.5f));
renderTexture* rt = renderTexture::create(maskSprite.width, maskSprite.height);
ccBlendFunc bfMask = ccBlendFunc();
bfMask.src = GL_ONE;
bfMask.dst = GL_ZERO;
maskSprite->setBlendFunc(bfMask);
// turn off anti-aliasing around the mask sprite
maskSprite->getTexture()->setAliasTexParameters();
ccBlendFunc bfTexture = ccBlendFunc();
bfTexture.src = GL_DST_ALPHA;
bfTexture.dst = GL_ZERO;
textureSprite->setBlendFunc(bfTexture);
rt->begin();
maskSprite->visit();
textureSprite->visit();
rt->end();
// generate the resulting sprite
sprite* pOutcome = sprite::createWithTexture(rt->getSprite()->getTexture());
pOutcome->setFlipY(true);
return pOutcome;
}