FairyGUI-Cocos Creator官方Demo源码解读

2023-12-30 12:36

本文主要是介绍FairyGUI-Cocos Creator官方Demo源码解读,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

博主在学习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界面。

这篇关于FairyGUI-Cocos Creator官方Demo源码解读的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/552863

相关文章

Spring 中 BeanFactoryPostProcessor 的作用和示例源码分析

《Spring中BeanFactoryPostProcessor的作用和示例源码分析》Spring的BeanFactoryPostProcessor是容器初始化的扩展接口,允许在Bean实例化前... 目录一、概览1. 核心定位2. 核心功能详解3. 关键特性二、Spring 内置的 BeanFactory

Linux系统之authconfig命令的使用解读

《Linux系统之authconfig命令的使用解读》authconfig是一个用于配置Linux系统身份验证和账户管理设置的命令行工具,主要用于RedHat系列的Linux发行版,它提供了一系列选项... 目录linux authconfig命令的使用基本语法常用选项示例总结Linux authconfi

解读docker运行时-itd参数是什么意思

《解读docker运行时-itd参数是什么意思》在Docker中,-itd参数组合用于在后台运行一个交互式容器,同时保持标准输入和分配伪终端,这种方式适合需要在后台运行容器并保持交互能力的场景... 目录docker运行时-itd参数是什么意思1. -i(或 --interactive)2. -t(或 --

解读为什么@Autowired在属性上被警告,在setter方法上不被警告问题

《解读为什么@Autowired在属性上被警告,在setter方法上不被警告问题》在Spring开发中,@Autowired注解常用于实现依赖注入,它可以应用于类的属性、构造器或setter方法上,然... 目录1. 为什么 @Autowired 在属性上被警告?1.1 隐式依赖注入1.2 IDE 的警告:

Rust中的注释使用解读

《Rust中的注释使用解读》本文介绍了Rust中的行注释、块注释和文档注释的使用方法,通过示例展示了如何在实际代码中应用这些注释,以提高代码的可读性和可维护性... 目录Rust 中的注释使用指南1. 行注释示例:行注释2. 块注释示例:块注释3. 文档注释示例:文档注释4. 综合示例总结Rust 中的注释

解读Pandas和Polars的区别及说明

《解读Pandas和Polars的区别及说明》Pandas和Polars是Python中用于数据处理的两个库,Pandas适用于中小规模数据的快速原型开发和复杂数据操作,而Polars则专注于高效数据... 目录Pandas vs Polars 对比表使用场景对比Pandas 的使用场景Polars 的使用

Rust中的Drop特性之解读自动化资源清理的魔法

《Rust中的Drop特性之解读自动化资源清理的魔法》Rust通过Drop特性实现了自动清理机制,确保资源在对象超出作用域时自动释放,避免了手动管理资源时可能出现的内存泄漏或双重释放问题,智能指针如B... 目录自动清理机制:Rust 的析构函数提前释放资源:std::mem::drop android的妙

golang字符串匹配算法解读

《golang字符串匹配算法解读》文章介绍了字符串匹配算法的原理,特别是Knuth-Morris-Pratt(KMP)算法,该算法通过构建模式串的前缀表来减少匹配时的不必要的字符比较,从而提高效率,在... 目录简介KMP实现代码总结简介字符串匹配算法主要用于在一个较长的文本串中查找一个较短的字符串(称为

MySQL中的MVCC底层原理解读

《MySQL中的MVCC底层原理解读》本文详细介绍了MySQL中的多版本并发控制(MVCC)机制,包括版本链、ReadView以及在不同事务隔离级别下MVCC的工作原理,通过一个具体的示例演示了在可重... 目录简介ReadView版本链演示过程总结简介MVCC(Multi-Version Concurr

关于Gateway路由匹配规则解读

《关于Gateway路由匹配规则解读》本文详细介绍了SpringCloudGateway的路由匹配规则,包括基本概念、常用属性、实际应用以及注意事项,路由匹配规则决定了请求如何被转发到目标服务,是Ga... 目录Gateway路由匹配规则一、基本概念二、常用属性三、实际应用四、注意事项总结Gateway路由