Cocos2dx 3.0でクリッピングマスクの実現

ChainZ(クリエイター)
いろいろやってます。

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

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

1
2
3
4
5
6
7
8
9
auto avatar = Sprite::create("avatar.jpg");
// Spriteを作成

avatar->setPosition(visibleSize/2);
// 画面中央に配置

this->addChild(avatar);

これで、プレビューすると:

avatar

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

ClippingNodeを作成

auto clipping = ClippingNode::create();

マスクの形を作る

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

マスク

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

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

アイコンをクリップする

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

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

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

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

プレビューすると:

final

できた!

感想

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