There is an English versionhereLet me stay here

cocos2d-xでクリッピングマスク

cocos2d-xC++発表 : 更新日 :

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");

アイコンをクリップする

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

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

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

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

プレビューすると:

できた!

感想

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

この記事をシェアする

このエントリーをはてなブックマークに追加