2014年4月17日木曜日

[cocos2d-x] CCClippingNodeで画像をくり抜く

どうも、俺@もう帰るで。

今日はcocos2d-xのCCClippingNodeを使うめもめも。
※cocos2d-xはv2.1.5

先日、「スライディングフロッグ」というゲームアプリをリリースしました。
iOSはコチラ
Androidはコチラ


このゲームの結果画面で、メダルが穫れたときにメダルをキラリっと処理しているのですが、
そこでCCClippingNodeを使っています。



では、どう使うのか、サンプルコードを記していきます。

まず前処理として、iOS側ではAppController.mmの
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions NS_AVAILABLE_IOS(3_0);
メソッドを変更する必要があります。

EAGLViewインスタンスを生成する箇所を、
    EAGLView *__glView = [EAGLView viewWithFrame: [window bounds]
                                     pixelFormat: kEAGLColorFormatRGBA8
                                     depthFormat: GL_DEPTH24_STENCIL8_OES
                              preserveBackbuffer: NO
                                      sharegroup: nil
                                   multiSampling: NO
                                 numberOfSamples:0 ];
と変更します。

次に、結果画面を表示するシーン(ResultScene.cppとする)の処理です。
1)メダルSpriteを置く
CCSprite *medalSprite = CCSprite::create("medal.png");
// 適当なpositionに
medalSprite->setPosition(ccp(100, 100));
this->addChild(medalSprite);

2)光らせるSpriteを用意する
CCSprite *content = CCSprite::create("effect.png");
// 左から右へ動かすので、メダルの左側へ
content->setPosition(ccp(medalSprite->getPositionX()-medalSprite->getContentSize().width,
                         medalSprite->getPositionY()));

3)マスクする画像(メダル)を用意する
// 上記のmedalSpriteとは別に用意する
CCSprite *stencil = CCSprite::create("medal.png");
// メダルSpriteと同じpositionに
stencil->setPosition(medalSprite->getPosition());

4)CCClippingNode生成する
CCClippingNode *clippingNode = CCClippingNode::create();
clippingNode->setStencil(stencil);
// 小さい値にする
clippingNode->setAlphaThreshold(0.01f);
// 光らせるSprite
clippingNode->addChild(content);
// アンカーポイントをセットしておく
clippingNode->setAnchorPoint(ccp(0,0));
// 画面の左下へsetPosition()する
clippingNode->setPosition(ccp(0,0));
// 念のため、CCClippingNodeのサイズを画面全体に..不要?
clippingNode->setContentSize(CCSize(CCDirector::sharedDirector()->getWinSize().width,
                                    CCDirector::sharedDirector()->getWinSize().height));
this->addChild(clippingNode);

5)光らせるSpriteを左から右へ動かす
content->runAction(CCMoveBy::create(0.5f,
                                    ccp(medalSprite->getContentSize().width, 0)));

これで出来るはず(!?)です。

ちなみにAndroidの場合は、Cocos2dxActivity.javaを編集します。
    public Cocos2dxGLSurfaceView onCreateView() {
//      return new Cocos2dxGLSurfaceView(this);
        Cocos2dxGLSurfaceView glSurfaceView = new Cocos2dxGLSurfaceView(this);
        glSurfaceView.setEGLConfigChooser(5, 6, 5, 0, 16, 8); 
        return glSurfaceView;
    } 


以上でぇぇぇぇぇす。

0 件のコメント: