教程截圖：

　　有時(shí)候，你在做游戲時(shí)，可能需要一種方式來(lái)顯示精靈的某一部分（就是添加遮罩啦）。

　　一種方式就是使用另外一張圖片，叫做mask。你把mask圖片中間設(shè)置成白色，白色區(qū)域是被mask圖片的可見(jiàn)區(qū)域。之后這個(gè)白色區(qū)域會(huì)透明的。

　　然后，你可以使用本教程提供的方法來(lái)把mask圖和原圖結(jié)合起來(lái)，然后創(chuàng)建如上圖所示的效果。

　　你會(huì)發(fā)現(xiàn)本教程提供的方法非常方便，用它可以完成許多很有意思的效果。比如，把大頭貼，或者像框等等。所以這些內(nèi)容，你都可以從本教程中學(xué)到！

　　本教程會(huì)教你如何使用cocos2d 1.0來(lái)給一個(gè)sprite添加mask，使用一個(gè)非常強(qiáng)大的類CCRenderTexture，之前我們?cè)趯W(xué)TinyWings Like游戲的時(shí)候已經(jīng)見(jiàn)過(guò)啦：）

　　學(xué)習(xí)本教程的前提是你要熟悉cocos2d，如果你對(duì)cocos2d是何物還不清楚的話，建議你先學(xué)習(xí)本博客上面的其它c(diǎn)ocos2d教程。

Getting Started

　　啟動(dòng)Xcode，然后選擇File\New\New Project，接著選iOS\cocos2d\cocos2d，再點(diǎn)擊Next。把工程命名為MaskedCal，點(diǎn)擊Next，然后選擇一個(gè)文件夾來(lái)保存，最后點(diǎn)Create。

　　接下來(lái)，請(qǐng)下載本工程所需要的資源文件并把它們拖到你的Xcode的Resource分組中，確保“Copy items into destination group’s folder (if needed)” 并復(fù)選中，然后點(diǎn)Finish。

　　在開(kāi)始編碼之前，讓我們先來(lái)一點(diǎn)爵士音樂(lè)。打開(kāi)AppDelegate.m，然后做如下修改：

// Add to top of file
#import "SimpleAudioEngine.h"
 
// At end of applicationDidFinishLaunching, replace last line with the following 2 lines:
[[SimpleAudioEngine sharedEngine] playBackgroundMusic:@"TeaRoots.mp3" loop:YES];
[[CCDirector sharedDirector] runWithScene: [HelloWorldLayer sceneWithLastCalendar:0]];

　　這里播放一個(gè)由Kevin MacLeod制作的一首非常好聽(tīng)的曲子，然后調(diào)用了一個(gè)新的方法來(lái)加載場(chǎng)景。

　　接下來(lái)，打開(kāi)HelloWorldLayer.h 并作下面修改：

// Add new instance variable
int calendarNum;
 
// Replace the +(CCScene*) scene declaration at the bottom with the following:
+ (CCScene *) sceneWithLastCalendar:(int)lastCalendar;
- (id)initWithLastCalendar:(int)lastCalendar;

　　在這個(gè)場(chǎng)景中，我們將隨機(jī)顯示一張日歷圖片（從三張里面選擇）。在這個(gè)類里，我們保存了當(dāng)前顯示的日歷圖片的序號(hào)，然后修改了初始化方法為　initWithLastCalendar。它接收一個(gè)int型參數(shù)來(lái)標(biāo)識(shí)將要顯示的日歷圖片。后面，你會(huì)看到這個(gè)數(shù)字會(huì)隨機(jī)從1-3中選擇。

    然后，回到HelloWorldLayer.m，并且作如下修改：

// Replace +(CCScene *) scene with the following
+(CCScene *) sceneWithLastCalendar:(int)lastCalendar // new
{
    CCScene *scene = [CCScene node];
    HelloWorldLayer *layer = [[[HelloWorldLayer alloc] 
        initWithLastCalendar:lastCalendar] autorelease]; // new
    [scene addChild: layer];    
    return scene;
}
 
