cocos2dxのClippingNodeを使えば、クリッピングマスクのような効果ができます。この機能で、ユーザーアイコンを丸く表示させてみる。

##まず普通にアイコンを表示させる

auto avatar = Sprite::create("avatar.jpg");
// Spriteを作成
 
avatar->setPosition(visibleSize/2);
// 画面中央に配置
 
this->addChild(avatar);
 
これで、プレビューすると：

ClippingNodeを使ってアイコンを丸くする

ClippingNodeを作成

auto clipping = ClippingNode::create();

マスクの形を作る

背景が透明にした黒い円の画像mask.pngを用意した。

この画像のSpriteを作成する。

auto clippingShape = Sprite::create("mask.png");

アイコンをクリップする

この画像をマスクとして使うには、ClippingNodeのsetStencilメソードを使う：

clipping->setStencil(clippingShape);
clipping->setInverted(false);
clipping->setAlphaThreshold(0.0f);

これで、clippingにaddChildされたSpriteはすべてmask.pngの形にクリップされる。（黒い部分と重なってる部分だけ表示される）

clipping->addChild(avatar);
this->addChild(clipping);

プレビューすると：

できた！

##感想

この記事でマスクの形は画像を使っているが、これは円とういう形がちょっと特殊で、cocos2dxのDrawNodeで描画するのがめんどくさいからのだ。もしポリゴンなどみたいな簡単な形だと、DrawNodeで形を作成してマスクとして使ったほうが便利かもしれない。