Unity UGUI简单制作过程

时间:2022-08-23 17:25:28

由于要选择Unity UI技术路线,年前分别试了Unity自带的UI(即后面所说的UGUI)和FairyGUI两种UI的制作方式,从流程上制作了一个简单的UI面板来摸索两种方式的套路。
这一篇主要记录制作UGUI的过程。

在记录UGUI制作过程之前需要上一篇文章http://blog.csdn.net/andyqingliu/article/details/54602673的铺垫,Canvas是UGUI最重要的组件之一。

目标:需要有一个按钮入口(假想为背包按钮),点击按钮弹出一个UI面板,这个面板的界面需要如下几个方面的元素(静态图片忽略不提)。

1. 背包里面装备与道具列表

显示为一行,可左右拖动,每个cell显示各自的头像与基础信息(星级与名称等)

2. 背包里功能切换

显示为一列,每个按钮之间互斥,即想象成为Toggle,选中有对应效果并弹出一个新面板显示具体信息。

3. 背包的关闭

关闭按钮

接下来就开始行动了:

1. 设置Canvas为项目做准备

废话不多说,设置Canvas的Render Mode为Overlay,Pixel Perfect勾选,设置Canvas Scaler的UI Scale Mode为Scale With Screen Size,分辨率为1280*720,选择Screen Match Mode为Match Width Or Height,Graphic Raycaster不变。如下图:
Unity UGUI简单制作过程

如上图,Canvas下面有个Button是入口。

2. 开始制作背包面板

这个就不截图了,只说过程如下:

  • 把需要的图片拷贝到单独的文件夹下面并设置为Sprite(2D and UI),以后如果需要更新某个图片直接覆盖即可。

  • 在背包板子下面建立两个Toggle并给这两个GO一个父节点,给父节点添加Toggle Group组件,这样就能一次选中一个。Toggle本身挂Toggle组件。

  • 建立带Scroll Rect组件的GO,然后把放背包列表的Content拖入Scroll Rect的Content属性中,并给Content GO挂Grid Layout Group组件和Content Size Fitter组件,前者是为了设置列表的滚动方式和大小,后者是为了适配列表大小,这里要注意,如果不挂后者,这里要自己手动去适配Content大小,曾经以为Unity没有提供这个组件,为了测试只好自己写适配列表大小,没想到Unity已经有了这样的组件,还以为Unity这个组件怎么这么不智能呢

  • UI界面制作好了之后就是写代码了,给入口按钮挂脚本,给背包面板挂背包的控制脚本,主要是Find对应的物体或者拖对应的物体,然后实例化对应物体,添加响应事件等。

UGUI这边的流程就到这里,明天写FairyGUI的流程。