cocos2dx[3.4](26)——視差節(jié)點(diǎn)ParallaxNode

【嘮叨】

    當(dāng)我們移動(dòng)時(shí)，我們會(huì)看到離我們?cè)浇奈矬w，會(huì)移動(dòng)的越快，越遠(yuǎn)的物體，比如遠(yuǎn)處的山會(huì)移動(dòng)的很慢，而最遠(yuǎn)處的物體，比如太陽(yáng)幾乎不動(dòng)，這個(gè)現(xiàn)象叫視差。

    而在游戲中模仿視差，可以讓玩家感覺到游戲中的角色的確是在移動(dòng)。Cocos提供了 ParallaxNode 視差節(jié)點(diǎn)類，可以很容易的建立一個(gè)視差層，你可以控制每一層的視差率、位置和層級(jí)的高低。

【參考】

    http://www.cocoachina.com/bbs/read.php?tid=213748 （無限視差節(jié)點(diǎn)+陰影仿真）

    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】

    這個(gè)類的使用非常簡(jiǎn)單，只要將想要產(chǎn)生視差效果的節(jié)點(diǎn)，都添加為ParallaxNode的子節(jié)點(diǎn)，并設(shè)置視差率、位置和層級(jí)即可。

1、常用函數(shù)

    ParallaxNode類中自定義的函數(shù)，只有如下幾個(gè)，是對(duì)父類Node的相關(guān)函數(shù)進(jìn)行重寫。

    注意：以下重寫的函數(shù)，不要調(diào)用父類Node中相對(duì)應(yīng)的重載函數(shù)。即不要調(diào)用類似 addChild(child, zOrder, tag) 之類的函數(shù)。

    核心函數(shù)有以下幾個(gè)：

        > create()

        > addChild()

        > removeChild()

//
/** 
 *	模擬視差滾動(dòng)的節(jié)點(diǎn)
 *	子節(jié)點(diǎn)根據(jù)視差比率（parallaxRatio），做比父節(jié)點(diǎn)相對(duì)快/慢的移動(dòng)。
 **/
class CC_DLL ParallaxNode : public Node
{
public:
	// 創(chuàng)建視差節(jié)點(diǎn)
	static ParallaxNode* create();

	// 添加子節(jié)點(diǎn)
	//	child  : 子節(jié)點(diǎn)
	//	z      : zOrder順序
	//	ratio  : Vex2(ratioX,ratioY) 兩個(gè)方向上，相對(duì)ParallaxNode的移動(dòng)比率
	// 	offset : 相對(duì)ParallaxNode的偏移位置
	void addChild(Node * child, int z, const Vec2& ratio, const Vec2& offset);


	// 更新子節(jié)點(diǎn)位置信息
	virtual void visit(Renderer *renderer, const Mat4 &parentTransform, uint32_t parentFlags) override;

	// 移除子節(jié)點(diǎn)
	//	child	被刪除的子節(jié)點(diǎn)。
	//	cleanup	true 在這個(gè)節(jié)點(diǎn)上所有的動(dòng)作和回調(diào)都會(huì)被刪除, false 就不會(huì)刪除。
	virtual void removeChild(Node* child, bool cleanup) override;

	// 移除所有子節(jié)點(diǎn)
	//	cleanup	true 在這個(gè)節(jié)點(diǎn)上所有的動(dòng)作和回調(diào)都會(huì)被刪除, false 就不會(huì)刪除。
	virtual void removeAllChildrenWithCleanup(bool cleanup) override;
};
//

2、關(guān)于添加子節(jié)點(diǎn)：addChild()

    在向 ParallaxNode 中添加子節(jié)點(diǎn)的時(shí)候，添加的方式與父類的Node::addChild()不同。

    必須使用重寫的addChild()函數(shù)，而不要使用父類addChild(Node* child, int z, int tag) 等重載函數(shù)。

    該函數(shù)的實(shí)現(xiàn)如下：

//
	// 添加子節(jié)點(diǎn)
	//	child  : 子節(jié)點(diǎn)
	//	z      : zOrder順序
	//	ratio  : Vex2(ratioX,ratioY) 兩個(gè)方向上，相對(duì)ParallaxNode的移動(dòng)比率
	// 	offset : 相對(duì)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();
		// 子節(jié)點(diǎn)位置，是根據(jù)偏移位置offset，和視差率ratio的計(jì)算
		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());
	}
