通常而言当我们移动时,我们会看到离我们越近的物体,会移动的越快,越远的物体,比如远处的山会移动的很慢,而最远处的物体,比如太阳几乎不动,这个现象叫视差。

       而在游戏中模仿视差,可以让玩家感觉到游戏中的角色的确是在移动。Cocos提供了 ParallaxNode 视差节点类,可以很容易的建立一个视差层,你可以控制每一层的视差率、位置和层级的高低。

Cocos2d-x 3.4 版本 视差节点ParallaxNode

【ParallaxNode】

这个类的使用非常简单,只要将想要产生视差效果的节点,都添加为ParallaxNode的子节点,并设置视差率、位置和层级即可。

1、常用函数

ParallaxNode类中自定义的函数,只有如下几个,是对父类Node的相关函数进行重写。

注意:以下重写的函数,不要调用父类Node中相对应的重载函数。即不要调用类似 addChild(child, zOrder, tag) 之类的函数。

核心函数有以下几个:

create()

addChild()

removeChild()

//

/**

* 模拟视差滚动的节点

* 子节点根据视差比率(parallaxRatio),做比父节点相对快/慢的移动。

**/

class CC_DLL ParallaxNode : public Node

{

public:

// 创建视差节点

static ParallaxNode* create();

// 添加子节点

// child : 子节点

// z : zOrder顺序

// ratio : Vex2(ratioX,ratioY) 两个方向上,相对ParallaxNode的移动比率

// offset : 相对ParallaxNode的偏移位置

void addChild(Node * child, int z, const Vec2& ratio, const Vec2& offset);

// 更新子节点位置信息

virtual void visit(Renderer *renderer, const Mat4 &parentTransform, uint32_t parentFlags) override;

// 移除子节点

// child 被删除的子节点。

// cleanup true 在这个节点上所有的动作和回调都会被删除, false 就不会删除。

virtual void removeChild(Node* child, bool cleanup) override;

// 移除所有子节点

// cleanup true 在这个节点上所有的动作和回调都会被删除, false 就不会删除。

virtual void removeAllChildrenWithCleanup(bool cleanup) override;

};

//

2、关于添加子节点:addChild()

在向 ParallaxNode 中添加子节点的时候,添加的方式与父类的Node::addChild()不同。

必须使用重写的addChild()函数,而不要使用父类addChild(Node* child, int z, int tag) 等重载函数。

该函数的实现如下:

//

// 添加子节点

// child : 子节点

// z : zOrder顺序

// ratio : Vex2(ratioX,ratioY) 两个方向上,相对ParallaxNode的移动比率

// offset : 相对ParallaxNode的偏移位置

void ParallaxNode::addChild(Node* child, int z, const Vec2& ratio, const Vec2& offset)

{

CCASSERT( child != nullptr, "Argument must be non-nil");

PointObject *obj = PointObject::create(ratio, offset);

obj->setChild(child);

ccArrayAppendObjectWithResize(_parallaxArray, (Ref*)obj);

Vec2 pos = this->absolutePosition();

// 子节点位置,是根据偏移位置offset,和视差率ratio的计算

pos.x = -pos.x + pos.x * ratio.x + offset.x;

pos.y = -pos.y + pos.y * ratio.y + offset.y;

child->setPosition(pos);

Node::addChild(child, z, child->getName());

}

//

可以发现:子节点的坐标位置(Position)是由偏移位置(offset)和视差比率(ratio)决定的。

PS:这也是为什么添加到 ParallaxNode 的子节点,将无法使用setPosition()来手动设置位置的原因所在。这也许是使用 ParallaxNode 的一个弊端吧。

3、关于更新子节点位置:visit()

在 ParallaxNode 位置发生变化时,所有的子节点的位置也会相对父节点,根据ParallaxNode的位置、offset、以及 ratio 进行计算变化坐标位置。

而位置变化后,调用的函数为visit(),该函数的实现如下:

//

// 更新子节点位置信息

