How to implement circular clipper on an image in cocos2dx?

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;
}