//

    可以發(fā)現(xiàn)：子節(jié)點(diǎn)的坐標(biāo)位置（Position）是由偏移位置（offset）和視差比率（ratio）決定的。

    PS：這也是為什么添加到 ParallaxNode 的子節(jié)點(diǎn)，將無法使用setPosition()來手動(dòng)設(shè)置位置的原因所在。這也許是使用 ParallaxNode 的一個(gè)弊端吧。

3、關(guān)于更新子節(jié)點(diǎn)位置：visit()

    在 ParallaxNode 位置發(fā)生變化時(shí)，所有的子節(jié)點(diǎn)的位置也會(huì)相對(duì)父節(jié)點(diǎn)，根據(jù)ParallaxNode的位置、offset、以及 ratio 進(jìn)行計(jì)算變化坐標(biāo)位置。

    而位置變化后，調(diào)用的函數(shù)為visit()，該函數(shù)的實(shí)現(xiàn)如下：

//
	// 更新子節(jié)點(diǎn)位置信息
	void ParallaxNode::visit(Renderer *renderer, const Mat4 &parentTransform, uint32_t parentFlags)
	{
		Vec2 pos = this->absolutePosition();
		if( ! pos.equals(_lastPosition) )
		{
			// 計(jì)算所有孩子相對(duì)于ParallaxNode的位置
			// 注意當(dāng)我們移動(dòng)ParallaxNode位置時(shí)，表現(xiàn)出來的其實(shí)是孩子位置的改變，這種變化是本類的核心設(shè)計(jì)。  
			for( int i=0; i < _parallaxArray->num; i++ )
			{
				PointObject *point = (PointObject*)_parallaxArray->arr[i];
				// 例如ParallaxNode絕對(duì)位置為100，表現(xiàn)出來的是孩子位置為-100，ParallaxNode的移動(dòng)我們不能感知，但孩子的位置卻發(fā)生了變化。 
				// 簡(jiǎn)單點(diǎn)就是類似于一個(gè)攝像頭場(chǎng)景的移動(dòng)，攝像頭未動(dòng)，風(fēng)景變了  
				// 如果ratio為（=1） ，則 position == offset  
				// 如果ratio為（0~1），則 position <  offset，移動(dòng)速度慢
				// 如果ratio為（>1） ，則 position >  offset，移動(dòng)速度快
				float x = -pos.x + pos.x * point->getRatio().x + point->getOffset().x;
				float y = -pos.y + pos.y * point->getRatio().y + point->getOffset().y;

				// 孩子的位置是通過上面兩行計(jì)算出來的
				// 因此手動(dòng)設(shè)置其postion不會(huì)有任何作用
				point->getChild()->setPosition(x,y);
			}
			_lastPosition = pos;
		}
		Node::visit(renderer, parentTransform, parentFlags);
	}
//

4、子節(jié)點(diǎn)的視差效果

    將子節(jié)點(diǎn)添加到 ParallaxNode，并設(shè)置了 偏移位置offset 和 視差比率ratio 之后，ParallaxNode的所有子節(jié)點(diǎn)會(huì)隨著 ParallaxNode 的移動(dòng)而移動(dòng)。

    子節(jié)點(diǎn)移動(dòng)后的位置是根據(jù)：ParallaxNode的位置、offset、以及 ratio 進(jìn)行計(jì)算出來的。

    當(dāng)子節(jié)點(diǎn)具有不同的視差比率ratio，在移動(dòng)過程中，就會(huì)出現(xiàn)有些移動(dòng)的快，有些移動(dòng)的慢的視差效果。

【代碼實(shí)戰(zhàn)】

0、圖片素材

1、創(chuàng)建視差節(jié)點(diǎn)類，并添加子節(jié)點(diǎn)

    創(chuàng)建三個(gè)子節(jié)點(diǎn)，添加到ParallaxNode中。

        > bg    ：錨點(diǎn)(0, 0)，視察比率ratio(0.5, 0.5)，偏移位置offset(0, 0)。

        > ball   ：錨點(diǎn)(0.5, 0.5)，視察比率ratio(1, 1)，偏移位置offset（屏幕中心點(diǎn)坐標(biāo)）。

        > smile ：錨點(diǎn)(0, 0)，視察比率ratio(4, 4)，偏移位置offset(0, 0)。

    PS：測(cè)試對(duì)精靈bg，手動(dòng)設(shè)置位置坐標(biāo)setPosition( )。

//
//[1] 可視區(qū)域尺寸大小
	Size vSize = Director::getInstance()->getVisibleSize();

