cocos2dx[3.x](15)——视差节点ParallaxNode

【唠叨】

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

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

 

【参考】

    http://www.cocoachina.com/bbs/read.php?tid=213748 （无限视差节点+阴影仿真）

    http://blog.csdn.net/volcan1987/article/details/7791018 （CCParallaxNode和Tile Map）

    http://blog.csdn.net/xiadasong007/article/details/8157274 （CCParallaxNode源码分析）

 

【Demo下载】

    https://github.com/shahdza/Cocos_LearningTest/tree/master/demo_%E8%A7%86%E5%B7%AE%E8%8A%82%E7%82%B9Parallax 

 

---

 

【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、图片素材

 

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、运行结果

 

    移动过程中，输出的数据结果为：

//
	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 了吗。