// Replace init with the following
-(id) initWithLastCalendar:(int)lastCalendar
{
    if( (self=[super init])) {
 
        CGSize winSize = [CCDirector sharedDirector].winSize;
 
        do {
            calendarNum = arc4random() %3+1;
        } while (calendarNum == lastCalendar);
 
        NSString * spriteName = [NSString 
            stringWithFormat:@"Calendar%d.png", calendarNum];
 
        CCSprite * cal = [CCSprite spriteWithFile:spriteName];
 
        // BEGINTEMP
        cal.position = ccp(winSize.width/2, winSize.height/2);        
        [self addChild:cal];
        // ENDTEMP
 
        self.isTouchEnabled = YES;
    }
    return self;
}
 
// Add new methods
- (void)registerWithTouchDispatcher {
    [[CCTouchDispatcher sharedDispatcher] addTargetedDelegate:self 
        priority:0 swallowsTouches:YES];
}
 
- (BOOL)ccTouchBegan:(UITouch *)touch withEvent:(UIEvent *)event {
    CCScene *scene = [HelloWorldLayer sceneWithLastCalendar:calendarNum];
    [[CCDirector sharedDirector] replaceScene:
        [CCTransitionJumpZoom transitionWithDuration:1.0 scene:scene]];
    return TRUE;
}

    這里只是一些基本的cocos2d代碼，用來(lái)在屏幕中間隨機(jī)顯示一張日歷圖片。它同時(shí)也包含了一些邏輯，當(dāng)你點(diǎn)擊屏幕的時(shí)候，可以比較平滑地切換到另一張圖片。　　

    編譯并運(yùn)行，現(xiàn)在你每次點(diǎn)擊屏幕就可以看到一些隨機(jī)的日歷圖片啦，它們?nèi)慷际怯晌?a style="color: #075db3; text-decoration: underline" target="_blank">可愛(ài)的妻子完成的：）

    現(xiàn)在，我們把程序框架搭好了，接下來(lái)，讓我們來(lái)實(shí)現(xiàn)遮罩效果吧！

遮罩和OpenGL 混合模式（Blend Mode）

    如果你在圖片編輯軟件里面打開(kāi)Art\CalendarMask.png圖片，它看起來(lái)是這樣子的：

    我們將使用這張圖片來(lái)給我們的日歷圖片添加一個(gè)邊框，是那種帶有波紋效果的邊框，而不是四邊形的。這張圖片透明的部分，就是遮罩效果的部分，而白色區(qū)域則是日歷圖片會(huì)顯示的區(qū)域。

    為了實(shí)現(xiàn)這個(gè)效果，我們將使用OpenGL的混合模式。

    如果你回過(guò)頭去看《如何使用CCRenderTexture來(lái)動(dòng)態(tài)創(chuàng)建紋理》這篇教程的話，我們?cè)谀抢镉懻撨^(guò)OpenGL的混合模式。我在那里提到過(guò)一個(gè)非常方便的在線工具可以用來(lái)可見(jiàn)化調(diào)節(jié)混合模式的效果。

    為了完成我們想要的效果，我們需要采取下面的策略：

1. 我們首先渲染mask精靈，把src color（就是mask精靈）設(shè)置為GL_ONE，并且把destination color（一個(gè)空的buffer）設(shè)置為GL_ZERO。所以，效果就是簡(jiǎn)單的把mask圖片顯示來(lái)。
2. 接下來(lái)，我們渲染日歷圖片精靈。把src color（日歷）設(shè)置為GL_DST_ALPHA。意思是，看看mask圖片的當(dāng)前alpha值是多少，如果是0（完全透明），那么就顯示mask的。如果是1（完全不透明），那么就顯示日歷圖片。（譯者注：如果大家對(duì)此不明白，可以參考這個(gè)鏈接）。然后把dst color（the mask）設(shè)計(jì)成GL_ZERO，這樣的話，之前渲染上去的mask就消失了。

    很酷吧！你可能會(huì)覺(jué)得我們只需要先把mask精靈渲染上去，然后再渲染日歷精靈，并且指定這兩個(gè)精靈的blendFunc就行了。可是，實(shí)際上這樣是行不通的！

