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

简介:

引子

  下了课有点小空,回想起前天的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,  true false );
 
     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的位置。这一点恐怕同学们不难理解,在此就不赘述了。

 

 

 

 

 

 

 

 















本文转自朱先忠老师51CTO博客,原文链接: http://blog.51cto.com/zhuxianzhong/1716084,如需转载请自行联系原作者




相关文章
|
1月前
|
计算机视觉 Python
基于Dlib的人脸识别客户端(UI界面)
基于Dlib的人脸识别客户端(UI界面)
49 2
|
8天前
|
人工智能 API Apache
推荐3款开源、美观且免费的WinForm UI控件库
推荐3款开源、美观且免费的WinForm UI控件库
|
25天前
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发:掌握ArkUI(包括Java UI和JS UI)进行界面开发
【10月更文挑战第22天】随着科技发展,操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI,探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发,性能较高;JS UI适合快速开发简单界面,跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
81 8
|
8天前
|
API C# 开发者
基于Material Design风格开源、免费的WinForms UI控件库
基于Material Design风格开源、免费的WinForms UI控件库!
|
1月前
|
机器学习/深度学习 数据可视化 计算机视觉
基于opencv的车牌识别系统(UI界面采用tkinter设计)
基于opencv的车牌识别系统(UI界面采用tkinter设计)
34 0
|
1月前
|
Linux C# Android开发
分享3款开源、免费的Avalonia UI控件库
分享3款开源、免费的Avalonia UI控件库
132 0
|
3月前
|
编解码 前端开发 vr&ar
从零开始的PICO教程(4)--- UI界面绘制与响应事件
这篇文章是PICO开发系列教程的第四部分,主要介绍了如何在PICO 4 VR环境中创建UI界面,包括Canvas和Panel的配置、UI元素的绘制、以及Button和Slider的事件响应绑定,并通过示例展示了数字增减和滑块功能的具体实现。
从零开始的PICO教程(4)--- UI界面绘制与响应事件
|
2月前
|
XML Android开发 UED
💥Android UI设计新风尚!掌握Material Design精髓,让你的界面颜值爆表!🎨
随着移动应用市场的蓬勃发展,用户对界面设计的要求日益提高。为此,掌握由Google推出的Material Design设计语言成为提升应用颜值和用户体验的关键。本文将带你深入了解Material Design的核心原则,如真实感、统一性和创新性,并通过丰富的组件库及示例代码,助你轻松打造美观且一致的应用界面。无论是色彩搭配还是动画效果,Material Design都能为你的Android应用增添无限魅力。
65 1
|
3月前
|
编解码 Android开发
【Android Studio】使用UI工具绘制,ConstraintLayout 限制性布局,快速上手
本文介绍了Android Studio中使用ConstraintLayout布局的方法,通过创建布局文件、设置控件约束等步骤,快速上手UI设计,并提供了一个TV Launcher界面布局的绘制示例。
58 1
|
3月前
|
C# 开发者 Windows
一款基于Fluent设计风格、现代化的WPF UI控件库
一款基于Fluent设计风格、现代化的WPF UI控件库
下一篇
无影云桌面