FariyGUI × Cocos Creator 入门

前言

程序员向的初探Cocos Creator结和FairyGUI的使用，会比较偏向FairyGUI一点，默认各位读者都熟练掌握Cocos Creator以及js/ts脚本编写。
初探门径，欢迎大佬指教，欢迎在评论区或私信与本人交流，谢谢！

下载和安装

都不需要科学上网，非常友好。

  1. 下载fgui：https://www.fairygui.com/
    在这里插入图片描述
  2. 下载Cocos Creator并安装编辑器：https://www.cocos.com/creator-download

下下来后是一个 Cocos Dashboard，在Dashboard里面可以安装各个版本的Cocos Creator编辑器。
在这里插入图片描述

  1. fgui自带文档：https://www.fairygui.com/docs/editor
    fgui自带demo（虽然没有在文档里直接给出链接，但是在github上搜索fariygui即可搜到）https://github.com/fairygui/FairyGUI-cocoscreator
  2. Cocos Creator自带文档：https://docs.cocos.com/creator/manual/zh/
  3. 本文对应demo：https://gitcode.net/qq_36286039/fgui_cocos_240 （这是我的个人仓库，还是推荐看官方的）

第一个fgui项目

1. 新建项目

在这里插入图片描述
在指定位置创建一个新的UI项目。

  • 项目名称： 项目名称。可以使用中文，创建后也可以随便修改。
  • 项目位置： 项目位置。注意：请不要使用带中文的路径。
  • 在此位置创建新目录： 如果勾选，将在指定的路径创建名称为项目名称的子目录。如果不勾选，则在指定的路径直接创建项目。
  • 项目类型： UI项目类型，即UI实际运行的平台。不同的平台在显示效果、发布结果上有一定的差别。不过不需要担心这里选择错了项目类型，在项目创建后可以随时调整UI项目类型，操作位置在菜单“文件->项目设置”里。

FairyGUI的项目在文件系统的结构为：

  • assets： 包内容放置目录。
  • package1： 每个包一个目录。目录名就是包名。
  • assets_xx： 分支内容放置目录，xx是分支名称。多个分支则存在多个类似名称的目录。
  • settings： 配置文件放置目录。
  • .objs： 内部数据目录。注意：不要加入版本管理，因为这里的内容是不需要共享的。
  • test.fairy： 项目标识文件。文件名就是项目名称，可以随便修改。

2. 编辑器基础

在这里插入图片描述
编辑器主界面由以下几个部分组成：

  1. 主菜单。在Mac系统里，主菜单和Mac应用程序菜单集成；在Windows系统里，主菜单显示在主界面最上方。
  2. 主工具栏。常用的功能按钮。
  3. 文档视图。包括已打开的文档的列表，侧工具栏和舞台区域。
  4. 状态栏。显示控制台输出的最后一条信息。点击可以打开控制台。
  5. 各个功能视图。用户可以按使用习惯将它们拖动到不同位置，也可以关闭。右键点击面板的标题栏，在右键菜单中选择“关闭”即可。如果要重新打开，在“主菜单->视图”里操作。

多余的描述我就不在这里赘述了，看fgui的官方文档吧，相信各位都很快能够明白每个按钮的意义，不会的查下官方文档，这篇文章只挑和Cocos比较不一样的或需要注意的地方讲。

3. 包

官方文档：https://www.fairygui.com/docs/editor/package

fgui的包的定义和Cocos Creator里的subpackage的定义类似，因此做好包内资源的管理是很重要的。

看一下fgui的demo里分的包：
在这里插入图片描述
在Cocos Creator里显示的样式：

在这里插入图片描述
在BasicsDemo.ts里调用的有关包的加载和卸载：

onLoad() {//......fgui.UIPackage.loadPackage("UI/Basics", this.onUILoaded.bind(this));
}
onUILoaded() {this._view = fgui.UIPackage.createObject("Basics", "Main").asCom;//......
}
onDestroy() {//......fgui.UIPackage.removePackage("Basics");
}

