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