将FariyGUI的运行库导入至Unity项目中,废话不说咱们直接开始

FairyGUI运行库:


unityui界面 unityui界面源文件_游戏程序

下文用到的图片素材:


将该压缩包内文件解压,路径结构如图

unityui界面 unityui界面源文件_游戏程序_02

       制作游戏大厅面板的UI,打开FGUI将新项目默认带有的两个东西改名(如图)

【PS:本文章会以一个游戏DEMO带大家慢慢深入游戏,但不代表之后你只能做这个类型的游戏】

LobbyBasis为一个包(包的概念主要是为了方便管理UI资源)

LobbyPanel为一个面板(可以简单理解为游戏中的一个页面)

unityui界面 unityui界面源文件_unityui界面_03

双击打开LobbyPanel在右上角检查器设置尺寸720*1280

unityui界面 unityui界面源文件_lua_04

右键LobbyBasis包新建两个文件夹(如图)

unityui界面 unityui界面源文件_c#_05

Images用于将来存放一些图片资源

Widgets用来存放一些UI小部件

将下载的图片资源拖入Images文件夹

unityui界面 unityui界面源文件_游戏程序_06

将lobby_bg拖入LobbyPanel中,并点击侧片栏制作一个文本控件,命名与参数如图

unityui界面 unityui界面源文件_c#_07

unityui界面 unityui界面源文件_unityui界面_08

unityui界面 unityui界面源文件_lua_09

 3、制作第一个按钮(游戏中最常用到的控件之一)

在Widgets文件下点击头部栏第四个按钮(如图),创建一个按钮,参数如下,点击创建

unityui界面 unityui界面源文件_unityui界面_10

删除控制器(控制器是FariyGUI很重要的一个功能,后面再说,暂时不需要)

unityui界面 unityui界面源文件_unityui界面_11

 按钮参数修改(尺寸和按下效果)

unityui界面 unityui界面源文件_c#_12

unityui界面 unityui界面源文件_unity_13

将按钮内自带的东西全删了,然后将blue_btn拖入,设置位置为0,0

unityui界面 unityui界面源文件_unityui界面_14

【 至此你可以点击头部栏的播放按钮,进行点击测试,按钮是不是已经可以点击,并且有一个缩放的效果了】

 好像还缺了啥?

按钮要有一个文本,文本的创建方式上面已经有提及,就不再赘述

文本取名为title(划重点,后面再说为什么)

unityui界面 unityui界面源文件_c#_15

按钮制作完成,拖入LobbyPanel看看效果,记得给按钮取好名,后面要用代码获取

unityui界面 unityui界面源文件_lua_16

unityui界面 unityui界面源文件_unity_17

 4、导入Unity

UI部分大功告成,接下来就是让它在Unity中显示出来了

上方工具栏进入发布设置,设置好对应的发布路径(如图),然后点击发布

unityui界面 unityui界面源文件_unity_18

unityui界面 unityui界面源文件_游戏程序_19

unityui界面 unityui界面源文件_c#_20

 可以看到Unity对应的文件夹下多出了这两份文件

unityui界面 unityui界面源文件_lua_21

右键红框区域-Create-C# Script创建第一个C#脚本:Main.cs 【这将会是游戏后续的代码逻辑入口】

unityui界面 unityui界面源文件_c#_22

unityui界面 unityui界面源文件_游戏程序_23

删除Directional Light 然后右键创建Create Empty(创建完后重命名为Main)用于挂载Main脚本

unityui界面 unityui界面源文件_unity_24

把Main脚本拖到箭头的方向即可

unityui界面 unityui界面源文件_游戏程序_25

选择MainCamera,去处CullingMask中的UI勾选

unityui界面 unityui界面源文件_unity_26

如图,选择一下Unity的窗口尺寸,点击+号,然后新增一个720*1280的(与我们的UI尺寸一致),并选中 

unityui界面 unityui界面源文件_c#_27

unityui界面 unityui界面源文件_lua_28

 现在要设置一下Unity和Rider的关联,在Unity左上方的工具栏中Edit-Preferences中选择Rider

unityui界面 unityui界面源文件_unity_29

双击Main即可使用Rider打开Main.cs脚本,终于可以开始写代码了~

unityui界面 unityui界面源文件_游戏程序_30

 运行Unity,画面成功出现了,并且按钮也可以点击,只是目前还没有任何反应

unityui界面 unityui界面源文件_游戏程序_31

 现在我们来给这个按钮增加,每点击一次,对应显示点击次数的文本就刷新的功能

unityui界面 unityui界面源文件_unityui界面_32

 

unityui界面 unityui界面源文件_游戏程序_33

运行游戏,发现每一次点击按钮已经能够有反应了,大功告成~

unityui界面 unityui界面源文件_lua_34