ParallaxNode視差節點實現遠景近景的不同層次移動

Cocos2d-x有ParallaxNode視差節點，視察顧名思義，就是造成不同的移動速率的效果。

我想大家都玩過刀塔傳奇，他的背景有遠景和近景之分，而且你滑動屏幕的時候遠景和近景是按照不同的速率移動的；

今天我們就來實現這個效果。

關鍵詞：ScrollView , ParallaxNode

要滑動肯定需要ScrollView了，我們一般都會用cocostudio去構建一個ScrollViewd的組件，在cocostudio裏面設置好各種我們需要的屬性，導入工程裏面就可以直接滑動了；

cocos2d-x 3.2讀取cocostudio項目接口發生了不小的變化，cocostudio畫了一個scrollView，讀入項目；

    auto rootNode =cocostudio::timeline::NodeReader::getInstance()->createNode("ScrollViewTest_1/ScrollViewTest_1.ExportJson");

rootNode相當於一個layer，我們需要取到ScrollView來進行控制；

1 auto child = rootNode->getChildByTag(9);
2     auto scroll = static_cast<ScrollView *>(child);
3     scroll->setParent(nullptr);    //
4     auto visiableSize = Director::getInstance()->getVisibleSize();
5     scroll->setContentSize(visiableSize);   //讓ScrollView的可視範圍和屏幕大小一樣，否則會出現適配問題；

這裏需要注意的是，ScrollView的可視區域大小和可滑動區域大小的概念，可視區域相當於一個窗口，ScrollView的可滑動區域要大於可視區域，這樣纔有滑動的效果；現在我們ScrollView已經準備好了。下面需要創建ParallaxNode：

 1     auto bg1 = Sprite::create("HelloWorld.png");
 2     auto bg2 = Sprite::create("HelloWorld.png");
 3     auto sprite = Sprite::create("CloseNormal.png");
 4     
 5     parallax = ParallaxNode::create();
 6     parallax->addChild(bg1, 1, Vec2(0.5f, 0), Vec2(100, 50));//第二個參數是zorder，第三個參數表示移動速度，第三個參數代表Child的相對位置
 7     parallax->addChild(bg2, 1, Vec2(0.5f, 0), Vec2(bg1->getContentSize().width, 50));
 8     parallax->addChild(sprite, 2, Vec2(1.1, 0), Vec2(400, 300));
 9     //this->addChild(parallax);
10     scroll->addChild(parallax); //最後要把視差節點放入Scrollview內