【玩轉cocos2d-x之十六】滾動字幕和公告

原創作品，轉載請标明：http://blog.csdn.net/jackystudio/article/details/12991977

滾動字幕和公告是遊戲中經常使用到的元素，本文大緻寫一下實作方法，至于例子中具體的坐标值，請不要糾結。。。這和美工關系還是蠻大的。我PS技術太搓了。。。

1.原理

其實它們的實作都是簡單的通過調用update來更新位置達到的移動效果，和背景滾動有點類似，一旦滾動結束就重置為起點，開始新的滾動。隻是為了達到在某個區域内滾動而不至于超出這個區域，有時候會用一些前景圖來做遮蓋，是以這個時候其實字幕或者公告是有在後面滾動的，但是被遮住了，是以看起來就像是隻在某個區域内滾動。以垂直字幕滾動為例說明，如下圖。

2.實作

不要糾結以下各精靈的坐标位置：）

[cpp]  view plain copy

1. bool CTestLayer::init()  
2. {  
3.     bool bRet=false;  
4.     do   
5.     {  
6.         CC_BREAK_IF(!CCLayer::init());  
7.         CCSize visibleSize=CCDirector::sharedDirector()->getVisibleSize();  
8.         CCSpriteFrameCache::sharedSpriteFrameCache()->addSpriteFramesWithFile("ui_serverlist.plist");  
9.         //垂直滾動字幕  
10.         CCSprite* listbase=CCSprite::createWithSpriteFrame(CCSpriteFrameCache::sharedSpriteFrameCache()->spriteFrameByName("login_listbase.png"));//bottom底圖  
11.         listbase->setPosition(ccp(visibleSize.width/2,visibleSize.height/2+10));  
12.         this->addChild(listbase);  
13.         text1=CCLabelTTF::create("1.Hi! Welcome to JackyStudio,\nMy Blog is\nblog.csdn.net/jackystudio!\n2.Hi! Welcome to JackyStudio,\nMy Blog is\nblog.csdn.net/jackystudio!\n3.Hi! Welcome to JackyStudio,\nMy Blog is\nblog.csdn.net/jackystudio!\n4.Hi! Welcome to JackyStudio,\nMy Blog is\nblog.csdn.net/jackystudio!","Arial",12);//middle文本  
14.         text1->setHorizontalAlignment(kCCTextAlignmentLeft);//左對齊  
15.         text1->setAnchorPoint(ccp(0.5,1));  
16.         text1->setPosition(ccp(visibleSize.width/2,visibleSize.height/2-55));  
17.         this->addChild(text1);  
18.         CCSprite* fg=CCSprite::create("fg.png");//top前景  
19.         fg->setPosition(ccp(visibleSize.width/2,visibleSize.height/2));  
20.         this->addChild(fg);  
21.         //水準滾動公告  
22.         CCSprite* textbase=CCSprite::createWithSpriteFrame(CCSpriteFrameCache::sharedSpriteFrameCache()->spriteFrameByName("login_textbase.png"));  
23.         textbase->setPosition(ccp(visibleSize.width/2,50));  
24.         textbase->setScaleX(2.5f);  
25.         this->addChild(textbase);  
26.         text2=CCLabelTTF::create("Hi! Welcome to JackyStudio,My Blog is blog.csdn.net/jackystudio!","Arial",12);  
27.         text2->setPosition(ccp(visibleSize.width+text2->getContentSize().width/2,50));  
28.         text2->setColor(ccc3(255,0,0));//紅色字型  
29.         this->addChild(text2);  
30.         this->scheduleUpdate();//執行更新  
31.         bRet=true;  
32.     } while (0);  
33.     return bRet;  
34. }  
35. void CTestLayer::update(float delta)  
36. {  
37.     CCSize visibleSize=CCDirector::sharedDirector()->getVisibleSize();  
38.     int newY=text1->getPositionY()+1;  
39.     if (newY==500)//如果滾動到這個位置，重置  
40.     {  
41.         newY=visibleSize.height/2-55;  
42.     }  
43.     text1->setPositionY(newY);  
44.     int newX=text2->getPositionX()-1;  
45.     if (newX<=-text2->getContentSize().width/2)//如果滾動到這個位置，重置  
46.     {  
47.         newX=visibleSize.width+text2->getContentSize().width/2;  
48.     }  
49.     text2->setPositionX(newX);  
50. }  

3.效果

這個效果有點小bug，就是文字覆寫到邊框上了，這是因為沒有把邊框做在top層上導緻的，實際使用注意這個問題即可。

4.源碼下載下傳

http://download.csdn.net/detail/jackyvincefu/6434549