　　上面所提到的混合算法，當(dāng)精靈下面還有一些精靈在渲染的時(shí)候就會(huì)出問(wèn)題---比如背景圖片上面有一個(gè)精靈。這是因?yàn)椋@里作了一個(gè)假設(shè)，在上面做完1那個(gè)步驟之后，imgae buffer里面只存在唯一一張圖片，那就是mask。（這個(gè)假設(shè)當(dāng)然是不正確的啦，因?yàn)槟阋袚Q日歷圖片對(duì)不對(duì)？）

    因此，我們需要一種方式，可以建立一個(gè)干凈的“黑板”，然后在那執(zhí)行1，2步來(lái)制作一個(gè)遮罩紋理。很幸運(yùn)的是，用CCRenderTexture非常方便。

Masking and CCRenderTexture

    CCRenderTexture是一個(gè)這樣的類，它可以讓你在屏幕之外的buffer里面渲染。

    它用起來(lái)非常方便，主要有以下原因---你可以使用它來(lái)給你的游戲截屏，可以高效地緩存用戶渲染的內(nèi)容，可以在運(yùn)行時(shí)動(dòng)態(tài)地創(chuàng)建sprite sheet，或者，就像本教程中一樣，可以制作一個(gè)mask sprite。

    為了使用CCRenderTexture，你需要采取以下4步：

1. 創(chuàng)建CCRenderTexture類，以像素為單位，指定你想要繪制的紋理的寬度和高度.
2. 調(diào)用CCRenderTexture的begin方法來(lái)初始化渲染操作。
3. 調(diào)用OpenGL函數(shù)來(lái)繪制實(shí)際的內(nèi)容--但是，這些OpenGL調(diào)用最終都會(huì)繪制到屏幕之外去，而不會(huì)影響游戲中現(xiàn)在渲染的圖像。
4. 調(diào)用CCRenderTexture的end方法來(lái)結(jié)束繪制操作。一旦你完成之后，CCRenderTexture有一個(gè)sprite屬性，你可以把它當(dāng)用CCSprite來(lái)用。

　　不要覺(jué)得第3步很奇怪---因?yàn)槟阏谑褂胏ocos2d，90％的情況你是不需要手動(dòng)直接調(diào)用OpenGL函數(shù)的。但是，如果你想渲染一個(gè)節(jié)點(diǎn)的話，你可以直接調(diào)用某一個(gè)節(jié)點(diǎn)的visit方法，如[sprite visit］，然后這個(gè)函數(shù)會(huì)自動(dòng)為你發(fā)射一些OpenGL函數(shù)指針給圖形硬件去顯示。

　　這里有一點(diǎn)需要注意的就是坐標(biāo)問(wèn)題。（0，0）點(diǎn)是渲染的紋理的左下角位置，所以，你在使用CCRenderTexture的時(shí)候，一定要把坐標(biāo)設(shè)置對(duì)。

    好了，你可能聽(tīng)得有些煩了，程序員還是喜歡看代碼的。好，讓我們開(kāi)始coding吧！

給精靈添加遮罩: 最終實(shí)現(xiàn)

    打開(kāi)HelloWorldLayer.m，然后在init方法上面添加下面的方法：

- (CCSprite *)maskedSpriteWithSprite:(CCSprite *)textureSprite maskSprite:(CCSprite *)maskSprite { 
 
    // 1
    CCRenderTexture * rt = [CCRenderTexture renderTextureWithWidth:maskSprite.contentSizeInPixels.width height:maskSprite.contentSizeInPixels.height];
 
    // 2
    maskSprite.position = ccp(maskSprite.contentSize.width/2, maskSprite.contentSize.height/2);
    textureSprite.position = ccp(textureSprite.contentSize.width/2, textureSprite.contentSize.height/2);
 
    // 3
    [maskSprite setBlendFunc:(ccBlendFunc){GL_ONE, GL_ZERO}];
    [textureSprite setBlendFunc:(ccBlendFunc){GL_DST_ALPHA, GL_ZERO}];
 
    // 4
    [rt begin];
    [maskSprite visit];        
    [textureSprite visit];    
    [rt end];
 
    // 5
    CCSprite *retval = [CCSprite spriteWithTexture:rt.sprite.texture];
    retval.flipY = YES;
    return retval;
 
}

　　讓我們一步步來(lái)分解下面的操作：

1. 使用mask精靈的大小來(lái)創(chuàng)建CCRenderTexture
2. 重新設(shè)置mask精靈和texture精靈的位置，使它們的左下角是（0，0）
3. 按照我們之前討論的，設(shè)置每個(gè)精靈的blendFunc。
4. 調(diào)用CCRenderTexture的begin方法來(lái)開(kāi)始渲染操作，然后依次渲染mask和texture精靈，最后調(diào)用end方法。
5. 基于CCRenderTexture的sprite屬性的texture創(chuàng)建一個(gè)新的精靈，同時(shí)翻轉(zhuǎn)y，因?yàn)榧y理創(chuàng)建出來(lái)是倒的。

    好了，接下來(lái)，我們可以使用上面的函數(shù)來(lái)制作遮罩的效果了：

