Unity3D游戏开发之GUI的使用

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,最后调整一下位置和字体大小,大功告成!

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

时间: 2024-10-10 04:49:00

Unity3D游戏开发之GUI的使用的相关文章

unity3D游戏开发之GUI

转:http://blog.csdn.net/kuloveyouwei/article/details/23598171 GUI在游戏的开发中占有重要的地位,游戏的GUI是否友好,使用是否方便,很大程度上决定了玩家的游戏体验.Unity内置了一套完整地GUI系统,提供了从布局.控件到皮肤的一整套GUI解决方案,可以做出各种风格和样式的GUI界面.在Unity中使用GUI来完成GUI的绘制工作,目前Unity没有提供内置的GUI可视化编辑器,因此GUI界面的制作需要全部通过编写脚本代码来实现,如果

[转]unity3D游戏开发之GUI

转自:http://blog.csdn.net/kuloveyouwei/article/details/23598171 GUI在游戏的开发中占有重要的地位,游戏的GUI是否友好,使用是否方便,很大程度上决定了玩家的游戏体验.Unity内置了一套完整地GUI系 统,提供了从布局.控件到皮肤的一整套GUI解决方案,可以做出各种风格和样式的GUI界面.在Unity中使用GUI来完成GUI的绘制工作,目前 Unity没有提供内置的GUI可视化编辑器,因此GUI界面的制作需要全部通过编写脚本代码来实现

[Unity3D]Unity3D游戏开发之Lua与游戏的不解之缘(下)

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 喜欢我的博客请记住我的名字:秦元培,我的博客地址是blog.csdn.net/qinyuanpei. 转载请注明出处,本文作者:

Unity3D游戏开发之Lua与游戏的不解之缘终结篇:UniLua热更新完全解读

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 喜欢我的博客请记住我的名字:秦元培,我的博客地址是blog.csdn.net/qinyuanpei. 转载请注明出处,本文作者:

[Unity3D]Unity3D游戏开发之从Unity3D到Eclipse

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 喜欢我的博客请记住我的名字:秦元培,我的博客地址是blog.csdn.net/qinyuanpei. 转载请注明出处,本

[Unity3D]Unity3D游戏开发之ACT游戏三连击效果实现综述

各位朋友,大家好,我是秦元培,欢迎大家关注我的博客,我的博客地址是blog.csdn.net/qinyuanpei.在研究了Unity3D Mecanim动画系统的重定向特性后,今天我们继续来探索Mecanim动画系统更多的特性吧.今天博主想和大家分享的是ACT游戏中的三连击效果的实现,由于Unity3D目前存在Animation和Animator两种类型的动画组件,因此本文将分别讲这两种类型的动画组件的三连击效果的实现,其中Animation组件是Unity3.5以下版本所使用的动画组件,An

Unity3D游戏开发之Unity3D动画与Mecanim动画系统

Unity3D游戏开发之Unity3D动画与Mecanim动画系统 欢迎来到unity学习.unity培训.unity企业培训教育专区,这里有很多U3D资源.U3D培训视频.U3D教程.U3D常见问题.U3D项目源码,[狗刨学习网]unity极致学院,致力于打造业内unity3d培训.学习第一品牌. Mecanim是Unity新增的动画系统,其功能强大而灵活,让人类和非人类角色栩栩如生.Mecanim的重定向极大的提供了工作效率,而且占用极少CPU周期.使用从Unity资源商店找到的动画资源,或

unity3D游戏开发之iTween介绍和用法

unity3D游戏开发之iTween介绍和用法 一.iTween 介绍 iTween是一个动画库,作者创建它的目的就是最小的投入实现最大的产出.让你做开发更轻松,用它可以轻松实现各种动画,晃动,旋转,移动,褪色,上色,控制音频等等 二.iTween 原理 iTween的核心是数值插值,简单说就是给iTween两个数值(开始值,结束值),它会自动生成一些中间值. 三.iTween 下载:  从官网http://itween.pixelplacement.com下载 主要文件有两个iTween.cs

Unity3D游戏开发之Unity打包APK

Unity3D游戏开发之Unity打包APK 1.安装JDK 2.配置JDK 3.在Paht的变量值后面加分号,把D:\android\adt-bundle-windows-x86-20131030\sdk\tools放在Path后面.[狗刨学习网] 4.点击菜单栏中的Edit-->Preferences 看Android SDK Location这个选项 浏览你的模拟器路径. 5.点击 File-Build Settings 然后再 点击Add Current 添加你的场景.再 点击Switc