unity超级马里奥2d游戏开发-04基础UI搭建

大家好，我是小兵，今天给大家带来Untiy开发超级马里奥游戏的第4课，基础UI搭建，如果你想查看完整的教程，请访问我的个人博客geekape.net。

我刚学习Unity那会，对UnityUI很是模糊，再加上其他操作也不熟练，导致我对UnityUI可望而不可及，一度觉得这设计者是不是脑子瓦特了，后来慢慢熟悉了，才发现和前端的UI系统很是相似，并且还有点强-拖拽式操作。

Unity UI介绍

任何一个成熟的产品都会有一些基础的设施，如电脑的cpu，硬盘，汽车的发动机，轮子，再比如前端的按钮，输入框。

在Unity中，UI就是一些通用性的组件，它至关重要，任何一个游戏几乎都要使用到文本，按钮等UI组件，尽管它的默认样式很简陋，但是你可以通过添加背景或修改样式甚至是使用插件来强化它的外观，可扩展性很强。

创建马里奥UI

在马里奥游戏中，顶部的信息栏会显示如下几个状态：

1. 得分
2. 时间
3. 关卡
4. 金币
5. 生命值

可以看见，上面的每个状态的样式都是相同的，我们就可以使用到Prefab。

Prefab

什么是 prefab ？中文翻译过来是预置体的意思，在上节课我们也用到了prefab，记得我们为什么要使用吗？

在游戏中，对于2个以上相同的物体就可以使用prefab来表示，像游戏中的蘑菇怪，乌龟怪，砖块，金币它们都有很多个，它们都要设置为prefab，当你想给游戏中的所有蘑菇怪改个颜色的时候，你只需要更改一下，所有的蘑菇怪都会更改，当然你也可以只改一个。

创建Prefab的几种方法

1. 在 Project 窗口右键 【create]→【Prefab】就可以创建
2. 在 Hierarchy 窗口任意拖动一个元素到 Project 窗口就可以完成创建

如何分辨Prefab

看到这个颜色的图标，就说明这个元素是Prefab，同样在文件夹中，它也是这种样式的。

创建游戏信息栏

1. 在 Hierarchy 窗口右键 【Create]→【UI】→【Canvas】创建一个画布
2. 在 Hierarchy 窗口右键 Canvas， 点击【Create Empty】创建一个空物体
3. 在空物体的属性栏中，我们点击AddComponent 搜索 Grid Layout Group组件并创建，添加这个组件是让5个状态更好的布局，不用手动调整间距
4. 在空物体下右键，创建一个空物体命名为item，并在其下面创建两个Text组件，拖动item到文件夹使其成为prefab，复制它分别对应上面5个状态的内容
   

响应式UI

现如今，几乎所有的网页设计都要进行响应式和自适应设计，才能让产品能够覆盖到更多的客户端，在游戏中，同样也得做这种优化。

在Unity中，设置响应式非常的方便，只需要修改元素的 Rect Transform组件的 Anchor Presets属性就可以，可以看到有很多的图形，Left，Center，Right等，通过看图形就明白了每个的功能。

例如你想把一个按钮固定在屏幕的左上角，距离顶部20，就可以点击top+left这样栏，在Pos Y中输入20就OK了，这样即使在多大屏幕上显示它都会在左上角。

好了，本篇文章到此结束，谢谢你的阅读，我们下节课见。