FairyGUI-Cocos Creator官方Demo源码解读

news/2025/2/21 8:42:50/

博主在学习Cocos Creator的时候,发现了一款免费的UI编辑器FairyGUI。这款编辑器的能力十分强大,但是网上的学习资源比较少,坑比较多,主要学习方式就是阅读官方文档和练习官方Demo。这里博主进行官方Demo的解读。

从gitee上克隆项目到本地,用cocos打开后,发现场景里只有一个DemoEnter,并且项目目录很干净。

用vscode打开DemoEnter上挂载的脚本。

进来之后是这个页面。可以看到目录旁边有很多Ts文件。首先我们从DemoEntry开始解读,因为这是项目启动的入口。

在DemoEntry(以下简称DE)的onLoad生命周期函数中,首先创建了GRoot这个节点。

所有FairyGUI创建的UI都是以组件的形式存在的。其中场景组件挂载到GRoot这个节点之下。

之后在当前节点开启了“start_demo”的事件监听。那么“start_demo”是什么事件呢?

我们在创建复杂游戏UI界面的时候,或者制作中大型游戏的时候,都需要自己写一套事件系统,或者更大一点,游戏框架。这样可以使我们的游戏逻辑清晰,运行更加稳定,减少重复代码的编写。

官方Demo就制作了一个简单的事件系统。我们先略过start_demo这个事件。

在onLoad函数最后,在当前节点添加了一个组件MainMenu,先进入MainMenu文件看看究竟。

在MainMenu文件中,首先导入了大量的其他组件。我们可以看到这些组件的末尾都带有Demo字样。说明我们的主菜单承载了一个入口的作用,可以通过主菜单前往不同的Demo界面。

同时,这些Demo界面分别实现了不同的功能。

这里首先进行了包的加载。在Cocos creator中要显示我们在FairyGUI中制作的UI,需要先加载对应的包。加载了MainMenu这个包之后,其实不需要再进行addPackage这个操作了。

通过fgui.UIPackage.createObject创建主界面Main。但是此时获得的是GObject类型的对象,需要再使用.acCom转换为组件。

之后进行屏幕的适配,然后将Main组件附加到GRoot根节点上。所有的场景组件都需要设置GRoot节点为父节点。

之后这些结构相似的函数,作用是在我们的主界面_view中找到按钮子组件

打开我们的FairyGUI编辑器,旁边显示了Main组件下的子组件。

getChild函数可以通过子组件的名称获取子组件。在官方代码中,获取子组件之后,添加给它一个点击事件startdemo

接下来看startdemo的内容。

我们发现,startdemo接受一个组件作为参数,将对应组件添加到当前节点之后,注册了一个自定义事件“start_demo”,然后销毁了主界面。这是什么意思呢?

还记得“start_demo”吗?这个事件在DE的onLoad生命周期函数中出现,作为一个自定义的事件监听。事件的回调函数onDemoStart主要做了这么一件事情:设置关闭按钮。

包括设置按钮位置,设置按钮的绘制顺序,最后绘制可以显示在最上方,增加关联,可以适配屏幕的变化,设置关闭当前Demo的监听,最后将它加到根节点GRoot上。

其实,将传过来的参数demo赋给变量_currentDemo,方便在本页面获取当前显示的是哪个demo。

总结下来就是,DemoEntry是一个控制组件,不显示任何内容。它控制了关闭按钮,控制页面的切换。首次进入后开启所有demostart的事件监听,并添加MainMenu组件作为当前显示的页面。

当检测到demo按钮的点击后,将MainMenu移除,加入对应的demo页面。

当点击关闭按钮后,将当前页面所有子组件移除,移除demo页面,再加入MainMenu界面。

文章来源:https://blog.csdn.net/2301_80005044/article/details/135286303
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ppmy.cn/news/1285330.html

相关文章

wireshark access/trunk/hybrid报文分析

1,access接口 发送带vlan的报文 wireshark交换机配置 [Huawei-GigabitEthernet0/0/1] [Huawei-GigabitEthernet0/0/1]port link-type access [Huawei-GigabitEthernet0/0/1]port default vlan 100 [Huawei-GigabitEthernet0/0/2]port link-type access [Huawei-Gig…

使用rust读取usb设备ACR122U的nfc卡片id

rust及其高效和安全著称,而且支持跨平台,所以就想使用这个rust开发一个桌面端程序,来读取nfc设备的nfc卡片的id信息,下面就做一个最简单的入门教程吧,也是我写的第三个rust应用。 当你电脑上安装好了rust环境之后&…

系列十二、Linux中安装Zookeeper

一、Linux中安装Zookeeper 1.1、下载安装包 官网:Index of /dist/zookeeper/zookeeper-3.4.11 我分享的链接: 链接:https://pan.baidu.com/s/14Hugqxcgp89f2hqGWDwoBw?pwdyyds 提取码:yyds 1.2、上传至/opt目录 1.3、解…

USB -- STM32F103 USB VIDEO(视频)Camera同步传输讲解(九)

目录 链接快速定位 前沿 1 描述符修改 1.1 设备描述符修改 1.2 配置描述符修改 1.3 字符串描述符修改 1.4 编译报错修改 2 增加功能函数 2.1 Camera功能模块介绍 2.2 USB复位函数修改 2.3 Speaker_Data_Setup函数修改 2.4 非零端点函数修改 2.5 JEPG数据获取 3…

vue中常见的指令

简单介绍一下常见的vue中用到的指令 v-on 指定当前的事件&#xff0c;语法糖为&#xff0c;如例子所示&#xff0c;指定按钮的事件为addCounter&#xff0c;点击会使变量counter 1 <!DOCTYPE html> <html><head><meta charset"utf-8" />…

docker入门概念详解

本篇文章对docker的一些基础概念和周边概念进行了详细解释。帮助你可以很好的理解docker是用来干什么的&#xff0c;docker是怎么工作的。其中有docker所运用到的技术解释&#xff0c;docker的不同发展版本&#xff0c;dokcer的架构&#xff0c;docker的生态等等详解。希望本片…

小米电脑管家 - 手机平板电脑家居互联

系列文章目录 前言 联想电脑安装小米电脑管家实现设备互联 如图&#xff0c;将 小米平板 5 Pro 作为联想笔记本 GeekPro 5000 &#xff08;这垃圾电脑&#xff09;的副屏。 可以在小米平板控制笔记本&#xff0c;如图所示 一、官方使用手册 参考&#xff1a;小米电脑管家帮助 …

idea 如何开启mybatis控制台SQL日志打印

开启 application.yaml mybatis-plus:configuration:log-impl: org.apache.ibatis.logging.stdout.StdOutImplmybatis:configuration:log-impl: org.apache.ibatis.logging.stdout.StdOutImplmap-underscore-to-camel-case: truetypeAliasesPackage: XXXXmapper-locations: c…