文档章节

让Cocos Studio 2.3.2制作UI界面中控件支持运行3d动作特效的间接途径

乐搏学院
 乐搏学院
发布于 2017/02/08 10:57
字数 1010
阅读 89
收藏 0

引子

  下了课有点小空,回想起前天的Studio中UI控件的3D动作问题,还是有点放心不下,毕竟3D高级动作特效是一件游戏开发的“法宝”。在仔细地研究了Waves3D等3D高级动作特效之后,我找到了一种如本文标题所示的间接途径。有兴趣的朋友可以参考一下。

 

实现过程记录

 

先上图,下图给出的是我的教学游戏中游戏中启动场景在cocos Studio 2.3.2中的截图,同学们可以注意我在图中标记的部分。

wKiom1ZS3AmSoTeXAAIVeBRu8Ak752.jpg

  显然,在上图中,我在原先的Cocos2d-x 2.x(结合早期的CocoStudio 2.4.0.1)环境下可以很轻松地让按钮Button_Start运行Waves3D动作。但是,由于当前的Waves3D动作要求运行此动作者必须是NodeGrid类型,而上面的按钮继承自Widget,Widget又继承自ProtectedNode,所以以前的代码在运行到下面相应的运行Waves3D动作代码时抛出异常。

1

2

3

 CCActionInterval* waves1 = CCWaves3D::create(10, CCSizeMake(15,10), 18, 5);

 

 Button_Start->runAction(CCRepeatForever::create(waves1));

 

在不甘心之余,我又分析起cpp-tests中的相关代码。主要参考文件是EffectsAdvancedTest.cpp,相关代码也不少,主要参考如下代码:

1

2

3

4

5

6

7

8

9

    auto waves = Waves::create(5, Size(15,10), 5, 20, truefalse);

 

    auto shaky = Shaky3D::create(5, Size(15,10), 4, false);

 

     

 

    _target1->runAction( RepeatForever::create( waves ) );

 

    _target2->runAction( RepeatForever::create( shaky ) );

注意:_target1和_target2这两个变量类型都是NodeGrid类型指针。

显然,如果我的Button_Start是NodeGrid类型子类,那么一切就OK了,但恰恰不是。

 

接下来,我又分析如下图实例。

wKiom1ZS3tnT2mgLAAFZyqbAfgE466.jpg

此实例介绍的是在Studio创建的Widget控件中动态在向场景添加一般的Node的方案。关键代码如下所示:

1

2

3

4

5

6

7

8

9

10

11

12

13

void UIWidgetAddNodeTest_Editor::configureGUIScene()

{

    UIScene_Editor::configureGUIScene();

    Size rootSize = _layout->getContentSize();

    // Create the ui widget

    Widget* widget = Widget::create();

    widget->setPosition(Vec2(rootSize.width / 2.0f, rootSize.height / 2.0f));

    widget->setLocalZOrder(_layout->getLocalZOrder() + 1);

    _layout->addChild(widget);

     

    Sprite* sprite = Sprite::create("cocosui/ccicon.png");

    widget->addChild(sprite);

}

大家注意最后一句!!!

 

接下来,我又想到如今的Studio中可以很容易地在Widget控件中加入Sprite子结点,如下图所示。

wKioL1ZS4DeRkV5xAAKQo93_oQs548.jpg

  上面这幅图至关重要。

  Sprite_1的默认锚点是(0.5,0.5),而上面那个Button的锚点也是(0.5,0.5)。只是Sprite_1的坐标是(0,0)。显然,这是相对其父的相对坐标,如果你仔细观察(上图中没有),你当然会注意到那个Button的坐标,也就是相对整个场景的世界坐标。

 

解决方案

 

根据上面几个代码的综合分析,我们可以给Widget添加NodeGrid子结点,然后再给NodeGrid添加Sprite结点,并调整NodeGrid在其父结点下的相对坐标位置。最后,让NodeGrid运行Waves3D这种特效动作即可。

在我的上述示例中,相关答案代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

 Button* Button_Start = static_cast<Button*>(Helper::seekWidgetByName(Panel_Back, "Button_Start"));

 

 NodeGrid *_bgNode = NodeGrid::create();

 

 //经测试,与下面的锚点坐标没有关系//

 

 _bgNode->setAnchorPoint(Vec2(0.5, 0.5));

 

 Button_Start->addChild(_bgNode);

 

 auto bg = Sprite::create("Images/backbtnnormal.png");

 

 _bgNode->addChild(bg);

 

 _bgNode->setPosition(Vec2(Button_Start->getBoundingBox().size.width / 2, Button_Start->getBoundingBox().size.height / 2));

 

 ActionInterval* waves1 = Waves3D::create(10, CCSizeMake(15, 10), 18, 5);

 

 _bgNode->runAction(CCRepeatForever::create(waves1));

