原文地址:http://www.raywenderlich.com/78675/unity-new-gui-part-1
泰然翻译组:夏月星。校对:glory。
不可否认Unity 是一个很棒的游戏引擎,为了能够在迎合独立开发者需求的同时,也能提供优质的AAA级引擎功能,毫不意外,Unity现在占据着主流的地位
不幸的是,每一个魔法师都有他的致命弱点,对于Unity来说,它的致命弱点就是旧的GUI系.
老的GUI是一个让人头疼的系统,它要求你在OnGUI中写你所有的GUI代码,Unity这种以用户界面为中心的性质是每一个以项目为中心的程序员所抵触的.
现在有像NGUI这种第三方工具去解决这个问题,但是令人沮丧的是不得不去花费更多地钱区包含这些基本的第三方包.
好了,在Unity技术领域的小伙伴们听着,经过两年的开发,他们已经提供了一个能扫除所有痛苦的解决办法,通过Unity4.6的发布,你现在已经完全可以进入到一个新的GUI系统,在本教程中你将会学到关于这个新系统的所有内容,就是现在.
在这三个部分中,你可以在我们原先的教程怎么用Unity 2D去做一个像喷气背包的游戏 .
注意: 如果你还没有完成原来的教程,没关系,但是这并不影响你回头看。如果你从原先的教程开始看,当你看到本教程的结尾时,你就会拥有一个很棒的功能性游戏,而不是只有一个简单的按钮场景的项目。并且你将会看到如何从旧的GUI系统迁移到新的GUI系统,这个是无价的.
在你进行本教程的同时,你会在游戏中加入一个经典的菜单界面.
然而,要掌握新的GUI系统,只是添加几个按钮是不够的,这就需要添加一点有趣的东西去满足用户用户对于诱人UI的渴望
在开始的时候你需要一些背景图片,按钮,和其他一些UI元素,以及用于标签和文本上的按钮的字体,对于这些,你不用自己去画任何东西或者上网去查找,因为我已经准备一个包含你一切需要的包.
你可以在这里去下载这个包RocketMouse_GUI_Assets
这个包包含背景图片,按钮,图标,或者其他的游戏元素,这些都是我亲爱的妻子Svetlana做的
你在这里也会找到两种字体dafont.com,谢谢Rodrigo Fuenzalida(Titan One font)和Draghia Cornel (DCC Dreamer font)
提一下,你会在以前教程中的项目Rocket Mouse中添加一个新的场景,所以开始之前先下载这个项目的最终版本RocketMouse_Final
以上就是所有你需要的,好吧,除了爱情类歌曲,你是否也在听Beatles 歌
使用上边的链接下载并解压项目Rocket Mouse 项目.选择File\Open Project…去打开Unity项目,找到项目的根目录.
注意: 另外, 在项目中打开这个文件Assets\Scenes 并且双击这个场景 RocketMouse.unity 打开Unity.
项目加载后, 你会看到一个你很熟悉的场景或者这个场景对你来说就是新的 —这取决于是是否完成了原来的教程. 不管是什么情况,冷静下来,继续往下看
现在创建一个新的项目,你会在创建新场景中花费很多的时间. 在菜单中选择 File\New Scene 一个空的新的场景
最好直接去保存这个场景, 选择File\Save Scene打开 Save Scene 对话框. 然后, 输入 MenuScene 作为这个场景的名称并且把它保存到 Scenes 文件, 放在 RocketMouse scene的下边
浏览一下项目确保里边有两个场景.
注意: 如果你在打开项目,创建或者保存场景,或添加资源文件中遇到任何问题,浏览一下原来的教程Rocket Mouse tutorial. 那有一步一步详细的教程— 还有在本教程中不包含的GIF格式的图片, 坚守DRY的原则
首先在你待办列表中需要往场景中加资源,所以,解压资源包,你会发现有两个文件: Menu and Fonts.
选中这两个文件, 然后把它们拖入Unity项目的Assets 文件。
用几秒钟去处理这些文件. 然后你应该会在项目浏览器中看到文件 Fonts and Menu,如下所示
哇哦! 你已经完成了前边的准备工作,现在你可以在新的GUI系统创建你的第一个UI元素.
在场景中创建的第一个元素就是背景图片.
在菜单中选择GameObejct/UI/Image .这会在场景中添加一个Image. 你会看到它继承于Canvas. 所有的元素都必须在Canvas 上,所以如果你还没有,Unity就会为你提供一个
为了确保你能在场景视图中看到这个图片,在hierarchy 中选择Image ,设置它的X和Y的位置为0.
注意: 我已经能听到这些疑问,“什么是X的位置”,“什么是位置转换组件,他们有什么相似之处”
在你进行这个教程的同时,你会找到这些问题的答案. 在不同的对象中学习他们是很容易的,这样你就会观察到不同的设置行为.
像宽高或者位置X这种属性是不需要任何解释的.
一会时间你就会设置正确的位置和打消了. 现在,有另外一个有趣的事情.在hierarchy中自习看,你会在场景中发现三个新的对象.
1. Image
2. Canvas
3. EventSystem
Image 是一个非交互性的控制器,用来显示Sprite texture ,并且提供了很多种选项可以去调整.
例如,你可以设置图片的颜色或者在上边添加素材.你甚至可以控制显示图片的数量. 像时钟旋转的动画也为它带来了生机.
Canvas 是所有UI元素的超类,像以前展示的,在你添加你的第一个UI元素的时候他会自动创建.它又很多属性允许你去控制你UI的呈现,你会在这个教程中看到它们的一部分.
EventSystem 负责处理场景中输入,映射和事件,它需要UI是可运行的,所以这就是它会自动加入进来的原因.
现在该回到图片中了,第一件事就是去把 Image 重命名为 img_background.
下一步,在项目浏览器中打开 Menu 文件找到menu_background 图片. 把它拖到Source Image 区域中.
现在你用一个背景图片替换掉了原来白色的图片. 然而,它看起来并不像是一个合适的背景图盘,因为它太小了,并且宽高比是不正确的
要修复这个问题,在Inspector中找到Set Native Size 按钮,点击它把它的size设置成1024 x 577
现在是一张对的背景图片了.
但是,还是有几个问题:
1.图片的真实size是1136 x 640,正好够全屏覆盖4英寸的.
2.缩小 你的场景视图, 你会看到Canvas (白色的 rectangle) 仅仅覆盖了图片的一部分,如果你切换到Game 视图中,你会看到它又仅仅覆盖了背景图片的一部分,就好像照相机离图片太近不能捕捉到它的全部一样.
注意: 最初这个游戏是为Iphone 3.5英寸和4英寸设计的这就是为什么所有的游戏设计都支持1136 x 640 和 960 x 640. 但是接下来你会看到UI是如何在不同的游戏中进行适配的.
第一个问题默认导入设置的问题,在下一章你就会解决它。 用这个你就会解决你的第二个问题Reference Resolution Component.
在项目中你需要你写稍大的图片,为了防止Unity把它们缩小了.
在项目浏览器中打开Menu文件,选中menu_background 图片. 在Inspector中, 选择默认选项卡,这是最大尺寸为2048,点击应用.
现在在hierarchy 选择img_background,然后再一次点击Set Native Size. 宽高应该变成了正确的了,就着了1136和640.
看到了吗? 的确很容易去解决,解决下一个!
当你有了一个正确的背景图片时,是时候去调整它显示的方式了.
首先,那种显示不是一个bug.你在Game视图中,设置较小尺寸为550×310,所以它仅仅显示了图片的一部分去适配Game视图.
如果你要把这个游戏运行在一个设备上或者仅仅是简单的拉伸你的游戏视图去适配整个图像,你就会看到整个背景图片.
尽管Unity的这是对大部分场景是管用的,但是当你需要一些不同的动作时就没那么管用了. 就好像你有一个小的显示器,不适配高分辨率的设备.
另外,很多游戏只支持一种分辨率.
设计师用这个解决方案去决定尺寸,位置和其他数据,所以,当你开发游戏的时候,你需要确保设计的特殊性避免多余的计算,这样用户就可以看预期中完全正确的界面了.
如果你已经忽略了设计是的决策,显然你知道那是需要花费一定代价的,用户的体验和多样的解决的方案是很重要的,你必须一直让你的设计师高兴
幸运的是,一个特别的组件来救急了. 这个组件叫做Reference Resolution ,你需要把它加入到Canvas 组件中.
在hierarchy中选择 Canvas, 然后点击 Add Component. 输入 Reference Resolution 查找要求的组件,在它显示到列表的时候点击它.
在添加这个组件的同时,设置他的分辨率为1136 x 640.此外,一路滑动到合适的宽高,后者干脆输入1
在这个更改在后,你会立即看到全部的背景图片,及时在小的Game视图窗口.
改变Game视图的分辨率去看看你的游戏在不同分辨率下的样子,例如iPhone3.5英寸,完全适配
现在我切换到场景视图,你会看到在你重新这是场景视图的尺寸时Canvas 的尺寸没有变化.
你可以看到,屏幕的边缘被裁剪了,而中间部分是完全可见的. 这是设置宽高为1(适配高)的结果.
这就是你该怎么管理你设计师关于背景的决定和用户潜在的分辨率.
但是这些按钮呢?当它们非常靠近屏幕的左边或者右边 灰发生什么呢?,你当然不想去裁剪或者隐藏它们
幸运的是,Unity有一个特点可以帮助你解决这个菜鸟级的错误,你马上就会学到它.
添加背景图像可能会有些费,主要是因为你设置了初始界面,做过几次之后你会发现安装很快的,眨眼的功夫
打开场景界面,并且选中菜单GameObject\UI\Image ,这会在视图的某一个地方加入一个白色的图片,下边就是
注意:要把图片放到最后,只需设置他的X和Y的属性为0就行了
现在,把这个白色的区域变成一个真正的图片
1.在hierarchy中选中Image,把它重命名为img_header
2.在项目浏览中打开Menu文件,搜索header_label图片
3.把这张图片拖入资源文件中
4.点击Set Native Size
你可以看到,添加另外一张图片非常容易。现在你需要处理一下位置,这回带你进入下一个练习,使用Rect Transform组件
如果你以前用过Unity,或者只要完成了这个教程some Unity tutorials on this website,对于变换组件你可能会有一些了解
如果没有,也没关系,在场景中他是一个放置位置,旋转,缩放对象的简单工具,它看起来就像下边
在你的Hierarchy中,当前你选中GameObject任何一种类型是,你就会看到变换组件
但是,如果你选中了UI 元素,例如img_header,你会看到不同的区域变换组件名称
正如你所看到的,Transform和Rect Transform还有点不一样,Rect Transform 可以依靠锚点设置,去改变样子,例如,它可以看起来是这样的:
注意:使用Left ,Top, Right, Bottom 代替X,Y,Width,Height
你是否还在好奇设置锚点是如何戏剧性的改变了Rect Transform的外观的?
在下一单元你会看到答案
设置锚点是一个简单,有效的方法去控制位置和UI元素的大小,相对于他们的父元素,当你重新这只父元素大小的时候,使用锚点是相当便利的
当你设置锚点的时候,在父元素中你指定几个位置,通常是一个中心位置,当如元素大小改变的时候,你的UI元素会尝试和锚点保持均匀的距离,会强制它去移动或者重新计算大小
要想看到不同的锚点调整 ,只需要在hierarchy中选中img_header,在Rect Tramsform 组件中锚点区域的便便区域的右侧点击
点击之后,你会看到各种的锚点调整,这是锚点调整常用的设置,但是你并不局限于这些设置,你可以定制他们.你也可以为你的UI元素选中不同横向或者纵向动作。
一旦你去做这件事了,就会非常有意义。如果你看一下下边的兔皮哦按,它的背景图片不可用,你会看到Canvas 的尺寸变好了一点点
正如你所看到的,锚点设置控制你的UI元素是如果适配屏幕的变化的
我确定你想去尝试不同的设置,以便去理解他们是如何工作的,但是在那之前你要确定你至少阅读过了下边的章节,他会对你理解锚点有一点帮助的,会让你得到更多
现在,锚点用四个角显示,下边是设置成top_center 看起来是下边这样的
你可以手动的移动锚点的位置,这些调整完全是可选的,者根据你的设施环境
注意:你会发现你你的锚点icon被译文图标挡住了,确保不能选中锚点
在这种情况下,通过选中一个锚点预设去选中锚点(例如,屏幕的右手边)。这个锚点图标会转移成屏幕的一部分,满足你选中移动它的愿望
注意:当你重新设置Canvas的大小的时候看到图片是怎么移动到右边的了吗?,相对于Canvas的右边缘它只移动了一点点。这是因为锚点设置成Canvas宽度的百分之二十五
你可以横向,纵向的拉伸UI元素去分割锚点,或者这两个方向同时进行
注意:当你拖动Canvas的一个边时,你并没有真正地改变它的尺寸,实际上,你不能通过这种办法改变Canvas的尺寸
看单词Preview,在你视图去调整尺寸,挨着光标的。用它来试验大小去看一下你的UI元素是如何适应屏幕的
通过锚点设置,Rect Transform 提供了不同的方法去控制你的UI元素大小和尺寸
如果你没有拉伸,而是把锚点设置成一个点,你会看到X ,Y,宽,高属性
但是如果你用这种拉伸UI元素的办法设置你的锚点,你会得到Left和Right而不是 X和宽度(如果你往横向拉伸),得到Top 和Botton而不是Y和高(如果你往纵向拉)
在这个屏幕截图中,img_header的锚点设置成middle-stretch,这意味着图片呆着Canvas的正中间
由于X和宽度取决于父元素的宽度,设置父元素的左边右边的边距
关于Rect Transform 最有一个性质就是中心旋转
支点是一个围绕所有变化的点。用另一种话说,如果你设置你的UI元素的位置,你就会设置支点,如果你旋转你的UI元素,它就会绕着这个点旋转
支点是设置在普通的坐标系中,这意味着在宽和高上他是从0到1的,(0,0)是左下角,(1,1)是右上角
注意你也可以在UI元素的外边设置支点。在这种情况下,支点是在(0,0)-(1,1)的区域中。这个是很有用的,例如,在场景中你想让你的对象绕着某些点旋转,提醒你一下,你必须确保Privot/Center 按钮固定在支点上,像这样:
你可以在面板中的Rect Transform组件中改变支点,或者你可以使用Rect Tool
看看下边的两张图片,你会看到相同X和Y的的UI元素,在场景中显示的却是不同的位置
第一张图片支点在它默认的位置(0.5,0.5),是UI元素的中心,位置是(0,0),锚点设置的是top-left
注意:理解了UI元素的位置是相对于锚点是很重要的。这就是锚点设置为Canvas的左上角,(0,0)的位置相对于锚点是有距离的
现在看第二张图片。你可以看到,位置在(0,0)没有变,但是当支点设置在左下角(0,0),你可以看到图片的底部中心,而不是中心,他现在放在Canvas的左上角
使用一张静止的图片很难展示支点是如何影响旋转和尺寸的,这里有几个动画
请注意,图片周围的蓝色圆圈,这些点你可以随意移动去看看图片是如何绕着支点旋转的
注意:固定住ALT键值 当你绕着支点支点缩放大小的时候
正如你所看到的,支点也影响这你UI元素的尺寸
注意:另外一个你需要理解的重要事情就是当你改变UI元素的大小时,你没有改变它的比例,二十改变了它的大小,宽,高,顶部,右边,左边,底部的间距
这些中间也有不一样的,例如,尺寸不能是负的,但是比例可以,使用负值可以是你的UI元素弹跳,在大多数情况下,你只需要更改你UI元素的大小
唷!Rect Transform 可真是有不少东西。锚点和支点。相信我,你会为你完成了这个联系而庆幸的,理解他们对你游戏的UI是必不可少的
展望未来,你会专注于创建菜单,余下的章节中会在泪光中度过的
那些控制已经完全消耗了可怜的img_header.是时候去把它放在它应该在的位置上,让他单独去覆盖。
在你往下读之前,重新让背景图片可用,如果你看不到Canvas的边的话
然后在hierarchy中选中img_header ,按照下边去设置它的属性
1.点击Set Native Size去重新设置尺寸,因为你已经在玩指点的时候把它弄乱了
2.设置支点为top-center
3.设置位置X为0 位置Y为-100
你会在场景中看到
现在,顶部图片独立出来了,有点累了
现在,你的app已经有一个漂亮的背景了,并且有一个标签,是时候去加一些按钮了
在菜单中选中GameObject\UI\Button。这样就会在场景中加入一个按钮,你会在Hierarchy中看到。如果你让他在hierarchy中张开,你会看到这个按钮包含一个文本标签-过会你会学到
查看下面板中的按钮,你会看到它有一个相似的Image组件,和你添加的背景图和头部标签一样
另外,还有一个按钮组件,换一种话说,一个按钮就是一个包含文字内容的图片
注意:文字标签是可选的,如果你有一个拥有文本的按钮图片,你可以删除文本元素。在这个教程中你会多次做这个的
现在,剩下设置按钮的位置和大小了,下边是步骤
1.在Hierarchy中选中Button ,把它重新命名为btn_start
2.把它的锚点设置为bottom-stretch,因为你让他横向拉伸当屏幕变化的时候
3.设置Left和Right 为400
4.设置高度为80
5.设置Y为300
然后选中嵌入的Text元素,设置文本为Start Game。把字体大小改为32
下边就是你应该在场景中看到的
你已经顶一个按钮了,你肯定还需要给它整整容,让这个按钮看让去好看,你可以为按钮设置一个背景图片,然后使用一个合适的字体
你按照设置图片的方法为按钮这只了一个图片。毕竟,他们使用的是相同的组件。但是,和图片仅有的比例不一样,尤其是不规则的,按钮经常会有不同的尺寸
当然,你也可以在你的游戏中为每一个按钮设置一张图片,但是这是很浪费空间的?你会使用到一个技术9切片缩放,这样你就可以使用一张小的图片是适应所有的尺寸
不,没有魔法似的结局方法,在你使用它们之前,你必须对图片做些处理
这个技术之所以能实现,是因为图片是不均匀的,他有九个区域,每一个位置的缩放都不一样
这样就保证了图片在任何尺寸看上去都是好的
在你能看到一个切片的图片之前,你需要设置这九个区域。打开Menu文件夹,选择btn_gslide_normal image
在面板的Import Setting 中。设置Format 为Truecolor ,然后点击Sprite Editor 按钮 打开精灵编辑view
注意:设置Format 为Truecolor 对图片的的比例是没有要求也没有关系的。但是,我体验到了压缩艺术在我这设置图片的经历中,所以我发现这样做更好,如果你的图片在压缩的过程中看起来还要,你就不需要这样设置
在Sprite Editor 中,设置Border 值为L:14 ,R :14 ,B:16 ,T:16.记得点击应用按钮!
重复btn_9slice_highlighted 和btn_gslice_pressed 图片,你会看到不同的按钮状态
在准备好所有的图片后,你只需要把他们拖入到corresponding 区域中,在hierarchy中选中btn_start,下边是步骤
1.把Image Type 变为在Imge组件中 的Sliced
2.把Transition变为在Button组件中的SpriteSwap
3.在把btn_9slice_normal 拖到Image 组件中Source Image中
4.在Button组件中把btn_9slice_highlighted 拖到Button组件中Highlighted Sprite 中
5.在把btn_9_slice_pressed 拖到Button组件中Pressed Sprite中
注意:如果你遇到这个错误信息,This image doesn’t have a border,你或许是忘了在Sprite Editor 中设置border了,这是个很重要的设置
在运行场景和看到这些非常酷的按钮之前,你需要花费几秒钟去改变嵌入在里边的文本字体。这会让这个按钮更加完美的
使用普通字体很容易,还记得你加入到项目中那个你所下载的Fonts文件夹么?现在可以把它拿出来使用了
选中btn_start下边的Text 标签,然后打开项目目录中的Fonts文件夹,把TitanOne-Regular 拖入到Font 框中。把Color设置成白色
现在运行场景,看看你的完美的按钮吧
你是否注意到你可以透过按钮看到背景?由于你想达到的目的不同,这点可能是好的也可能是坏的。作为这个游戏的主按钮,最好还是删除这个透明度
注意:我相信之所以默认成透明的,是因为在你的游戏界面中按钮实在视图的上方,你可能会想透过按钮看到背景,比如遥感按钮
取消透明花费不了多少时间。在Hierarchy中选中btn_start,双击Image组件中的Color属性。在打开的颜色对话框中设置A为255 ,关闭窗口
现在看起来好多了
在你往下走之前还有几件事情要做,其中一件事就是设置按钮
你自己都可以做这件事,首先你要获取按钮的大小为位置,剩下的就和你创建开始按钮一样了
注意:复制按钮和调整按钮的属性很容易,但是你还是要去尝试重新创建按钮,因为你是来学习的
下边就是设置按钮不同的地方
* 名称:btn_settings
* Rect Transform:左边和右边是450.高度是70 Y值是180
* 文本 :Settings
创建设置按钮需要帮助吗?
如果你不能立马创建,跟着下边的步骤
1.选中 菜单中的GameObject\UI\Button,这样就能在场景中创建一个按钮
2.在Hierarchy中选中Button,把它重命名为btn_settiings
3.设置按钮的锚点为bottom-stretch
4.设置左边和右边的Rect Transform为450
5.设置高度为70 ,Y的位置为180
6.设置Button组件中的Transition为SpriteSwap
7.确保Image组件中的Image Type为Sliced
8.打开项目浏览器中的Menu文件,把btn_9slice_normal 拖到资源图片中
9.把btn_9slice_highlighted 拖到Highlighted Sprite
10.最后,把btn_9slice_pressed 拖到Pressed Sprite中
11.双击Image组件中的Color,把它的A设置为255 ,删除透明度
13.选中Text标签
14.把文本变为Settings
15.设置字体大小为24
16.把颜色变为白色
17.打开项目目录中的字体文件夹,把TitanOne-Regular 字体拖入到Font框中
加好设置按钮之后,你会看到
最后一项任务就是点击开始按钮,运行这个项目
在你运行不同的场景之前,你需要把他们添加到你的场景列表中,确保他们在项目最后被加入了
打开 Build Setting对话框 ,选中File\Build Settings….在项目浏览器中打开Scenes,拖住MenuScene首先,然后RocketMouse场景就在Scenes列表中了
注意:顺序很重要
然后打开Build Setting 对话框
当你为按钮添加事件时,你需要指定当点击按钮时调用是哪个方法。这就意味着你需要绑定一个对象,因为你不能用静态方法
所以,添加一个一个空的游戏对象,把它绑定到一个script中。这个脚本包含了你在场景中调用的所有方法
在菜单中选中Game\Create Empty 。然后选中hierarchy’中的GameObject,然后把它重命名为UIManager。
然后,点击面板中的Add Component 选中 New Script.把它命名为UIManagerScript.把语言设置为CSharp,然后点击Create and Add
下边就是你应该会看到的
双击面板中的UIManagerScript,一旦脚本加载完毕,删除Strat和Update方法,添加StartGaem方法
public void StartGame() { Application.LoadLevel("RocketMouse"); }
在没有任何错误的情况下保存文件,选中Build\Build All
切换到Unity ,并按照下列步骤操作:
1.在hierarchy中选择btn_start ,向下滑到On Click 列表中
2.点击加号添加一个新的
3.然后拖动hierarchy中的UIManager。把它添加到列表中
4.在下拉框中把它功能设置为No Funcation
5.在打开的菜单中选择UIManagerScript\StartGame ()
点击开始按钮运行场景,就会打开游戏场景了
在这个教程的最后一部分,你不需要做什么,你设置了UI界面,添加了图片和按钮,甚至写了点击按钮开始游戏的代码
在大部分游戏中,这些都包含在UI中
你也学到了很多关于Rect Transfom,锚点,中心旋转等等。你现在已经理解他们了,当你他们运用到你的工程中的时候你就会更快了,你可以在这里下载项目
下边你会学到如何为UI元素添加动画,创建对话框,使用像Slider和Toggle这种控制器,最后你会做好一个可以工作的菜单
如果你有任何问题,请把他们写在下边,第二部分见