void ParallaxNode::visit(Renderer *renderer, const Mat4 &parentTransform, uint32_t parentFlags)

{

Vec2 pos = this->absolutePosition();

if( ! pos.equals(_lastPosition) )

{

// 计算所有孩子相对于ParallaxNode的位置

// 注意当我们移动ParallaxNode位置时,表现出来的其实是孩子位置的改变,这种变化是本类的核心设计。

for( int i=0; i < _parallaxArray->num; i++ )

{

PointObject *point = (PointObject*)_parallaxArray->arr[i];

// 例如ParallaxNode绝对位置为100,表现出来的是孩子位置为-100,ParallaxNode的移动我们不能感知,但孩子的位置却发生了变化。

// 简单点就是类似于一个摄像头场景的移动,摄像头未动,风景变了

// 如果ratio为(=1) ,则 position == offset

// 如果ratio为(0~1),则 position < offset,移动速度慢

// 如果ratio为(>1) ,则 position > offset,移动速度快

float x = -pos.x + pos.x * point->getRatio().x + point->getOffset().x;

float y = -pos.y + pos.y * point->getRatio().y + point->getOffset().y;

// 孩子的位置是通过上面两行计算出来的

// 因此手动设置其postion不会有任何作用

point->getChild()->setPosition(x,y);

}

_lastPosition = pos;

}

Node::visit(renderer, parentTransform, parentFlags);

}

//

4、子节点的视差效果

将子节点添加到 ParallaxNode,并设置了 偏移位置offset 和 视差比率ratio 之后,ParallaxNode的所有子节点会随着 ParallaxNode 的移动而移动。

子节点移动后的位置是根据:ParallaxNode的位置、offset、以及 ratio 进行计算出来的。

当子节点具有不同的视差比率ratio,在移动过程中,就会出现有些移动的快,有些移动的慢的视差效果。

【代码实战】

0、图片素材


1425435572168048.jpg

1、创建视差节点类,并添加子节点

创建三个子节点,添加到ParallaxNode中。

bg:锚点(0, 0),视察比率ratio(0.5, 0.5),偏移位置offset(0, 0)。

ball:锚点(0.5, 0.5),视察比率ratio(1, 1),偏移位置offset(屏幕中心点坐标)。

smile:锚点(0, 0),视察比率ratio(4, 4),偏移位置offset(0, 0)。

PS:测试对精灵bg,手动设置位置坐标setPosition( )。

//

//[1] 可视区域尺寸大小

Size vSize = Director::getInstance()->getVisibleSize();

//[2] 创建三个子节点

Sprite* bg = Sprite::create("HelloWorld.png");

bg->setAnchorPoint(Vec2(0, 0)); // 锚点(0, 0)

bg->setName("HelloWorld");

//Bug: 在ParallaxNode上的精灵,对其setPosition是无效的

// 具体看运行结果

bg->setPosition(Vec2(100, 100)); // 设置bg的坐标位置

Sprite* ball = Sprite::create("Ball.png");

ball->setAnchorPoint(Vec2(0.5, 0.5)); // 锚点(0.5, 0.5)

ball->setName("Ball");

Sprite* smile = Sprite::create("Smile.png");

smile->setAnchorPoint(Vec2(0, 0)); // 锚点(0, 0)

smile->setName("Smile");

//[3] 创建ParallaxNode,并添加子节点

// 创建视差节点类

ParallaxNode* parallaxNode = ParallaxNode::create();

this->addChild(parallaxNode, 0, "parallaxNode");

// 添加子节点

// addChild(node, zOrder, ratio, offset);

parallaxNode->addChild(bg, 0, Vec2(0.5, 0.5), Vec2(0, 0));

parallaxNode->addChild(ball, 1, Vec2(1, 1), Vec2(vSize.width/2, vSize.height/2));

parallaxNode->addChild(smile, 1, Vec2(4, 4), Vec2(0, 0));

//[4] 添加触摸事件

EventDispatcher* dispatcher = this->getEventDispatcher();

EventListenerTouchOneByOne* listener = EventListenerTouchOneByOne::create();