小结与补充

  大家看,上面的确拐了一个弯,但终究是实现了我们的渴望已久的动画效果。归纳来看,还有一个需要补充的部分:使用上述方案的话,在Studio设计时刻只能使用一些临时的占位符方法了,例如一个1*1像素的精灵图片先占住Button的位置。这一点恐怕同学们不难理解,在此就不赘述了。

 

 

登录乐搏学院官网http://www.learnbo.com/

或关注我们的官方微博微信,还有更多惊喜哦~

 

本文出自 “青峰” 博客,请务必保留此出处http://zhuxianzhong.blog.51cto.com/157061/1716084

© 著作权归作者所有

乐搏学院
粉丝 9
博文 526
码字总数 707467
作品 0
丰台
程序员
私信 提问
购买李宁Cocos2d-x套餐,送最新出的《Cocos2d-x游戏实战指南》签名书一本

活动时间:2016-10-18至2016-11-30 通过本套餐,可完全了解Cocos2d-x 3.x的相关技术,以及掌握C++语言,并具有一定的项目实战经验。 Cocos2d-x游戏开发套餐:http://edu.51cto.com/pack/vie...

androidguy
2018/06/29
0
0
Cocos2d-x Lua中网格动作

GridAction它有两个主要的子类Grid3DAction和TiledGrid3DAction,TiledGrid3DAction系列的子类中会有瓦片效果,如下图所示是Waves3D特效(Grid3DAction子类),如后图所示是WavesTiles3D特效...

智捷课堂
2015/05/19
96
0
会议纪要-03.28.2015

杨祁博: 01.推塔部分工作全部完成 卢凯庆: 01.搭建主城和主界面UI部分 雷 鹏: 01.解决UI界面和特效的层级显示 02.熟悉项目战斗系统 吴光远: 01.竞技场规则调整 02.美术需求 张晓秋: 01...

索亚之息
2015/03/28
4
0
会议纪要-03.27.2015

曾艳明: 01.完成竞技场排行榜功能 杨祁博: 01.完成推塔预览部分 02.战斗部分整合 卢凯庆: 01.搭建竞技场UI部分 雷 鹏: 01.完成数据加载 02.熟悉主界面逻辑 吴光远: 01.战斗部分优化(规...

索亚之息
2015/03/27
4
0
Cocos2d-x Lua中实例:特效演示

下面我们通过一个实例介绍几个特效的使用,这个实例如下图所示,上图是一个操作菜单场景,选择菜单可以进入到下图动作场景,在下图动作场景中点击Go按钮可以执行我们选择的特性动作,点击Bac...

智捷课堂
2015/05/20
90
0

没有更多内容

加载失败,请刷新页面

加载更多

UAVStack功能上新:新增JVM监控分析工具

UAVStack推出的JVM监控分析工具提供基于页面的展现方式,以图形化的方式展示采集到的监控数据;同时提供JVM基本参数获取、内存dump、线程分析、内存分配采样和热点方法分析等功能。 引言 作为...

宜信技术学院
8分钟前
1
0
MySQL的5种时间类型的比较

日期时间类型 占用空间 日期格式 最小值 最大值 零值表示 DATETIME 8 bytes YYYY-MM-DD HH:MM:SS 1000-01-01 00:00:00 9999-12-31 23:59:59 0000-00-00 00:00:00 TIMESTAMP 4 bytes YYYY-MM......

物种起源-达尔文
15分钟前
3
0
云服务OpenAPI的7大挑战,架构师如何应对?

阿里妹导读:API 是模块或者子系统之间交互的接口定义。好的系统架构离不开好的 API 设计,而一个设计不够完善的 API 则注定会导致系统的后续发展和维护非常困难。比较好的API设计样板可以参...

阿里云官方博客
19分钟前
1
0
Rancher + VMware PKS实现全球数百站点的边缘K8S集群管理

Sovereign Systems是一家成立于2007年的技术咨询公司,帮助客户将传统数据中心技术和应用程序转换为更高效的、基于云的技术平台,以更好地应对业务挑战。曾连续3年提名CRN,并且在2012年到2...

RancherLabs
23分钟前
2
0
6、根据坐标,判断该坐标是否在地图区域范围内

最近在写配送区域相关的代码,具体需求如下: 根据腾讯地图划分配送区域,总站下边设多个配送分站,然后将订单中的收货地址将其分配给不同的配送分站。 1、地图区域划分(腾讯地图) 1.1、H...

有一个小阿飞
25分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部