【Cocos2d-X开发学习笔记】第26期：游戏背景之滚动地图背景（CCParallaxNode）的使用

本系列学习教程使用的是cocos2d-x-2.1.4（最新版为3.0alpha0-pre） ，PC开发环境Windows7，C++开发环境VS2010

     在现实生活中，当我们身处一辆快速行驶的车上，用眼睛向窗外眺望的时候，可以很清晰地感觉到离车越远的风

景移动越慢，而离车越近的风景则会移动越快的视觉差异。

     这种视觉差不仅在现实生活中适用，在游戏开发中也经常对地图或者背景采取视觉差的运动规律，让游戏背景或

地图移动的时候显得更加真实。

一、视觉差效果类CCParallaxNode

在Cocos2D-X引擎中，也为开发者封装了一个视觉差效果类CCParallaxNode。

首先来看看它的创建方式：

<1> CCParallaxNode::create()

作用：创建一个视觉差效果类。

这个类的主要函数：

<1> addChild(CCNode * child,unsigned int z,CCPoint & parallaxRatio,CCPoint & positionOffset)

作用：添加一个子类“视图层”。

参数1：子类，添加一个CCNode，让其作为视觉差效果中的一个视图层。

参数2：Z轴，视觉差中的遮挡关系。

参数3：x轴、y轴的移动速率。

参数4：子类坐标。

二、项目实例

1、首先新建Cocos2D-X项目，取名为“MyCCParallaxNode”，然后在HelloWorldScene.cpp文件的init函数中添加如下代码。

bool HelloWorld::init()
{
    bool bRet = false;
    do 
    {
        CC_BREAK_IF(! CCLayer::init());
       
        CCSprite* spFont = CCSprite::create("front.png");
		CCSprite* spMiddle = CCSprite::create("middle.png");
		CCSprite* spFar = CCSprite::create("far.png");
    
		CCParallaxNode * parallaxNode = CCParallaxNode::create();
		addChild(parallaxNode);
    
		//近景
		parallaxNode->addChild(spFont,3, ccp(4.8f,0), ccp(spFont->getContentSize().width*0.5,spFont->getContentSize().height*0.5) );
		//中景
		parallaxNode->addChild(spMiddle, 2, ccp(1.6f,0), ccp(spMiddle->getContentSize().width*0.5,spMiddle->getContentSize().height*0.5+spFont->getContentSize().height*0.5) );
		//远景
		parallaxNode->addChild(spFar, 1, ccp(0.5f,0), ccp(spFar->getContentSize().width*0.5,spFar->getContentSize().height*0.5+spFont->getContentSize().height*0.5+spMiddle->getContentSize().height*0.5) );
       
		CCActionInterval* go = CCMoveBy::create(8, ccp(-200,0) );
		CCActionInterval* goBack = go->reverse();
		CCFiniteTimeAction* seq = CCSequence::create(go,goBack, NULL);
		parallaxNode->runAction( (CCRepeatForever::create((CCActionInterval*) seq) ));

        bRet = true;
    } while (0);

    return bRet;
}

     从以上代码可以看出，远景移动最慢。其X轴每次移动1.6个坐标，Y轴每次移动0个像素，而近景则每次移动的最快。由于CCParallaxNode添加的是CCNode，所以不仅可以添加CCSprite，也可以添加CCTMXTiledMap等CCNode子类。

2、实例效果图

源码下载地址