listener->onTouchBegan = CC_CALLBACK_2(HelloWorld::onTouchBegan, this);

listener->onTouchMoved = CC_CALLBACK_2(HelloWorld::onTouchMoved, this);

listener->onTouchEnded = CC_CALLBACK_2(HelloWorld::onTouchEnded, this);

dispatcher->addEventListenerWithSceneGraphPriority(listener, this);

//

2、实现触摸事件

触摸开始:无操作。

触摸移动:ParallaxNode 随之移动。

触摸结束:输出每个节点的位置信息,看看差别。

//

bool HelloWorld::onTouchBegan(Touch* pTouch, Event* pEvent)

{

return true;

}

// 移动 ParallaxNode 节点

void HelloWorld::onTouchMoved(Touch* pTouch, Event* pEvent)

{

Vec2 delta = pTouch->getDelta();

// 移动 ParallaxNode 节点

// 所有子节点的位置,也会随之改变

ParallaxNode* parallaxNode = (ParallaxNode*)this->getChildByName("parallaxNode");

parallaxNode->setPosition(parallaxNode->getPosition() + delta);

}

// 触摸结束后,输出每个节点的位置信息

void HelloWorld::onTouchEnded(Touch* pTouch, Event* pEvent)

{

ParallaxNode* parallaxNode = (ParallaxNode*)this->getChildByName("parallaxNode");

// 按名称获取子节点

Sprite* bg = (Sprite*)parallaxNode->getChildByName("HelloWorld");

Sprite* ball = (Sprite*)parallaxNode->getChildByName("Ball");

Sprite* smile = (Sprite*)parallaxNode->getChildByName("Smile");

// 输出坐标位置信息

CCLOG("parallax : %f %f", parallaxNode->getPositionX(), parallaxNode->getPositionY());

CCLOG("HelloWorld : %f %f", bg->getPositionX(), bg->getPositionY());

CCLOG("ball : %f %f", ball->getPositionX(), ball->getPositionY());

CCLOG("smile : %f %f", smile->getPositionX(), smile->getPositionY());

CCLOG("---------------------------------------");

}

//

3、运行结果


wKioL1TnOiejChx-ABW2cm3i2hI264.gif

移动过程中,输出的数据结果为:

//

parallax : 0.000000 0.000000

HelloWorld : 0.000000 0.000000

ball : 240.000000 160.000000

smile : 0.000000 0.000000

---------------------------------------

parallax : 101.836441 20.723732

HelloWorld : -50.918221 -10.361866

ball : 240.000000 160.000000

smile : 305.509338 62.171196

---------------------------------------

parallax : 19.378311 64.557907

HelloWorld : -9.689156 -32.278954

ball : 240.000000 160.000000

smile : 58.134933 193.673721

---------------------------------------

parallax : -1.778305 -81.284264

HelloWorld : 0.889153 40.642132

ball : 240.000000 160.000000

smile : -5.334915 -243.852783

---------------------------------------

//

4、数据分析

(0)HelloWorld:在一开始设置了setPosition(),可是是无效的。因为它的坐标只受到 ratio、offset的影响。

(1)HelloWorld :移动的过程中,为什么坐标变成了负的了?这是因为子节点的坐标是相对ParallaxNode的偏移位置。因为HelloWorld的视差比率为0.5倍,所以当parallaxNode移动了100个像素点,那么HelloWorld只移动了50个像素点。所以它相对于parallaxNode的偏移位置就是 -50 了。

(2)ball:移动过程中,坐标位置都没有改变。因为它的视差比率为1.0倍,所以parallaxNode移动了多少,ball也移动了多少。所以ball相对parallaxNode的位置还是原来的 偏移位置。

(3)smile:这个移动的很快,视差比率为4.0倍。可是为什么它的坐标位置一直是parallaxNode的3倍呢???呵呵,因为parallaxNode移动了100个像素点,而它移动了400个像素点,那么它相对于parallaxNode坐标的位置不就是400-100 = 300 了吗。