CCSprite * mask = [CCSprite spriteWithFile:@"CalendarMask.png"];        
CCSprite * maskedCal = [self maskedSpriteWithSprite:cal maskSprite:mask];
maskedCal.position = ccp(winSize.width/2, winSize.height/2);
[self addChild:maskedCal];

   編譯并運(yùn)行，現(xiàn)在，你可以看到一個(gè)帶有遮罩效果的精靈啦。　　

CCRenderTexture 方法的缺點(diǎn)

    對(duì)于這個(gè)簡(jiǎn)單的教程，這里提出的方法還比較ok，但是，這種方法也有一些缺點(diǎn)，特別是針對(duì)復(fù)雜一點(diǎn)的項(xiàng)目的時(shí)候：

• 每一次你應(yīng)用一次mask的時(shí)候，都會(huì)在內(nèi)存里面創(chuàng)建一張額外的紋理圖片。 在iphone上面紋理所能占用的內(nèi)存數(shù)量是非常有限的，所以你要非常小心，盡可能減少內(nèi)存中加載的紋理圖片數(shù)量。當(dāng)你一次只給一張圖片加mask效果的時(shí)候，這種方法很好，但是100張圖片需要mask呢？ 
• 渲染非常耗時(shí).使用CCRenderTexture來(lái)渲染代價(jià)非常高，尤其是當(dāng)紋理大小變大以后。如果你經(jīng)常使用這種方式去繪圖，那么會(huì)嚴(yán)重影響性能。 

    像我之前提到的一樣，我還沒(méi)有在OpenGLEs 1.0里面找到更好的方法來(lái)做這種事。但是，通過(guò)使用OpenGL ES 2.0，我們可以使用shader，那樣會(huì)效率高很多。

何去何從?

　　這里有本教程的完整源代碼。

　　期待下一篇教程吧，下一篇教程我們將使用Cococs2d 2.0，通過(guò)編寫(xiě)定制的shader來(lái)給圖片添加遮罩。

      譯注：由于本人最近比較忙，所以近期博客更新可能會(huì)有點(diǎn)慢，請(qǐng)見(jiàn)諒。

    推薦大家看幾本書(shū)吧。首先，當(dāng)然是《Learn iPhone and iPad Cocos2D Game Development》和《Learning Cocos2D》啦，這也是目前市面上介紹cocos2d比較經(jīng)典和全面的書(shū)籍。然后，大家可以學(xué)習(xí)opengles的知識(shí)，同時(shí)也是推薦兩本書(shū)《Learning iOS Game Programming》和《Oreilly.iPhone.3D.Programming.May.2010》。這些書(shū)網(wǎng)上都有下載。前面提到的兩本cocos2d的書(shū)我看過(guò)一遍了，感覺(jué)很不錯(cuò)，如果大家看書(shū)的過(guò)程中遇到什么問(wèn)題，歡迎留言和我討論。學(xué)習(xí)游戲開(kāi)發(fā)，數(shù)學(xué)物理很重要，如果大家有時(shí)候就補(bǔ)補(bǔ)數(shù)學(xué)和物理吧。當(dāng)然opengl也要有很多數(shù)學(xué)知識(shí)的。

