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

Cocos2d-x有ParallaxNode視差節點,視察顧名思義,就是形成不一樣的移動速率的效果。this

我想你們都玩過刀塔傳奇,他的背景有遠景和近景之分,並且你滑動屏幕的時候遠景和近景是按照不一樣的速率移動的;spa

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

關鍵詞:ScrollView , ParallaxNodeorm

要滑動確定須要ScrollView了,咱們通常都會用cocostudio去構建一個ScrollViewd的組件,在cocostudio裏面設置好各類咱們須要的屬性,導入工程裏面就能夠直接滑動了;blog

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

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

rootNode至關於一個layer,咱們須要取到ScrollView來進行控制;get

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:it

 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內
相關文章
相關標籤/搜索