cc随笔：cocos2dx 创建无限滚动的移动背景

菜鸟笔记：利用定时器创建一个无限滚动的背景图片。

cocos2dx中三种定时器：schedule，scheduleUpdate，scheduleOnce：

API:

//更新定时器，每帧调用1次。每个节点只能有1个被调度的update函数
void scheduleUpdate(void);
//卸载更新定时器
void unscheduleUpdate(void);
//自定义定时器，如果重复调用，那调用间隔会更新，而不会再次调用
//interval，调用时间间隔，如果为0，建议使用scheduleUpdate
//repeat，回调函数会被执行repeat+1次，kCCRepeatForever是无限次调用
//delay，第一次执行前的延时
void schedule(SEL_SCHEDULE selector, float interval, unsigned int repeat, float delay);
void schedule(SEL_SCHEDULE selector, float interval);
void scheduleOnce(SEL_SCHEDULE selector, float delay);
void schedule(SEL_SCHEDULE selector);
//卸载自定义定时器
void unschedule(SEL_SCHEDULE selector);
void unscheduleAllSelectors(void);
//恢复所有定时器和动作，OnEnter调用
void resumeSchedulerAndActions(void);
//暂停所有定时器和动作，OnExit调用
void pauseSchedulerAndActions(void);
//scheduleUpdate每帧调用
virtual void update(float delta);

定时器的因能力有限就不做介绍了，我主要想介绍怎样实现如题动画，闲话不多说，看步骤：

1、准备两张可拼接的背景图片；

2、代码实现：

bool HelloWorld::init()
{
    if ( !Layer::init() )
    {
        return false;
    }
	auto visibleSize = Director::getInstance()->getVisibleSize();
    	//滚动的背景
	bg_1 = Sprite::create("image/rollbg/bg1.jpg");
	bg_2 = Sprite::create("image/rollbg/bg2.jpg");

	//为了填满屏幕所以进行适当的缩放
	bg_1->setScaleX(visibleSize.width/ bg_1->getContentSize().width);
	bg_1->setScaleY(visibleSize.height / bg_1->getContentSize().height);
	bg_2->setScaleX(visibleSize.width/ bg_2->getContentSize().width);
	bg_2->setScaleY(visibleSize.height / bg_2->getContentSize().height);
	//设置精灵的位置
	bg_1->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 2));
	bg_2->setPosition(Vec2(visibleSize.width / 2 +bg_1->getContentSize().width, visibleSize.height / 2));
	//可适当加入不同速率的云彩作呼应
	bg_3->setPosition(Vec2(visibleSize.width / 2 +bg_3->getContentSize().width, visibleSize.height / 2+100));

	addChild(bg_1);
	addChild(bg_2);
	addChild(bg_3);

	//定时器，不填写参数，默认每帧都要执行一次moveBg方法
	this->schedule(schedule_selector(HelloWorld::moveBg));

    return true;
}

3、关键处：设置背景移动的速度，即每次调用moveBg方法，要移动多少距离

void HelloWorld::moveBg(float ft)
{
	//每次调用将精灵位置的x轴移动0.5
	bg_1->setPosition(Vec2(bg_1->getPositionX()-0.5,bg_1->getPositionY()));
	bg_2->setPosition(Vec2(bg_2->getPositionX() - 0.5, bg_2->getPositionY()));

	//设置不同速率的云彩
	bg_3->setPosition(Vec2(bg_3->getPositionX() - 0.3, bg_3->getPositionY()));

	//当背景1刚好移出屏幕，则将背景1的位置重新设置到背景2的后面，以此类推
	/*
	*注意：区分getPosition()方法所对应的位置
	*/
	if (bg_1->getPositionX()<=-bg_1->getContentSize().width/2)
	{
		bg_1->setPosition(Vec2(bg_1->getContentSize().width*3/2,bg_1->getPositionY()));
	}
	if (bg_2->getPositionX()<=-bg_2->getContentSize().width/2)
	{
		bg_2->setPosition(Vec2(bg_2->getContentSize().width * 3 / 2, bg_1->getPositionY()));
	}
	if (bg_3->getPositionX() <= -bg_3->getContentSize().width / 2) {
		bg_3->setPosition(Vec2(bg_1->getContentSize().width * 3 / 2, bg_3->getPositionY()));
	}
}

4、停止背景的移动：即取消定时器

	//取消执行的定时器
	unschedule(schedule_selector(HelloWorld::moveBg));

注：bg_3是我添加的一朵云彩（数量可自己定义），为的是让整体运动的界面有层次感

OK，代码就这样，接下来看看运行的效果：

cc随笔：cocos2dx 创建无限滚动的移动背景

猜你喜欢