视差就是从有一定距离的两个点上观察同一个目标所产生的方向差异。从目标看两个点之间的夹角,叫做这两个点的视差角,两点之间的距离称作基线。只要知道视差角度和基线长度,就可以计算出目标和观测者之间的距离。游戏开发中利用视觉上的误差,即通常所说的视错觉。

如果我们的游戏中有地图的移动,就无法避免滚动视差。也就是说离实现越远的地方移动速度越慢,这样才可以形成景深不一样的视觉效果。

在Cocos2D-x里面我们可以使用CCParallaxNode类来实现这种视差的效果。CCParallaxNode可以很容易的建立一个视差层,你可以控制每一层的视差率、位置和层级的高低。主要会有下面的几个步骤:

1、创建CCParallaxNode用于存储各种精灵和背景图。
      CCParallaxNode* voidNode = CCParallaxNode::create();

2、向CCParallaxNode添加精灵通过addChild函数来添加,并且设置相对于CCParallaxNode的移动速度的比例。
     voidNode->addChild(cat, 1, ccp(3.0f,2.5f), ccp(200,800) );

比如cat精灵的移动速度的比例为 ccp(3.0f,2.5f),表示CCParallaxNode的X轴和Y轴分别移动一个点,则cat精灵分别移动3,2.5个点,这样在视觉的效果上就可以看到cat精灵的移动速度比较快。

3、创建 CCParallaxNode运动的动作,这样就可以看到在CCParallaxNode上的精灵的运动视差效果了。
 CCActionInterval* goUp = CCMoveBy::create(4, ccp(0,-500) );
 CCActionInterval* goDown = goUp->reverse();
 CCActionInterval* go = CCMoveBy::create(8, ccp(-1000,0) );
 CCActionInterval* goBack = go->reverse();
 CCFiniteTimeAction* seq = CCSequence::create(goUp, go, goDown, goBack, NULL);
 voidNode->runAction( (CCRepeatForever::create((CCActionInterval*) seq) ));

示例代码如下:

TestLayer::TestLayer()
{
// 创建cat精灵
CCSprite* cat = CCSprite::create("cat.png");
//change the transform anchor point to 0,0 (optional)
cat->setAnchorPoint( ccp(,) );
//创建 background 精灵最为背景
CCSprite* background = CCSprite::create("background.png");
// scale the image (optional)
background->setScale( 2.0f );
// change the transform anchor point (optional)
background->setAnchorPoint( ccp(,) ); // 创建一个parallax节点用于储存各种精灵,然后移动parallax节点以展示“视差”效果
CCParallaxNode* voidNode = CCParallaxNode::create();
// background的移动速度为 0.4x, 0.5y
voidNode->addChild(background, -, ccp(0.4f,0.5f), CCPointZero);
// cat的移动速度为 3.0x, 2.5y
voidNode->addChild(cat, , ccp(3.0f,2.5f), ccp(,) ); //移动 CCParallaxNode 产生视差效果
CCActionInterval* goUp = CCMoveBy::create(, ccp(,-) );
CCActionInterval* goDown = goUp->reverse();
CCActionInterval* go = CCMoveBy::create(, ccp(-,) );
CCActionInterval* goBack = go->reverse();
CCFiniteTimeAction* seq = CCSequence::create(goUp, go, goDown, goBack, NULL);
voidNode->runAction( (CCRepeatForever::create((CCActionInterval*) seq) )); addChild( voidNode );
}

运行的效果:

[Cocos2D-x For WP8]ParallaxNode视差-LMLPHP

 
05-06 10:45