画像のマスク処理

今まで同じ形で違う柄の素材が欲しい場合、それぞれの柄の画像を用意していました。
でもマスク処理を使えばすべての柄の画像を用意する必要がないことが分かりました。
Cocos2d-xでの画像のマスク処理の方法は下記の通りです。

---

Cocos2d-xのマスク処理

---

Cocos2d-xでマスク処理を実装する場合、「CCClippingNode」クラスを使用します。
実装方法は下記の通りです。

bool HelloWorld::init()
{
〜〜 省略 〜〜
  // うさぎさん
  CCSprite* rabbit1 = CCSprite::create("rabbit.png");
  rabbit1->setPosition(ccp(100.0f, 100.0f));

  // マスクする画像(唐草模様)
  CCSprite* texture1 = CCSprite::create("texture1.png");
  texture1->setPosition(ccp(100.0f, 100.0f));

  //マスクをかける。
  CCClippingNode *clipNode1 = CCClippingNode::create(rabbit1);
  clipNode1->setAlphaThreshold(0.0f);
  clipNode1->addChild(texture1);
  this->addChild(clipNode1);

  // うさぎさん
  CCSprite* rabbit2 = CCSprite::create("rabbit.png");
  rabbit2->setPosition(ccp(200.0f, 100.0f));

  // マスクする画像(レンガ模様)
  CCSprite* texture2 = CCSprite::create("texture2.png");
  texture2->setPosition(ccp(200.0f, 100.0f));

  // マスクをかける。
  CCClippingNode *clipNode2 = CCClippingNode::create(rabbit2);
  clipNode2->setAlphaThreshold(0.0f);
  clipNode2->addChild(texture2);
  this->addChild(clipNode2);
〜〜 省略 〜〜
}

これを実行すると下記のようにおなじうさぎさんの画像が違った模様で表示されます。

これは覚えておくと便利そうです。

Cocos2d‐x開発のレシピ―iOS/Android対応