ParallaxNode视差节点实现远景近景的不同层次移动

本文介绍如何使用Cocos2d-x中的ParallaxNode实现类似刀塔传奇游戏背景的视差滚动效果。通过创建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内

 

转载于:https://www.cnblogs.com/alex-zhou/p/4250932.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值