横版游戏中有用到多张图片轮番显示作为动态背景。但我在实际项目中,发现图片在滚动时有可能出现缝隙,影响了游戏体验。经过分析,这是因为重置缓冲图片时产生了时间差

  轮番显示的原理就是一张图片滚动,另外一张作为缓冲,滚动出屏幕的图片继而替补成为缓冲,这样周而复始地轮换下去。

举一个例子:

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);

  这样缝隙就不见了。

新的问题:

  但是这里又有一个小问题,那就是两个层之间出现了重叠。而项目中经常会在层上加入其它节点,那么如果节点出现在重叠区域,将会出现显示问题(也将被覆盖掉一部分)。因此在实际开发中,要注意避免节点出现在这样的区域。

版权声明:本文为demon90s原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/demon90s/p/4400960.html