cocos2dでレイヤーにクリッピングマスク(矩形)を作成する方法

clipping_mask

cocos2dでレイヤーにPhotoShopのようなクリッピングマスクを作成して、レイヤーを切り抜いた様に見せる方法のメモです。

cocos2dでレイヤーやスプライトを切り抜いた状態で表示させたいときの方法です。矩形型のクリッピングマスクは簡単に作成できるみたいです。以下のサイトを参考にしました。ありがとうございます。
参考サイト:
http://iphone-dev.g.hatena.ne.jp/saika_makoto/20110124/1295890758

スプライトの場合は、

CCSprite *sprite = [CCSprite spriteWithFile:(NSString *) rect:(CGRect)];

rectに矩形型の座標と大きさを設定してあげればできるみたいです。

レイヤーの場合は、クリッピングマスクを作成したいレイヤーの-(void)visitメソッドを以下の様にオーバーライドすればオーケーです。

- (void)visit {
    float x = 0;
    float y = 150;
    float width = 320;
    float height = 180;
 
    glEnable(GL_SCISSOR_TEST);
    if([[CCDirector sharedDirector] enableRetinaDisplay:YES]) {
        glScissor(2 * x, 2 * y, 2 * width, 2 * height);
    } else {
        glScissor(x, y, width, height);
    }
    [super visit];
    glDisable(GL_SCISSOR_TEST);
    
}

glScissorにはCGRectのようにクリッピングマスクの座標と大きさを設定してやります。あとレティナ対応の場合はそれぞれの値を倍する必要があります。


クリッピングマスク作成前。パーティクルが画面いっぱいに溢れてます。


クリッピングマスク作成後。中央枠内にレイヤーを収めることができました。

-(void)visitとはなんぞやですが、とりあえずはこれで出来るみたいです。GLはすごいですね。参考サイトの方に感謝です。