4. 制作第一个组件

新建fgui项目之后，改一下包名和组件的名字，引入一张图片。
在这里插入图片描述
将画布大小改为720*1600（也可以不改，按个人习惯来就好）
在这里插入图片描述
和Cocos Creator不同的是，fgui里锚点默认在左上角，而不是正中心，如果想要锚点在中心，需要设置一下。
同样，这里也是按照自己的习惯来就好，我还是比较习惯锚点在中心一点。
在这里插入图片描述
在这里插入图片描述

将图片放入舞台

在这里插入图片描述
在这里插入图片描述

使用九宫图片

官方文档：https://www.fairygui.com/docs/editor/image
双击图片，进入图片编辑，选择九宫格。
在这里插入图片描述
缩放图片即可看见效果。
在这里插入图片描述

添加文本

在这里插入图片描述

在按钮上添加文本

当我们需要添加一个文本在按钮上时，不能直接这么往上摆，需要让他们有父子关系。观察一下demo里的按钮都是怎么做的：
在这里插入图片描述
button被单独拎出来了，而且上面有一个title文本，我们也照做一个。
点击上方在这里插入图片描述新建一个按钮。
设置尺寸300*100
在这里插入图片描述
将原本的矩形换成我们自定义的图片
在这里插入图片描述
在这里控制显示样式
在这里插入图片描述
在这里插入图片描述
在这里切换按钮状态查看按钮样式
在这里插入图片描述
做好后应该这样
在这里插入图片描述

ctrl+s保存，回到Main
将按钮拖入，改一下位置，保存。
在这里插入图片描述

加一个简单的背景，这个场景就算做完了
在这里插入图片描述

发布

官方文档：https://www.fairygui.com/docs/editor/publish
打开demo的发布设置看一眼，照葫芦画瓢填一下
在这里插入图片描述
在这里插入图片描述
坐等发布
在这里插入图片描述
发布后可以在相应路径看到
在这里插入图片描述

在Cocos里使用

官方文档：https://www.fairygui.com/docs/sdk/creator
新建一个Cocos项目，按如下路径导入资源，并新建一个场景。
这里建议新建一个Cocos 2.4.0的项目，以保证和demo一样。
看demo知道，核心库是fairygui.js，因此我们把它复制粘贴进来。
在这里插入图片描述
新建一个常驻节点，编写一个脚本Main.ts
在这里插入图片描述

const { ccclass, property } = cc._decorator;@ccclass
export default class Main extends cc.Component {private _view: fgui.GComponent;onLoad() {fgui.GRoot.create();fgui.UIPackage.loadPackage("UI/MainPkg", this.onUILoaded.bind(this));}onUILoaded() {fgui.UIPackage.addPackage("UI/MainPkg");this._view = fgui.UIPackage.createObject("MainPkg", "Main").asCom;this._view.makeFullScreen();fgui.GRoot.inst.addChild(this._view);}onDestroy() {this._view.dispose();}}

运行，可以看到界面已经出来了，且没有报错，就是位置有点偏，因为我们没有设widget。
在这里插入图片描述
加了居中之后，我们的画面居中了
在这里插入图片描述
在这里插入图片描述
加了宽高关联之后，可以看到已经铺满了
在这里插入图片描述
在这里插入图片描述

结语

本教程到此结束，本人萌新一枚，由于能搜到的fgui×Cocos Creator的资料很少（大部分都是unity的），特分享学习经验。如有这方面的大佬，欢迎与我讨论技术~
至此，第一个场景以及做好，更多内容，请自行阅读官方提供的demo。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/696660.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

dubbo源码中设计模式——负载均衡中模版模式的应用

dubbo源码中设计模式——负载均衡中模版模式的应用

模版模式介绍 在模板模式（Template Pattern）中，一个抽象类公开定义了执行它的方法的方式/模板。它的子类可以按需要重写方法实现，但调用将以抽象类中定义的方式进行。这种类型的设计模式属于行为型模式。 使用场景：定…
阅读更多...
Lua内存管理策略

