Unity3D游戏开发之GUI的使用

时间：2015-02-03 13:17:49 阅读：251 评论：0 收藏：0 [点我收藏+]

GUI是图形用户界面（Graphical User Interface）的缩写和简称，又叫图形用户接口。听起来好像很专业的感觉，其实我们每天都在接触。比如浏览器上面的前进、后退、收藏按钮、地址栏、右键菜单，甚至整个浏览器窗口都可以叫GUI。

而通常人们眼中的黑客高手，都是喜欢在一个全是字符的屏幕上啪啪啪飞快地键入一些晦涩难懂的字母，然后自称极其安全的某某防火墙系统就被攻破了。这种界面正好与GUI相对，叫做命令行界面，CLI（Command-Line Interface）。

作为次世代游戏引擎，制作的游戏当然不会用字符界面来显示各种信息。虽然曾经的文字类的MUD游戏被誉为一代经典，MUD – Multiple User Domain，多用户交流领域，现在北大还开着此类游戏服务器。但这样的游戏已经小众化了，并不符合人们日渐增长的对图形界面的高要求。

正如现在很少有家庭用户再用DOS/Linux系统了，Windows/MacOSX已经成了标配，甚至Linux都有了ubuntu，接下来还有可能是iOS、Android、Win8这类以触摸为主要操作的系统。因此GUI组件就应运而生了，Unity中有两个常用的GUI组件，GUI Text和GUI Texture。顾名思义前者是用来显示文本的，后者则是用来显示贴图。

技术分享

以魔兽世界里的头像为例，如果我们要制作这样的效果，那么玩家的名字和等级都可以用GUI Text来表现，而头像和血条，还有那些边框则都可以用GUI Texture来表现。于是用Wow Model Viewer挖了半天，找到以下素材，准备开工山寨一个^_^。

原型头像一枚，懒得再上游戏里截图再修改了。
血条纹理一枚，游戏里的进度条都靠它来表现了。
头像框体一枚，嗯，它就是一个框而已。
等级框体一枚，嗯……同上。

将资源井然有序地分类存放是个良好的习惯，也是项目的第一步。把这几个贴图全都拖到”Textures/GUI“目录下面，并选中它们把Texture Type更改为GUI（可以按住Ctrl多选，一并更改）。这个步骤必不可少，否则待会显示出来的图片会模糊掉。至于原理我也搞不明白，每每遇到这种连谷歌度娘都查不到答案的问题，也就只能不求甚解，只好作罢了。

技术分享

素材准备就绪，可以开始创建GUI了。选择主菜单的”GameObject→Create Other→GUI Texture“，就会在屏幕正中间出现一个Unity的官方Logo水印，当然这并不是我们想要的。在层次面板中找到UnityWatermark-small并选中，将Texture属性的贴图修改为刚刚导入的头像框体。更多精彩请点击【狗刨学习网】

此时在设计视图正中间应该已经可以看到头像框体了，不过还需要几个步骤。点开像素设置（Pixel Inset），其中XY表示横纵坐标的偏移，设置为0，Width和Height表示图片的宽度和高度，设置为原图大小（我这里是193×76）。最后剩下的工作就是修改GUI在屏幕上的位置了。

由于GUI其实只是一张平面图形贴在屏幕上，不管我们怎么旋转镜头，它始终不会改变位置。所以GUI的坐标定义与我们常见的3D游戏对象的坐标定义不一样，借用一下官方对GUI的说明：

技术分享

从图中可以看出来，Unity对GUI坐标的定义是基于比例的，也就是说不管屏幕的长宽如何，GUI贴图所在的位置始终为：（屏幕宽度×transform.x，屏幕高度×transform.y），并且坐标系与数学上最常见的坐标系相同。而transform.z则表示GUI在屏幕上显示的优先级，优先级小的会被大的遮挡。另外一旦一个GUI成为另外一个GUI的子对象，横纵坐标就无效了，需要调节像素设置里的XY来控制偏移。

技术分享

将其余的几种素材贴图也如法炮制地制作成GUI，结构如上图所示。其中使用的素材分别是3、2、1、2、4，对照一下上文即可。需要注意的不多，调整好遮挡关系，并且在创建血条的时候需要修改Color来产生不同的颜色效果。剩下的工作就是添加上玩家名称和等级的文本了。点击主菜单”GameObject→Create Other→GUI Text“，与GUI贴图一样，GUI文本的坐标系也是按照比例的。为了制作得更像WOW里的效果，我决定还是按照之前的方式把GUI Text的属性逐一研究一下：更多精彩请点击【狗刨学习网】

Text（文本）：需要显示在屏幕上的文字内容；
Anchor（锚点）：可以设置绘制文本的起始位置，想像一下九宫格就能明白了；
Alignment（对齐）：文本的对齐方式，可以设置左对齐、右对齐、居中；
Pixel Offset（偏移）：文本相对于起始位置的XY方向上的偏移像素；
Line Spacing（行间距）：两行文本之间的空隙；
Tab Size（制表符宽度）：所谓制表符就是在平时输入的时候按TAB键打出的那个空白字符；
Font（字体）：文本使用的字体，默认为Arial；
Material（材质）：文本使用的材质；
Font Size（字体大小）：就是字体的大小，如果为0则使用字体的默认大小设置；
Font Style（字体样式）：可以设置字体的粗体、斜体样式；
Pixel Correct（像素修正）：启用这个选项后字体大小的设置才会有效，否则得通过调整Transform.Scale来修改。默认开启。

需要解决的有两个问题，第一个是自定义字体，由于我的WOW客户端字体已经被我修改过了，找不到默认字体就随便找个字体导入将就一下。第二个则是需要修改字体的颜色（仔细看WOW的字体其实是有投影的，方便起见这个效果就不做了）。询问完谷哥度娘后整理了一下思路，按照以下步骤操作即可：更多精彩请点击【狗刨学习网】

技术分享

将一个字体文件拖入到工程面板，我使用的是”汉仪综艺体简“，命名为HanYiZongYi；
新建一个材质，取名叫做WowFont，设置Shader为”GUI/Text Shader“，并设置好相应的Text Color；
展开第一步导入的字体，会发现有个Font Texture，把这个纹理拖放到第二步材质的纹理框中；
将WowFont材质拖到GUI文本的材质属性上；
将HanYiZongYi字体拖到GUI文本的字体属性上；

如法炮制将等级的GUI文本也搞定后，将名字和等级一并拖入PlayerPortrait，最后调整一下位置和字体大小，大功告成！

技术分享

唔……运行一下游戏，感觉上还有模有样的，哈哈。当然这只是实现了大概的界面而已，实际上游戏中并没有生命和魔法值的设定。

Unity3D游戏开发之GUI的使用

原文：http://blog.csdn.net/book_longssl/article/details/43447937

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)