//[2] 創(chuàng)建三個(gè)子節(jié)點(diǎn)
	Sprite* bg = Sprite::create("HelloWorld.png");
	bg->setAnchorPoint(Vec2(0, 0)); // 錨點(diǎn)(0, 0)
	bg->setName("HelloWorld");

	//Bug: 在ParallaxNode上的精靈，對(duì)其setPosition是無效的
	//     具體看運(yùn)行結(jié)果
	bg->setPosition(Vec2(100, 100)); // 設(shè)置bg的坐標(biāo)位置

	Sprite* ball = Sprite::create("Ball.png");
	ball->setAnchorPoint(Vec2(0.5, 0.5)); // 錨點(diǎn)(0.5, 0.5)
	ball->setName("Ball");

	Sprite* smile = Sprite::create("Smile.png");
	smile->setAnchorPoint(Vec2(0, 0)); // 錨點(diǎn)(0, 0)
	smile->setName("Smile");

//[3] 創(chuàng)建ParallaxNode，并添加子節(jié)點(diǎn)
	// 創(chuàng)建視差節(jié)點(diǎn)類
	ParallaxNode* parallaxNode = ParallaxNode::create();
	this->addChild(parallaxNode, 0, "parallaxNode");

	// 添加子節(jié)點(diǎn)
	//  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、實(shí)現(xiàn)觸摸事件

    > 觸摸開始：無操作。

    > 觸摸移動(dòng)：ParallaxNode 隨之移動(dòng)。

    > 觸摸結(jié)束：輸出每個(gè)節(jié)點(diǎn)的位置信息，看看差別。

//
	bool HelloWorld::onTouchBegan(Touch* pTouch, Event* pEvent)
	{
		return true;
	}

	// 移動(dòng) ParallaxNode 節(jié)點(diǎn)
	void HelloWorld::onTouchMoved(Touch* pTouch, Event* pEvent)
	{
		Vec2 delta = pTouch->getDelta();
		// 移動(dòng) ParallaxNode 節(jié)點(diǎn)
		// 所有子節(jié)點(diǎn)的位置，也會(huì)隨之改變
		ParallaxNode* parallaxNode = (ParallaxNode*)this->getChildByName("parallaxNode");
		parallaxNode->setPosition(parallaxNode->getPosition() + delta);
	}

	// 觸摸結(jié)束后，輸出每個(gè)節(jié)點(diǎn)的位置信息
	void HelloWorld::onTouchEnded(Touch* pTouch, Event* pEvent)
	{
		ParallaxNode* parallaxNode = (ParallaxNode*)this->getChildByName("parallaxNode");
		// 按名稱獲取子節(jié)點(diǎn)
		Sprite* bg = (Sprite*)parallaxNode->getChildByName("HelloWorld");
		Sprite* ball = (Sprite*)parallaxNode->getChildByName("Ball");
		Sprite* smile = (Sprite*)parallaxNode->getChildByName("Smile");

		// 輸出坐標(biāo)位置信息
		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、運(yùn)行結(jié)果

    移動(dòng)過程中，輸出的數(shù)據(jù)結(jié)果為：

//
	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、數(shù)據(jù)分析

    （0）HelloWorld：在一開始設(shè)置了setPosition()，可是是無效的。因?yàn)樗淖鴺?biāo)只受到 ratio、offset的影響。

    （1）HelloWorld ：移動(dòng)的過程中，為什么坐標(biāo)變成了負(fù)的了？這是因?yàn)樽庸?jié)點(diǎn)的坐標(biāo)是相對(duì)ParallaxNode的偏移位置。因?yàn)镠elloWorld的視差比率為0.5倍，所以當(dāng)parallaxNode移動(dòng)了100個(gè)像素點(diǎn)，那么HelloWorld只移動(dòng)了50個(gè)像素點(diǎn)。所以它相對(duì)于parallaxNode的偏移位置就是 -50 了。

    （2）ball ：移動(dòng)過程中，坐標(biāo)位置都沒有改變。因?yàn)樗囊暡畋嚷蕿?.0倍，所以parallaxNode移動(dòng)了多少，ball也移動(dòng)了多少。所以ball相對(duì)parallaxNode的位置還是原來的 偏移位置。

    （3）smile ：這個(gè)移動(dòng)的很快，視差比率為4.0倍?？墒?span >為什么它的坐標(biāo)位置一直是parallaxNode的3倍呢？？？呵呵，因?yàn)閜arallaxNode移動(dòng)了100個(gè)像素點(diǎn)，而它移動(dòng)了400個(gè)像素點(diǎn)，那么它相對(duì)于parallaxNode坐標(biāo)的位置不就是400-100 = 300 了嗎。