Cocos2d-x游戏中的场景滚动

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

首先我用了网上别人的图片如下两张320X480大小的图片，两张图片的颜色不同以更好地展示滚动效果，我们新建一个工程，然后把这两张图片放到项目的Resource目录下。



在编写代码之前先来介绍一下背景滚动的原理。我们将一开始的背景设置为图片1，图片2的位置放在图片1的上面（由于这是一个纵版游戏，所有只与Y坐标有关），即图片2的Y坐标为图片1的Y轴坐标+高度480。然后当游戏开始时，减小图片1的Y坐标，一直到图片2的坐标<=0时，此时图片1已经完全移除了屏幕，图片2占据了整个屏幕，然后把图片1在放在图片2上面，一直到图片2完全移除到屏幕外，再把图片2放在图片1上面，



这样就完成了一个循环。横版游戏道理同样，只是改变的是X坐标的值。

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

bool HelloWorld::init()
{
if ( !CCLayer::init() )
{
return false;
}
//创建两个背景
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();
return true;
}

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

void HelloWorld::update(float time){
//取得两个背景精灵
CCSprite* bg_1 = (CCSprite*)getChildByTag(11);
CCSprite* bg_2 = (CCSprite*)getChildByTag(22);
//两个背景移动
bg_1->setPositionY(bg_1->getPositionY()-2);
bg_2->setPositionY(bg_2->getPositionY()-2);
//判断两个背景移动的重贴
if(bg_2->getPositionY() <= 0){
float temp = bg_2->getPositionY() + 480;
bg_1->setPositionY(temp);
}
if(bg_1->getPositionY() <= 0){
float temp = bg_1->getPositionY() + 480;
bg_2->setPositionY(temp);
}
}

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

eglView->setFrameSize(320, 480);

运行的效果就像滚筒一般。运行效果如下。