unity3d游戏开发之GUI的使用.docVIP

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的属性逐一研究一下：更多精彩请点击【 HYPERLINK / \t /_blank 狗刨学习网】  Text（文本）：需要显示在屏幕上的文字内容； Anchor（锚点）：可以设置绘制文本的起始位置，想像一下九宫格就能明白了； Alignment（对齐）：文本的对齐方式，可