Lua内存管理策略

传统的内存管理策略主要分为两种：引用计数，和垃圾回收。相比后者每一段时间执行一次回收周期，前者是对于每一个变量都维护被引用数的策略。对于Lua这种轻量化语言而言，占据大内存的开销是极力避免的，而前者的方式显然是…
阅读更多...
C语言运用中断子系统用驱动控制led实验，c语言串口led点灯实验（驱动+应用层）

C语言运用中断子系统用驱动控制led实验，c语言串口led点灯实验（驱动+应用层）

中断子系统用驱动控制led实验 驱动代码 #include <linux/init.h> #include <linux/module.h>#include<linux/interrupt.h> #include<linux/gpio.h> #include<linux/timer.h>#include<linux/of.h> #include<linux/of_irq.h> #inclu…
阅读更多...
实现律所高质量发展-Alpha法律智能操作系统

实现律所高质量发展-Alpha法律智能操作系统

律师行业本质上属于服务行业&#xff0c;而律师团队作为一个独立的服务单位&#xff0c;应当包含研发、市场、销售、服务等单位发展的基础工作环节。但现实中&#xff0c;很多律师团队其实并没有区分这些工作。鉴于此&#xff0c;上海市锦天城律师事务所医药大健康行业资本市场…
阅读更多...
【SQL注入】靶场SQLI DUMB SERIES-26空格和注释被过滤

【SQL注入】靶场SQLI DUMB SERIES-26空格和注释被过滤

26题提示所有的空格和注释都会被过滤掉 输入?id0判断闭合方式&#xff0c;回显报错可以确定闭合方式为单引号 正常思路是需要通过注释符将后面的语句注释掉&#xff0c;但是这一关的注释符被过滤了&#xff0c;可以考虑使用将后面的语句也闭合的思路来避免引号带来的报错。输…
阅读更多...
【leetcode】记忆化搜索

【leetcode】记忆化搜索

记忆化搜索 一、斐波那契数1、题目描述2、代码3、解析 二、不同路径1、题目描述2、代码3、解析 三、最长递增子序列1、题目描述2、代码3、解析 四、猜数字大小II1、题目描述2、代码3、解析 五、矩阵中的最长递增路径1、题目描述2、代码3、解析 一、斐波那契数 1、题目描述 le…
阅读更多...
【java】小学生数学练习题目生成系统

【java】小学生数学练习题目生成系统

本文章主要是CSDN-问答板块&#xff0c;有题主提出的问题&#xff0c;我这边将完整代码提供出来&#xff0c;仅供大家参考学习&#xff01; 一、效果截图 二、直接上代码 package com.example.dingtalk.question;import javax.script.ScriptEngine; import javax.script.Scrip…
阅读更多...
PHP实践：Laravel中事件使用讲解

PHP实践：Laravel中事件使用讲解

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;CSDN领军人物&#xff0c;全栈领域优质创作者✌&#xff0c;CSDN博客专家&#xff0c;阿里云社区专家博主&#xff0c;2023年6月CSDN上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师…
阅读更多...
kafka生产者

kafka生产者

1.原理 2.普通异步发送 引入pom&#xff1a; <dependencies><dependency><groupId>org.apache.kafka</groupId><artifactId>kafka-clients</artifactId><version>3.0.0</version></dependency><dependency><g…
阅读更多...
2024022202-查询优化

2024022202-查询优化

查询优化 概述 关系系统和关系模型是两个密切相关而有不同的概念。支持关系模型的数据库管理系统称为关系系统。但是关系模型中并非每一部分都是同等重要的&#xff0c;所以我们不苛求完全支持关系模型的系统才能称为关系系统。因此&#xff0c;我们给出一个关系系统的最小要求…
阅读更多...
【学习总结】慢SQL治理经验总结

【学习总结】慢SQL治理经验总结

