最近在学习Unity的过程中,自己做一款小游戏自娱自乐。自然需要用到GUI。但4.5中的GUI很难用,一个选择是传说中的NGUI插件。但对于4.6中的新GUI,我也有所耳闻。想了想还是选择官方的技术较好,于是就有了这篇。
Canvas
在新GUI中,所有的UI组件都位于Canvas上。Canvas有三种渲染模式:
- Screen Space - Overlay:将UI放置在场景的上面,调节场景大小或调整分辨率,则Canvas也会随之调整。
- Screen Space - Camera:Canvas由一个特定的相机渲染,相机的设置会影响UI。
- World Space:使Canvas像场景中的其他对象一样渲染。
Rect Transform
所有的UI元素都使用矩形来表示。
Rect Transform是为UI设计的新transform组件。除了普通transform组件的position、rotation、scale之外, 还增加了width和height。
Update:两种编辑模式:
- Blueprint:在此模式下,物体不会旋转和缩放。
- Raw Edit:在此模式下,调整物体的Pivot和Anchor不会改变物体的位置和尺寸。
Rect Tool
4.6的工具栏中加入了新的小工具Rect Tool,用于调整UI和2D对象。使用这个小工具,就可以完成移动、调整大小、旋转等工作。
当使用Rect Tool调整对象的尺寸时,如果是2D或3D对象,他会调整其scale;而对于有Rect Transform的对象,则会调整其width和height。
Update:Resize和Scale的区别:前者不影响字体大小;后者可以设置负值,相当于将物体反过来,前者不允许负值。
当切换至Pivot模式,可以调整其pivot。再次点击切换回Center模式。
Anchors
Rect Transform中增加了Anchors属性,其中包括Anchor Min和Anchor Max。Anchors用于指定在父UI元素调整时,子UI元素如何调整。具体行为由Anchor Min(左下)和Anchor Max(右上)两个锚点决定。坐标以矩形左下为(0, 0),右上为(1, 1)。
但实际上,Unity已经提供了预定义的模式。在Rect Transform的左上角点击,出现如下的常用Anchor模式。
以top-left模式为例,此时锚点位于父元素的左上角。如果拉动父元素矩形的左边框和上边框,则子元素的位置也随之变化。而拉动另外两条边则不发生变化。
在middle或center模式下,拉动轴两侧的边子元素均会随之移动。
此外还有stretch模式,在拉动时会拉伸或压缩子元素。
新的组件
- Text:也就是Label。
- Image
- RawImage:与Image不同之处在于,Image的参数是Sprite,而RawImage的参数是Texture。
交互
交互组件都有一个transition属性,用于实现组件在不同状态下产生不同的变化。有三个选项:
- Color Tint:改变颜色。有一个Fade Duration的参数控制变化的时长。
- SpriteSwap:不同状态下展示不同的Sprite。
- Animation:由一个动画控制器来决定显示。不同状态下触发不同的事件。
- None:没有变化。
Button提供了OnClick属性,可以为按钮添加响应。点击加号,可以添加一个委托。
其中有三个空,第一个表示目标对象,第二个表示要选用的函数,第三个是对应的参数列表,由前两项决定。
以点击按钮改变按钮的文字为例。第一个就是Button下的Text对象,第二个是Text.text,第三个则是你要改变为的内容。
此外还有其他的控件,如Toggle、Slider、ScrollBar、Selection List。
自动布局
一些更加复杂的布局技术,暂时没有这个需求,就不看了。
动画集成
这部分文档没写,囧。
富文本
Rich Text在新的GUI系统中默认是禁用的,但是可以通过GUIStyle来使用:
GUIStyle style = new GUIStyle ();
style.richText = true;
GUILayout.Label("<size=30>Some <color=yellow>RICH</color> text</size>",style);
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。