------------------------------------------------------------------------------------------------------
因?yàn)榻坛淌荌OS平臺(tái)的，我在Android平臺(tái)上參考例子，用cocos2d-x實(shí)現(xiàn)了一次，貼上主要代碼：

bool HelloWorld::init()
{
    /**///////////////////////////////
    // 1. super init first
    if (!CCLayer::init() )
    {
        return false;
    }

    CCSize s = CCDirector::sharedDirector()->getWinSize();

    int calendarNum = 0;
    do 
    {
        calendarNum = CCRANDOM_0_1() * 2;
    } while(calendarNum == mLastCalendar);

    mLastCalendar = calendarNum;

    // 
    std::string name = "Calendar";
    
    std::stringstream ss;
    ss << mLastCalendar;
    name += ss.str();

    name += ".png";

    // 加載sprite并置為全屏
    CCSprite* sprite = CCSprite::create(name.c_str());
    sprite->setScaleX((float)SCREEN_WIDTH / sprite->getContentSize().width);
    sprite->setScaleY((float)SCREEN_HEIGHT / sprite->getContentSize().height);
    sprite->setPosition(ccp(s.width/2, s.height/2));

    //加載掩碼圖片
    CCSprite* maskSprite = CCSprite::create("CalendarMask.png");
    maskSprite->setScaleX((float)SCREEN_WIDTH / maskSprite->getContentSize().width);
    maskSprite->setScaleY((float)SCREEN_HEIGHT / maskSprite->getContentSize().height);
    maskSprite->setPosition(ccp(s.width/2, s.height/2));

    CCSprite* maskCal = maskedSpriteWithSprite(sprite, maskSprite);
    maskCal->setPosition( ccp(s.width/2, s.height/2) );
    addChild(maskCal);
    
    setTouchEnabled(true);
    return true;
}

cocos2d::CCSprite* HelloWorld::maskedSpriteWithSprite(cocos2d::CCSprite* textureSprite, cocos2d::CCSprite* maskSprite)
{
    // 1
    int w = maskSprite->getContentSize().width * maskSprite->getScaleX();
    int h = maskSprite->getContentSize().height * maskSprite->getScaleY();
    CCRenderTexture* rt = CCRenderTexture::renderTextureWithWidthAndHeight(w, h);

    // 2
    maskSprite->setPosition( ccp(maskSprite->getContentSize().width *  maskSprite->getScaleX()/2, 
        maskSprite->getContentSize().height * maskSprite->getScaleY()/2));
    textureSprite->setPosition( ccp(textureSprite->getContentSize().width *  textureSprite->getScaleX() /2, 
        textureSprite->getContentSize().height * textureSprite->getScaleY()/2));

    // 3
    ccBlendFunc blendFunc;
    blendFunc.src = GL_ONE;
    blendFunc.dst = GL_ZERO;
    maskSprite->setBlendFunc(blendFunc);

    blendFunc.src = GL_DST_ALPHA;            // mask圖片的當(dāng)前alpha值是多少，如果是0（完全透明），那么就顯示mask的。如果是1（完全不透明）
    blendFunc.dst = GL_ZERO;                // maskSprite不可見(jiàn)
    textureSprite->setBlendFunc(blendFunc);

    // 4
    rt->begin();
    maskSprite->visit();
    textureSprite->visit();
    rt->end();

    // 5
    CCSprite* retval = CCSprite::spriteWithTexture(rt->getSprite()->getTexture());
    retval->setFlipY(true);
    return retval;
}

完整cocos2d-x實(shí)現(xiàn)代碼下載
 

免責(zé)申明（必讀！）：本博客提供的所有教程的翻譯原稿均來(lái)自于互聯(lián)網(wǎng)，僅供學(xué)習(xí)交流之用，切勿進(jìn)行商業(yè)傳播。同時(shí)，轉(zhuǎn)載時(shí)不要移除本申明。如產(chǎn)生任何糾紛，均與本博客所有人、發(fā)表該翻譯稿之人無(wú)任何關(guān)系。謝謝合作！

原文鏈接地址：http://www.raywenderlich.com/4421/how-to-mask-a-sprite-with-cocos2d-1-0

同類文章：http://www.cnblogs.com/dingwenjie/archive/2012/04/02/2429576.html