Cocos2d-x学习（十二）：用cocos2d-x实现MoonWarriors（无限背景滚动的简单实现）

特别声明：本文所有图片资源来源于MoonWarriors cocos2d-html 开源项目

之前总结过一次无线背景滚动的实现方法，基本上是基于cocos2d-html版的MoonWarriors的方法实现的，

博客地址：cocos2d-x学习（九）：cocos2d-x 无限背景滚动

其实原理都是类似的，都是通过移动背景图，造成玩家角色移动的假象，而无限背景滚动就是两个背景图，依次排开，移动，判读是否移除屏幕外，位置更改，循环交替。

在之前的博客中，我是在update()方法中根据时间和背景移动的速度来动态修改位置实现的，然后判读是否移动到了屏幕外，再修改位置；这样做没问题，但是略显复杂，这是通用的方法，而没有利用到引擎为我们提供的便利！

这次我是使用CCMoveBy类来实现的背景移动，在动作执行完之后再回调本方法，调整位置，继续移动！这样做的好处是利用cocos2d为我们提供的类，代码比较简单，而且判读次数明显减少（之前在每帧update()移动的时候去判断，而这样做之后只需要在回调方法中判读即可）！

当然这次也是参照cocos2d-html版的MoonWarriors的效果，使用了两层背景，一层图片精灵，作为远景层；一层是TMX格式的地图，作为近景层；

（远景层和近景层就像是在汽车中看到车外的情况，远处的高山移动缓慢，是远景层；近处的树移动迅速，是近景层。这样有层次的背景，立体效果比较好！）

具体原理就不解释了，和之前的博客类似。cocos2d-x学习（九）：cocos2d-x 无限背景滚动

1.初始化背景代码：

[cpp] view plaincopy

1. <span style="font-size:14px;">void GamePlayBGLayer::initBackground()  
2. {  
3.     // 远景层  
4.     mVisionBGSprite = CCSprite::spriteWithFile("bg01.jpg");  
5.     // 复制精灵，省去读取文件的步骤  
6.     mVisionBGSpriteRe = CCSprite::spriteWithTexture(mVisionBGSprite->getTexture());  
7.     // 获取远景层高度  
8.     mVisionBGHeight = mVisionBGSprite->getContentSize().height - 1;  
9.     // 设置标签(不是为了找到对应的精灵对象，而是为了区分远景层和近景层)  
10.     mVisionBGSprite->setTag(GAMEPLAY_BG_VISION_LAYER);  
11.     mVisionBGSpriteRe->setTag(GAMEPLAY_BG_VISION_LAYER);  
12.     // 设置锚点为零点  
13.     mVisionBGSprite->setAnchorPoint(CCPointZero);  
14.     mVisionBGSpriteRe->setAnchorPoint(CCPointZero);  
15.     // 设置位置，从下到上依次排列远景层和远景复制层  
16.     mVisionBGSprite->setPosition(CCPointZero);  
17.     mVisionBGSpriteRe->setPosition(ccp(0, mVisionBGHeight));  
18.       
19.     this->addChild(mVisionBGSprite, 0);  
20.     this->addChild(mVisionBGSpriteRe, 0);  
21.       
22.       
23.     // 近景层(步骤同远景层)  
24.     mCloseRangeBGTiledMap = CCTMXTiledMap::tiledMapWithTMXFile("level01.tmx");  
25.     mCloseRangeBGTiledMapRe = CCTMXTiledMap::tiledMapWithTMXFile("level01.tmx");  
26.     mCloseRangeBGTiledMap->setTag(GAMEPLAY_BG_CLOSE_RANGE_LAYER);  
27.     mCloseRangeBGTiledMapRe->setTag(GAMEPLAY_BG_CLOSE_RANGE_LAYER);  
28.     mCloseRangeBGHeight = mCloseRangeBGTiledMap->getContentSize().height - 1;  
29.     mCloseRangeBGTiledMap->setPosition(CCPointZero);  
30.     mCloseRangeBGTiledMapRe->setPosition(ccp(0, mCloseRangeBGHeight));  
31.       
32.     this->addChild(mCloseRangeBGTiledMap, 1);  
33.     this->addChild(mCloseRangeBGTiledMapRe, 1);  
34. }  
35. </span>  

这里用到了一个小技巧，就是拷贝精灵对象的方法

[cpp] view plaincopy

1. <span style="font-size:14px;">// 复制精灵，省去读取文件的步骤  
2.     mVisionBGSpriteRe = CCSprite::spriteWithTexture(mVisionBGSprite->getTexture());</span>  

通过mVisionBGSprite的纹理去生成对象，这样可以省去从本地图片文件重复读取的麻烦，当然如果频繁使用，可以预先加载到CCTextureCache中！

2.下面是无线背景滚动的动作执行的代码

[cpp] view plaincopy

1. <span style="font-size:14px;">void GamePlayBGLayer::scrollingToInfinity(CCNode *pBGLayer)  
2. {  
3.     CCAction *scrollAction = NULL;  
4.       
5.     // 根据远景层和近景层不同，执行不同的动作（考虑以后会有更多层，所以用switch）  
6.     switch (pBGLayer->getTag()) {  
7.         case GAMEPLAY_BG_VISION_LAYER:  
8.             // 判断位置，如果完全移动到屏幕之外，则排在当前显示层之上，循环使用  
9.             if (pBGLayer->getPositionY() <= -mVisionBGHeight) {  
10.                 pBGLayer->setPosition(ccpAdd(pBGLayer->getPosition(), ccp(0, 2 * mVisionBGHeight)));  
11.             }  
12.             scrollAction = CCSequence::actions(CCMoveBy::actionWithDuration(15.0f, ccp(0, -mVisionBGHeight)), CCCallFunc::actionWithTarget(this, callfunc_selector(GamePlayBGLayer::scrollingToInfinity)), NULL);  
13.             break;  
14.           
15.         case GAMEPLAY_BG_CLOSE_RANGE_LAYER:  
16.             if (pBGLayer->getPositionY() <= -mCloseRangeBGHeight) {  
17.                 pBGLayer->setPosition(ccpAdd(pBGLayer->getPosition(), ccp(0, 2 * mCloseRangeBGHeight)));  
18.             }  
19.             scrollAction = CCSequence::actions(CCMoveBy::actionWithDuration(12.0f, ccp(0, -mCloseRangeBGHeight)), CCCallFunc::actionWithTarget(this, callfunc_selector(GamePlayBGLayer::scrollingToInfinity)), NULL);  
20.             break;  
21.               
22.         default:  
23.             CCAssert(0, "错误的游戏场景ID");  
24.             break;  
25.     }  
26.       
27.     if (scrollAction) {  
28.         pBGLayer->runAction(scrollAction);  
29.     }  
30. }</span>  

这里的switch是为了区分远景层和近景层而做的处理，考虑到之后为了效果可以增加更多的层次！

效果图

 

项目地址