UGUI是Unity官方推出的新一代交互系统，与前代的NGUI相比，它具有使用灵活、界面美观、支持个性化定制的特点。本文将在unity内制作一个简单界面。针对我们游戏UI只认图不认字的习惯，我们先上路后考驾照，通过一个实际案例，与大家一起敲开UGUI开发的大门。
准备工作
1 安装unity
网络有许多unity资源和版本，可以自行安装。UGUI是在4.61版本后才正式推出的，不建议使用老版本，推荐使用unity5.x以后版本。安装过程可以自行百度，网上有详细教程。
安装好之后创建项目，项目命名以及其他选项随意勾选，设置项目文件夹。
点击创建后，打开项目目录，在assets文件夹下创建UI文件夹。用来存放我们输出好的界面切图资源。
2 资源导入
现在要将界面资源导入unity里。这是一个已经制作好的匹配界面。界面尺寸为1334*750。这是PS中的效果图：
将界面输出png切图，并且将切图资源放置到unity工程目录下，这时unity会自动生成一份.meta文件。
这个文件可以理解为该图片的一个身份信息，项目开发中无论移动、重命名、改动资源文件，都还是指向这个资源文件。但是注意不要随意删除资源文件相关的meta文件。如果删除了meta文件，unity会认为原始的资源文件被删除了，并给此资源重新生成一个新的.meta文件。但是此时项目中资源的引用就会断开缺失。
在project界面中找到放置切图的文件夹，全选图片，
在inspector界面将图片纹理属性改为sprite（2D and UI），然后点击下方apply确认更改。
这时在资源浏览器中我们可以看到，导入的切图文件上多了一个小图标，这表示图片文件已经转化为可以直接在开发中被UGUI调用的sprite文件。
制作界面
首先，需要设置游戏界面尺寸。点击game页签，在视图上方点击free aspect，弹出菜单下方点加号新建一个研发标准分辨率，在此案例我们使用1334*750固定分辨率。
在大纲视图中创建一个canvas。canvas可以理解为是PS画布，所有的UI组件都要放置在画布范围内。
在canvas上鼠标右键创建image组件，创建一个放置于canvas子级的image组件。
大纲视图的父子级别非常直观，将组件拖拽到另一个组件下方即创建了一个父子级别。移动变换父级组件，子级也会跟着移动变换。另外大纲视图的层级为最下方的组件在场景中为最上层，子级的显示层级也是高于父级。如果发现背景组件遮挡了按钮等，在大纲视图将背景组件拖拽到按钮上方即可。
单击image，在inspector界面点击source image最右边的小圆点，在弹出界面点击背景图资源。（或直接将project资源视窗图片直接拖拽到source image通道上 ）然后点击 Set Native Size，设置为图片默认大小。
这样，就在游戏场景中添加了一个UI界面的背景图。
重复上述操作，将UI界面框和信息板也添加到游戏场景中。
在大纲视图新建button组件，点击source image最右小圆点，选择蓝色按钮图片，然后Set Native Size一下，在场景中就可以看到一个带文字的按钮。
点击大纲视图展开button子级，会发现有一个text控件。这个是按钮文字。选中text控件，在inspector中将字体颜色大小修改为效果图大小。
在大纲视图选中button组件，ctrlC ctrlV复制一份，在sence场景中调整位置，修改文字。
新建一个button组件，将close切图赋予source image通道，删除大纲视图下text组件。调整位置当做关闭按钮。
这时发现输出的信息背景高度不够需要拉伸，但是只有UI才铭心刻骨懂得的一件事是，切图切忌粗暴拉伸！
so，我们需要为这张图做九宫拉伸
首先，在资源库找到并选中需要九宫拉伸的图
在inspector界面点击sprite Editor按钮
在弹出窗口调整上下左右绿线位置，绿线中间位置为拉伸尺寸。调整完成后，点击上角apply。
然后回到大纲视图，选中图片，在inspector菜单image type选项选择sliced
现在，九宫就设置好了。在场景里拉伸调整宽高位置，以保证与效果图一致。
现在距离与效果图一致还差一个标题。
在大纲视图右键创建text组件，
在inspector界面修改调整文字颜色大小。
在制作设计稿时标题文字使用了一个必不可少的投影，使文字看起来立体又美观
unity中也可以给文字添加投影样式。选中标题文字，在inspector界面最下点击add component 在弹出界面搜shadow，点击第一个，给文字添加一个投影效果。
这时标题文字的inspector下多了一个shadow节点
点击effectcolor色块，调整颜色为白色，设置颜色透明度为128。这样在场景中会生成一个白色的文字半透明投影。
最后适当对比效果图调整一下场景中UI组件的位置。一个跟效果图一毛一样的UGUI界面就诞生啦！
点击播放按钮，可以在game页签预览到我们刚制作完成的界面。
小结
本次案例给童鞋一个简单上手的示范。具体到项目研发中还会有很多问题，比如命名规范、控件使用、技术实现等等。具体到每个项目每个界面可能流程都不一样，但是UGUI模块的主要制作流程大抵如此啦。。
接下来会针对UGUI模块进行详细的梳理讲解。写文不易，如果觉得有帮助还请务必多多关注推荐，跪谢啦！~
网友评论