让Cocos Studio 2.3.2制作UI界面中控件支持运行3d动作特效的间接途径
2017-02-08 00:00
561 查看
引子
下了课有点小空,回想起前天的Studio中UI控件的3D动作问题,还是有点放心不下,毕竟3D高级动作特效是一件游戏开发的“法宝”。在仔细地研究了Waves3D等3D高级动作特效之后,我找到了一种如本文标题所示的间接途径。有兴趣的朋友可以参考一下。
实现过程记录
先上图,下图给出的是我的教学游戏中游戏中启动场景在cocosStudio2.3.2中的截图,同学们可以注意我在图中标记的部分。
显然,在上图中,我在原先的Cocos2d-x2.x(结合早期的CocoStudio2.4.0.1)环境下可以很轻松地让按钮Button_Start运行Waves3D动作。但是,由于当前的Waves3D动作要求运行此动作者必须是NodeGrid类型,而上面的按钮继承自Widget,Widget又继承自ProtectedNode,所以以前的代码在运行到下面相应的运行Waves3D动作代码时抛出异常。
在不甘心之余,我又分析起cpp-tests中的相关代码。主要参考文件是EffectsAdvancedTest.cpp,相关代码也不少,主要参考如下代码:
注意:_target1和_target2这两个变量类型都是NodeGrid类型指针。
显然,如果我的Button_Start是NodeGrid类型子类,那么一切就OK了,但恰恰不是。
接下来,我又分析如下图实例。
此实例介绍的是在Studio创建的Widget控件中动态在向场景添加一般的Node的方案。关键代码如下所示:
大家注意最后一句!!!
接下来,我又想到如今的Studio中可以很容易地在Widget控件中加入Sprite子结点,如下图所示。
上面这幅图至关重要。
Sprite_1的默认锚点是(0.5,0.5),而上面那个Button的锚点也是(0.5,0.5)。只是Sprite_1的坐标是(0,0)。显然,这是相对其父的相对坐标,如果你仔细观察(上图中没有),你当然会注意到那个Button的坐标,也就是相对整个场景的世界坐标。
解决方案
根据上面几个代码的综合分析,我们可以给Widget添加NodeGrid子结点,然后再给NodeGrid添加Sprite结点,并调整NodeGrid在其父结点下的相对坐标位置。最后,让NodeGrid运行Waves3D这种特效动作即可。
在我的上述示例中,相关答案代码如下:
小结与补充
大家看,上面的确拐了一个弯,但终究是实现了我们的渴望已久的动画效果。归纳来看,还有一个需要补充的部分:使用上述方案的话,在Studio设计时刻只能使用一些临时的占位符方法了,例如一个1*1像素的精灵图片先占住Button的位置。这一点恐怕同学们不难理解,在此就不赘述了。
登录乐搏学院官网http://www.learnbo.com/
或关注我们的官方微博微信,还有更多惊喜哦~
本文出自“青峰”博客,请务必保留此出处http://zhuxianzhong.blog.51cto.com/157061/1716084
下了课有点小空,回想起前天的Studio中UI控件的3D动作问题,还是有点放心不下,毕竟3D高级动作特效是一件游戏开发的“法宝”。在仔细地研究了Waves3D等3D高级动作特效之后,我找到了一种如本文标题所示的间接途径。有兴趣的朋友可以参考一下。
实现过程记录
先上图,下图给出的是我的教学游戏中游戏中启动场景在
显然,在上图中,我在原先的Cocos2d-x2.x(结合早期的CocoStudio2.4.0.1)环境下可以很轻松地让按钮Button_Start运行Waves3D动作。但是,由于当前的Waves3D动作要求运行此动作者必须是NodeGrid类型,而上面的按钮继承自Widget,Widget又继承自ProtectedNode,所以以前的代码在运行到下面相应的运行Waves3D动作代码时抛出异常。
1 2 3 |
1 2 3 4 5 6 7 8 9 |
显然,如果我的Button_Start是NodeGrid类型子类,那么一切就OK了,但恰恰不是。
接下来,我又分析如下图实例。
此实例介绍的是在Studio创建的Widget控件中动态在向场景添加一般的Node的方案。关键代码如下所示:
1 2 3 4 5< 3ff0 /p>6 7 8 9 10 11 12 13 |
接下来,我又想到如今的Studio中可以很容易地在Widget控件中加入Sprite子结点,如下图所示。
上面这幅图至关重要。
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 |
大家看,上面的确拐了一个弯,但终究是实现了我们的渴望已久的动画效果。归纳来看,还有一个需要补充的部分:使用上述方案的话,在Studio设计时刻只能使用一些临时的占位符方法了,例如一个1*1像素的精灵图片先占住Button的位置。这一点恐怕同学们不难理解,在此就不赘述了。
登录乐搏学院官网
或关注我们的官方微博
本文出自“
相关文章推荐
- 让Cocos Studio 2.3.2制作UI界面中控件支持运行3d动作特效的间接途径
- 用Cocos Studio 2.3.2制作UI界面中控件不再支持运行3d动作特效
- 用Cocos Studio 2.3.2制作UI界面中控件不再支持运行3d动作特效
- Cocos v2.2.5 发布-手机一键发布,支持3D控件扩展
- 支持2D/3D矢量图形处理控件VectorDraw v7.7006.1.0发布
- MATLAB 3D 动画制作(二)- 3D 动画动作设计
- Unity 3d之NGUI【特效制作 1】 制作血条,能量条
- 使用ActiveMovie控件制作多媒体播放器(支持MP3,WAV,dat,wma,mpeg,avi等)
- office2007:您正试图运行的函数包含有宏或需要宏语言支持的内容。而在安装此软件时,您(或您的管理员)选择了不安装宏或控件的支持功能
- [抢鲜翻译]Adobe实验室新品:支持3D硬件加速以及立方贝赛尔曲线绘制的预览版运行时——Incubator
- AE特效-与MAYA的结合、制作音乐舞蹈太极动作
- CSS3特效----制作3D旋转照片展示区
- PowerTalk控件 制作 即时通信 聊天室 产品咨询系统 支持与MSN的控件
- 视频特效制作:如何给视频添加边框、水印、动画以及3D效果
- Silverlight开发历程—利用MatrixTransform特效制作3D盒子
- 支持2D/3D矢量图形处理控件VectorDraw v7.7006.1.0发布
- Silverlight开发历程—利用MatrixTransform特效制作3D盒子
- 视频特效制作:如何给视频添加边框、水印、动画以及3D效果
- 超炫CSS3过渡及3D立体动作特效演示案例
- 【初学】UI控件学习笔记-UILable制作打字机特效(lable+array+timer+动态string)