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内
相关文章
相关标签/搜索