滚动字幕和公告是游戏中经常使用到的元素，本文大致写一下实现方法，至于例子中具体的坐标值，请不要纠结。。。这和美工关系还是蛮大的。我PS技术太搓了。。。
原理
其实它们的实现都是简单的通过调用update来更新位置达到的移动效果，和背景滚动有点类似，一旦滚动结束就重置为起点，开始新的滚动。只是为了达到在某个区域内滚动而不至于超出这个区域，有时候会用一些前景图来做遮盖，所以这个时候其实字幕或者公告是有在后面滚动的，但是被遮住了，因此看起来就像是只在某个区域内滚动。以垂直字幕滚动为例说明，如下图。
实现
不要纠结以下各精灵的坐标位置：）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
| bool CTestLayer::init()
{
bool bRet=false;
do
{
CC_BREAK_IF(!CCLayer::init());
CCSize visibleSize=CCDirector::sharedDirector()->getVisibleSize();
CCSpriteFrameCache::sharedSpriteFrameCache()->addSpriteFramesWithFile("ui_serverlist.plist");
CCSprite* listbase=CCSprite::createWithSpriteFrame(CCSpriteFrameCache::sharedSpriteFrameCache()->spriteFrameByName("login_listbase.png"));
listbase->setPosition(ccp(visibleSize.width/2,visibleSize.height/2+10));
this->addChild(listbase);
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);
text1->setHorizontalAlignment(kCCTextAlignmentLeft);
text1->setAnchorPoint(ccp(0.5,1));
text1->setPosition(ccp(visibleSize.width/2,visibleSize.height/2-55));
this->addChild(text1);
CCSprite* fg=CCSprite::create("fg.png");
fg->setPosition(ccp(visibleSize.width/2,visibleSize.height/2));
this->addChild(fg);
CCSprite* textbase=CCSprite::createWithSpriteFrame(CCSpriteFrameCache::sharedSpriteFrameCache()->spriteFrameByName("login_textbase.png"));
textbase->setPosition(ccp(visibleSize.width/2,50));
textbase->setScaleX(2.5f);
this->addChild(textbase);
text2=CCLabelTTF::create("Hi! Welcome to JackyStudio,My Blog is blog.csdn.net/jackystudio!","Arial",12);
text2->setPosition(ccp(visibleSize.width+text2->getContentSize().width/2,50));
text2->setColor(ccc3(255,0,0));
this->addChild(text2);
this->scheduleUpdate();
bRet=true;
} while (0);
return bRet;
}
void CTestLayer::update(float delta)
{
CCSize visibleSize=CCDirector::sharedDirector()->getVisibleSize();
int newY=text1->getPositionY()+1;
if (newY==500)
{
newY=visibleSize.height/2-55;
}
text1->setPositionY(newY);
int newX=text2->getPositionX()-1;
if (newX<=-text2->getContentSize().width/2)
{
newX=visibleSize.width+text2->getContentSize().width/2;
}
text2->setPositionX(newX);
}
|
效果
这个效果有点小bug，就是文字覆盖到边框上了，这是因为没有把边框做在top层上导致的，实际使用注意这个问题即可。
源码下载
源码下载
