教程截圖：
有時候，你在做游戲時，可能需要一種方式來顯示精靈的某一部分（就是添加遮罩啦）。
一種方式就是使用另外一張圖片，叫做mask。你把mask圖片中間設置成白色，白色區域是被mask圖片的可見區域。之后這個白色區域會透明的。
然后，你可以使用本教程提供的方法來把mask圖和原圖結合起來，然后創建如上圖所示的效果。
你會發現本教程提供的方法非常方便，用它可以完成許多很有意思的效果。比如，把大頭貼，或者像框等等。所以這些內容，你都可以從本教程中學到！
本教程會教你如何使用cocos2d 1.0來給一個sprite添加mask，使用一個非常強大的類CCRenderTexture，之前我們在學TinyWings Like游戲的時候已經見過啦：）
學習本教程的前提是你要熟悉cocos2d，如果你對cocos2d是何物還不清楚的話，建議你先學習本博客上面的其它cocos2d教程。
Getting Started
啟動Xcode，然后選擇File\New\New Project，接著選iOS\cocos2d\cocos2d，再點擊Next。把工程命名為MaskedCal，點擊Next，然后選擇一個文件夾來保存，最后點Create。
接下來，請下載本工程所需要的資源文件并把它們拖到你的Xcode的Resource分組中，確保“Copy items into destination group’s folder (if needed)” 并復選中，然后點Finish。
在開始編碼之前，讓我們先來一點爵士音樂。打開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]];
這里播放一個由Kevin MacLeod制作的一首非常好聽的曲子，然后調用了一個新的方法來加載場景。
接下來，打開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;
在這個場景中，我們將隨機顯示一張日歷圖片（從三張里面選擇）。在這個類里，我們保存了當前顯示的日歷圖片的序號，然后修改了初始化方法為 initWithLastCalendar。它接收一個int型參數來標識將要顯示的日歷圖片。后面，你會看到這個數字會隨機從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代碼，用來在屏幕中間隨機顯示一張日歷圖片。它同時也包含了一些邏輯，當你點擊屏幕的時候，可以比較平滑地切換到另一張圖片。
編譯并運行，現在你每次點擊屏幕就可以看到一些隨機的日歷圖片啦，它們全部都是由我可愛的妻子完成的：）
現在，我們把程序框架搭好了，接下來，讓我們來實現遮罩效果吧！
遮罩和OpenGL 混合模式（Blend Mode）
如果你在圖片編輯軟件里面打開Art\CalendarMask.png圖片，它看起來是這樣子的：
我們將使用這張圖片來給我們的日歷圖片添加一個邊框，是那種帶有波紋效果的邊框，而不是四邊形的。這張圖片透明的部分，就是遮罩效果的部分，而白色區域則是日歷圖片會顯示的區域。
為了實現這個效果，我們將使用OpenGL的混合模式。
如果你回過頭去看《如何使用CCRenderTexture來動態創建紋理》這篇教程的話，我們在那里討論過OpenGL的混合模式。我在那里提到過一個非常方便的在線工具可以用來可見化調節混合模式的效果。
為了完成我們想要的效果，我們需要采取下面的策略：
- 我們首先渲染mask精靈，把src color（就是mask精靈）設置為GL_ONE，并且把destination color（一個空的buffer）設置為GL_ZERO。所以，效果就是簡單的把mask圖片顯示來。
- 接下來，我們渲染日歷圖片精靈。把src color（日歷）設置為GL_DST_ALPHA。意思是，看看mask圖片的當前alpha值是多少，如果是0（完全透明），那么就顯示mask的。如果是1（完全不透明），那么就顯示日歷圖片。（譯者注：如果大家對此不明白，可以參考這個鏈接）。然后把dst color（the mask）設計成GL_ZERO，這樣的話，之前渲染上去的mask就消失了。
很酷吧！你可能會覺得我們只需要先把mask精靈渲染上去，然后再渲染日歷精靈，并且指定這兩個精靈的blendFunc就行了。可是，實際上這樣是行不通的！
上面所提到的混合算法，當精靈下面還有一些精靈在渲染的時候就會出問題---比如背景圖片上面有一個精靈。這是因為，這里作了一個假設，在上面做完1那個步驟之后，imgae buffer里面只存在唯一一張圖片，那就是mask。（這個假設當然是不正確的啦，因為你要切換日歷圖片對不對？）
因此，我們需要一種方式，可以建立一個干凈的“黑板”，然后在那執行1，2步來制作一個遮罩紋理。很幸運的是，用CCRenderTexture非常方便。
Masking and CCRenderTexture
CCRenderTexture是一個這樣的類，它可以讓你在屏幕之外的buffer里面渲染。
它用起來非常方便，主要有以下原因---你可以使用它來給你的游戲截屏，可以高效地緩存用戶渲染的內容，可以在運行時動態地創建sprite sheet，或者，就像本教程中一樣，可以制作一個mask sprite。
為了使用CCRenderTexture，你需要采取以下4步：
- 創建CCRenderTexture類，以像素為單位，指定你想要繪制的紋理的寬度和高度.
- 調用CCRenderTexture的begin方法來初始化渲染操作。
- 調用OpenGL函數來繪制實際的內容--但是，這些OpenGL調用最終都會繪制到屏幕之外去，而不會影響游戲中現在渲染的圖像。
- 調用CCRenderTexture的end方法來結束繪制操作。一旦你完成之后，CCRenderTexture有一個sprite屬性，你可以把它當用CCSprite來用。
不要覺得第3步很奇怪---因為你正在使用cocos2d，90％的情況你是不需要手動直接調用OpenGL函數的。但是，如果你想渲染一個節點的話，你可以直接調用某一個節點的visit方法，如[sprite visit］，然后這個函數會自動為你發射一些OpenGL函數指針給圖形硬件去顯示。
這里有一點需要注意的就是坐標問題。（0，0）點是渲染的紋理的左下角位置，所以，你在使用CCRenderTexture的時候，一定要把坐標設置對。
好了，你可能聽得有些煩了，程序員還是喜歡看代碼的。好，讓我們開始coding吧！
給精靈添加遮罩: 最終實現
打開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;
}
讓我們一步步來分解下面的操作：
- 使用mask精靈的大小來創建CCRenderTexture
- 重新設置mask精靈和texture精靈的位置，使它們的左下角是（0，0）
- 按照我們之前討論的，設置每個精靈的blendFunc。
- 調用CCRenderTexture的begin方法來開始渲染操作，然后依次渲染mask和texture精靈，最后調用end方法。
- 基于CCRenderTexture的sprite屬性的texture創建一個新的精靈，同時翻轉y，因為紋理創建出來是倒的。
好了，接下來，我們可以使用上面的函數來制作遮罩的效果了：
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];
編譯并運行，現在，你可以看到一個帶有遮罩效果的精靈啦。
CCRenderTexture 方法的缺點
對于這個簡單的教程，這里提出的方法還比較ok，但是，這種方法也有一些缺點，特別是針對復雜一點的項目的時候：
- 每一次你應用一次mask的時候，都會在內存里面創建一張額外的紋理圖片。 在iphone上面紋理所能占用的內存數量是非常有限的，所以你要非常小心，盡可能減少內存中加載的紋理圖片數量。當你一次只給一張圖片加mask效果的時候，這種方法很好，但是100張圖片需要mask呢？
- 渲染非常耗時.使用CCRenderTexture來渲染代價非常高，尤其是當紋理大小變大以后。如果你經常使用這種方式去繪圖，那么會嚴重影響性能。
像我之前提到的一樣，我還沒有在OpenGLEs 1.0里面找到更好的方法來做這種事。但是，通過使用OpenGL ES 2.0，我們可以使用shader，那樣會效率高很多。
何去何從?
這里有本教程的完整源代碼。
期待下一篇教程吧，下一篇教程我們將使用Cococs2d 2.0，通過編寫定制的shader來給圖片添加遮罩。
譯注：由于本人最近比較忙，所以近期博客更新可能會有點慢，請見諒。
推薦大家看幾本書吧。首先，當然是《Learn iPhone and iPad Cocos2D Game Development》和《Learning Cocos2D》啦，這也是目前市面上介紹cocos2d比較經典和全面的書籍。然后，大家可以學習opengles的知識，同時也是推薦兩本書《Learning iOS Game Programming》和《Oreilly.iPhone.3D.Programming.May.2010》。這些書網上都有下載。前面提到的兩本cocos2d的書我看過一遍了，感覺很不錯，如果大家看書的過程中遇到什么問題，歡迎留言和我討論。學習游戲開發，數學物理很重要，如果大家有時候就補補數學和物理吧。當然opengl也要有很多數學知識的。
------------------------------------------------------------------------------------------------------
因為教程是IOS平臺的，我在Android平臺上參考例子，用cocos2d-x實現了一次，貼上主要代碼：
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圖片的當前alpha值是多少，如果是0（完全透明），那么就顯示mask的。如果是1（完全不透明）
blendFunc.dst = GL_ZERO; // maskSprite不可見
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實現代碼下載
免責申明（必讀！）：本博客提供的所有教程的翻譯原稿均來自于互聯網，僅供學習交流之用，切勿進行商業傳播。同時，轉載時不要移除本申明。如產生任何糾紛，均與本博客所有人、發表該翻譯稿之人無任何關系。謝謝合作！
原文鏈接地址：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
posted on 2012-08-26 23:06
風輕云淡 閱讀(15816)
評論(0) 編輯 收藏 引用 所屬分類:
cocos2d