cocos2dx[3.4](26)――视差节点ParallaxNode

概述【唠叨】     当我们移动时，我们会看到离我们越近的物体，会移动的越快，越远的物体，比如远处的山会移动的很慢，而最远处的物体，比如太阳几乎不动，这个现象叫视差。     而在游戏中模仿视差，可以让玩家感觉到游戏中的角色的确是在移动。Cocos提供了 ParallaxNode 视差节点类，可以很容易的建立一个视差层，你可以控制每一层的视差率、位置和层级的高低。 【参考】     http://ww

【唠叨】

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

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

【参考】

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

http://www.jb51.cc/article/p-hiekpzsk-qm.html（CCParallaxNode和Tile Map）

http://www.jb51.cc/article/p-sqycnwhz-bav.html（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），做比父节点相对快/慢的移动。**/classCC_DLLParallaxNode:publicNode{public:	//创建视差节点	staticParallaxNode*create();	//添加子节点	//	child:子节点	//	z:zOrder顺序	//	ratio:Vex2(ratioX,ratioY)两个方向上，相对ParallaxNode的移动比率	//	offset:相对ParallaxNode的偏移位置	voIDaddChild(Node*child,intz,constVec2&ratio,constVec2&offset);	//更新子节点位置信息	virtualvoIDvisit(Renderer*renderer,constMat4&parenttransform,uint32_tparentFlags)overrIDe;	//移除子节点	//	child	被删除的子节点。	//	cleanup	true在这个节点上所有的动作和回调都会被删除,false就不会删除。	virtualvoIDremoveChild(Node*child,boolcleanup)overrIDe;	//移除所有子节点	//	cleanup	true在这个节点上所有的动作和回调都会被删除,false就不会删除。	virtualvoIDremoveAllChildrenWithCleanup(boolcleanup)overrIDe;};//

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

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

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

该函数的实现如下：

//	//添加子节点	//	child:子节点	//	z:zOrder顺序	//	ratio:Vex2(ratioX,ratioY)两个方向上，相对ParallaxNode的移动比率	//	offset:相对ParallaxNode的偏移位置	voIDParallaxNode::addChild(Node*child,constVec2&offset)	{		CCASSERT(child!=nullptr,"Argumentmustbenon-nil");		PointObject*obj=PointObject::create(ratio,offset);		obj->setChild(child);		ccArrayAppendobjectWithResize(_parallaxArray,(Ref*)obj);		Vec2pos=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()，该函数的实现如下：

//	//更新子节点位置信息	voIDParallaxNode::visit(Renderer*renderer,uint32_tparentFlags)	{		Vec2pos=this->absoluteposition();		if(!pos.equals(_lastposition))		{			//计算所有孩子相对于ParallaxNode的位置			//注意当我们移动ParallaxNode位置时，表现出来的其实是孩子位置的改变，这种变化是本类的核心设计。			for(inti=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，移动速度快				floatx=-pos.x+pos.x*point->getRatio().x+point->getoffset().x;				floaty=-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、图片素材

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" title="1.png" alt="wKiol1TnMgTRHS6BAABeEwjxAzg671.jpg" src="http://s3.51cto.com/wyfs02/M01/59/CC/wKiol1TnMgTRHS6BAABeEwjxAzg671.jpg">

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

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

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

> ball ：锚点(0.5,80);">视察比率ratio(1,1)，偏移位置offset（屏幕中心点坐标）。

> smile ：视察比率ratio(4,4)，PS：测试对精灵bg，手动设置位置坐标setposition( )。

////[1]可视区域尺寸大小	SizevSize=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)	smile->setname("Smile");//[3]创建ParallaxNode，并添加子节点	//创建视差节点类	ParallaxNode*parallaxNode=ParallaxNode::create();	this->addChild(parallaxNode,"parallaxNode");	//添加子节点	//addChild(node,ratio,offset);	parallaxNode->addChild(bg,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,Vec2(4,4),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 随之移动。

> 触摸结束：输出每个节点的位置信息，看看差别。

//	boolHelloWorld::ontouchBegan(touch*ptouch,Event*pEvent)	{		returntrue;	}	//移动ParallaxNode节点	voIDHelloWorld::ontouchmoved(touch*ptouch,Event*pEvent)	{		Vec2delta=ptouch->getDelta();		//移动ParallaxNode节点		//所有子节点的位置，也会随之改变		ParallaxNode*parallaxNode=(ParallaxNode*)this->getChildByname("parallaxNode");		parallaxNode->setposition(parallaxNode->getposition()+delta);	}	//触摸结束后，输出每个节点的位置信息	voIDHelloWorld::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、运行结果

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" title="1.gif" alt="wKiol1TnOIEjChx-ABW2cm3i2hI264.gif" src="http://s3.51cto.com/wyfs02/M01/59/CC/wKiol1TnOIEjChx-ABW2cm3i2hI264.gif">

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

//	parallax:0.0000000.000000	HelloWorld:0.0000000.000000	ball:240.000000160.000000	smile:0.0000000.000000	---------------------------------------	parallax:101.83644120.723732	HelloWorld:-50.918221-10.361866	ball:240.000000160.000000	smile:305.50933862.171196	---------------------------------------	parallax:19.37831164.557907	HelloWorld:-9.689156-32.278954	ball:240.000000160.000000	smile:58.134933193.673721	---------------------------------------	parallax:-1.778305-81.284264	HelloWorld:0.88915340.642132	ball:240.000000160.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 了吗。

总结

以上是内存溢出为你收集整理的cocos2dx[3.4](26)――视差节点ParallaxNode全部内容，希望文章能够帮你解决cocos2dx[3.4](26)――视差节点ParallaxNode所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。