解决两张背景图轮换过程中出现缝隙的问题
横版游戏中有用到多张图片轮番显示作为动态背景。但我在实际项目中,发现图片在滚动时有可能出现缝隙,影响了游戏体验。经过分析,这是因为重置缓冲图片时产生了时间差。
轮番显示的原理就是一张图片滚动,另外一张作为缓冲,滚动出屏幕的图片继而替补成为缓冲,这样周而复始地轮换下去。
举一个例子:
void TestSprite::onEnter() { CCLayer::onEnter(); CCActionInterval *move1 = CCMoveBy::create(5, ccp(-480, 0)); CCCallFunc *moveagain = CCCallFunc::create(this, callfunc_selector(TestSprite::callback)); CCActionInterval *move2 = CCMoveBy::create(10, ccp(-960, 0)); CCSequence *seq = CCSequence::create(move1, moveagain, NULL); m_bg1->runAction(seq); m_bg2->runAction(move2); } void TestSprite::callback() { m_bg1->setPositionX(480); CCActionInterval *move = CCMoveBy::create(10, ccp(-960, 0)); m_bg1->runAction(move); }
m_bg1和m_bg2引用两个白色不透明的CCLayerColor,大小和屏幕一致,它们一开始向左移动屏幕宽度的距离。由于是同时启动,因此一开始是不会出现缝隙的。但是在m_bg1移出屏幕后,回到了屏幕右边作为缓冲进入屏幕,之后就出现了缝隙。这是为什么呢?
原来在m_bg1“置为缓冲”的过程中,m_bg2还在马不停蹄的移动着。这个缝隙就是m_bg1置为缓冲的那段时间双方拉开的距离,虽然很小,但是也很显眼。
从m_bg1开始调用callback函数到调用完毕所花去的时间,看样子是不可避免的消耗掉了。
解决办法:
因此,想要不出现缝隙,我想到的办法就是m_bg1置为缓冲的时候,其位置稍微往前一点,和m_bg2重合一点点,这样就把缝隙“补”上了。但既然已经往前移动了一点,总的移动距离又不能变,就不能再使用相对位移动作MoveBy了,只好用MoveTo来指定一个绝对的位置。见代码:
m_bg1->setPositionX(480 - 5); CCActionInterval *move = CCMoveTo::create(10, ccp(-480, 0)); m_bg1->runAction(move);
这样缝隙就不见了。
新的问题:
但是这里又有一个小问题,那就是两个层之间出现了重叠。而项目中经常会在层上加入其它节点,那么如果节点出现在重叠区域,将会出现显示问题(也将被覆盖掉一部分)。因此在实际开发中,要注意避免节点出现在这样的区域。