一、慢SQL定义 执行超过1s的SQL为慢SQL 三、慢SQl的风险 系统的响应时间延迟&#xff0c;影响用户体验 资源占用增加&#xff0c;增高了系统的负载&#xff0c;其他请求响应时间也可能会收到影响。 慢SQL占用数据库连接的时间长,如果有大量慢SQL查询同时执行&#xff0c;可能…
阅读更多...
C语言中的assert.h：调试助手与断言详解

C语言中的assert.h：调试助手与断言详解

在C语言编程中&#xff0c;assert.h头文件提供了非常有用的断言&#xff08;Assertion&#xff09;功能&#xff0c;它主要用于开发和调试阶段&#xff0c;确保程序在运行时满足某些预期条件。如果这些条件未得到满足&#xff0c;则程序会立即停止执行&#xff0c;并打印出有关…
阅读更多...
冷链物流追踪：Java与MySQL的协同实践

冷链物流追踪：Java与MySQL的协同实践

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…
阅读更多...
第三百六十一回

第三百六十一回

文章目录 1. 概念介绍2. 实现方法2.1 环绕效果2.2 立体效果 3. 示例代码4. 内容总结 我们在上一章回中介绍了"自定义SlideImageSwitch组件"相关的内容&#xff0c;本章回中将介绍两种阴影效果.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们在本…
阅读更多...
谷歌seo推广怎么做？

谷歌seo推广怎么做？

除了常规的优化之外&#xff0c;还可以针对特定垂直搜索进行优化&#xff0c;比如图片的以及视频的搜索优化&#xff0c;这对于贩卖自己产品的网站来说也是挺重要的一点 图片需要确保您的图片文件名包含相关关键词&#xff0c;并为每张图片添加描述性的ALT文本&#xff0c;以帮…
阅读更多...
调用 Python 函数遗漏括号 ( )

调用 Python 函数遗漏括号 ( )

调用 Python 函数遗漏括号 1. Example - error2. Example - correctionReferences 1. Example - error name "Forever Strong" print(name.upper()) print(name.lower)FOREVER STRONG <built-in method lower of str object at 0x0000000002310670>---------…
阅读更多...
SqlServer2016离线安装--Microsoft R Open 和 Microsoft R Server安装文件位置

SqlServer2016离线安装--Microsoft R Open 和 Microsoft R Server安装文件位置

问题 SQL SERVE 2016离线安装&#xff0c;会出现“Microsoft R Open 和 Microsoft R Server 脱机安装”的界面&#xff0c; 无法点击下一步的情况&#xff0c;如下图&#xff1a; 原因 离线安装时需要下载两个文件 解决方案 1、访问路径下载文件 https://go.microsoft.c…
阅读更多...
Python 实现 OBV 指标计算：股票技术分析的利器系列（7）

Python 实现 OBV 指标计算：股票技术分析的利器系列（7）

Python 实现 OBV 指标计算&#xff1a;股票技术分析的利器系列&#xff08;7&#xff09; 介绍算法解释 代码rolling函数介绍核心代码计算 VA 列计算 OBV 列计算 MAOBV 完整代码 介绍 OBV 指标是“On-Balance Volume”的缩写&#xff0c;意为“量价平衡指标”。它是一种用于衡…
阅读更多...
《游戏引擎架构》 -- 学习4

《游戏引擎架构》 -- 学习4

资源及文件系统 文件系统 游戏引擎的文件系统API通常提供以下功能&#xff1a; 搜需路径&#xff1a;是含一串路径的字符串&#xff0c;各路径之间以特殊字符&#xff08;如冒号或分号&#xff09;分隔&#xff0c;找文件时就会从这些路径进行搜寻。例如在命令行下执行程序&a…
阅读更多...
Code Composer Studio (CCS) - 全局搜索功能

Code Composer Studio (CCS) - 全局搜索功能

Code Composer Studio [CCS] - 全局搜索功能 1. Ctrl H&#xff0c;全局搜索功能References 1. Ctrl H&#xff0c;全局搜索功能 References [1] Yongqiang Cheng, https://yongqiang.blog.csdn.net/
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023