Cocos2d-x游戏中的场景滚动

       在很多纵版射击游戏或横版动作游戏中，我们会发现游戏的背景会随着主角的移动而不停地变化，乍一看会以为场景在不断地向后移动，其实我们仔细观察一下就会发现其实背景移动一段时间后又会重复前面已经走过去的背景，这就是游戏中的场景滚动，只是用两张图片交替循环播放实现的，那么我们接下来就来实现场景的滚动。

       首先我制作了如下两张320X480大小的图片，两张图片的颜色不同以更好地展示滚动效果，我们新建一个工程，取名为“ScrollTest”，然后把这两张图片放到项目的Resource目录下。

               

       在编写代码之前先来介绍一下背景滚动的原理。我们将一开始的背景设置为图片1，图片2的位置放在图片1的上面（由于这是一个纵版游戏，所有只与Y坐标有关），即图片2的Y坐标为图片1的Y轴坐标+高度480。然后当游戏开始时，减小图片1的Y坐标，一直到图片2的坐标<=0时，此时图片1已经完全移除了屏幕，图片2占据了整个屏幕，这样就完成了一个循环。我们重新设置图片1的Y坐标为0，那么图片2又会回到图片1的上面，进行第二次循环……。横版游戏道理同样，只是改变的是X坐标的值。

      好了，我们打开HelloWorld.cpp文件，修改init方法如下：

bool HelloWorld::init()
{
    bool bRet = false;
    do 
    {

        CC_BREAK_IF(! CCLayer::init());

		//创建两个背景
		CCSprite* bg_1 = CCSprite::create("11.png");
		CCSprite* bg_2 = CCSprite::create("22.png");

		//设置锚点为左下角
		bg_1->setAnchorPoint(CCPointZero);
		bg_2->setAnchorPoint(CCPointZero);

		//设置位置
		bg_1->setPosition(CCPointZero);
		bg_2->setPosition(ccp(0,480));

		//添加进布景，并设置tag
		this->addChild(bg_1,1,11);
		this->addChild(bg_2,1,22);

		//开始每帧的回调方法，用于背景的滚动
		scheduleUpdate();
       

        bRet = true;
    } while (0);

    return bRet;
}

然后实现每帧的回调函数update,首先在.h文件里声明它，然后在.cpp文件里添加如下代码：

void HelloWorld::update(float dt)
{
	//取得两个背景精灵
	CCSprite* bg_1 = (CCSprite*)getChildByTag(11);
	CCSprite* bg_2 = (CCSprite*)getChildByTag(22);

	//图片1的Y坐标逐帧减小
	bg_1->setPositionY(bg_1->getPositionY() - 2);
	//设置图片2的Y坐标为图片1的Y坐标+480
	bg_2->setPositionY(bg_1->getPositionY() + 480);

	//如果图片2的Y坐标<=0，重置坐标，结束一次循环
	if(bg_2->getPositionY()<=0)
	{
		bg_1->setPositionY(0);
	}
}

最后，由于我们得图片尺寸是320X480大小的，所以修改main.cpp里面的设置窗口尺寸的方法：

eglView->setFrameSize(320, 480);

运行，效果如下。屏幕闪烁是由于我们得图片颜色差异太大导致的，当换成颜色一样的图片时就不会感觉到。

               

附上项目的源码下载地址：点此下载