UI Component

见官教UI教程

--------------------------------

1. UI Canvas

unity里所有UI元素都必须在Canvas下，一个场景里可以有多个Canvas。

Canvas有3个Render Mode

Overlay & Camera模式都是所有的UI元素在场景内其他游戏对象的上方，且Rect Transform不可主动修改。里面的所有UI元素将自动随着屏幕按初始比例放大缩小。Camera不同于Overlay的是通过Camera远近来渲染，最常用于在3D模式下有个旋转（比如上图（修改Image的rotation），或者背包页前后摇摆的效果）。如果要做这种效果可以直接在使用这种效果的元素比如Image上新建Canvas父对象来设置，以免影响其他的元素效果。

 

World Space模式下该Canvas下的所有UI元素和场景里的其他游戏对象一样，固定在指定位置（常用于路标箭头，或者冒泡对话框等），此时Rect Transform可修改。在3D模式下可在其他游戏对象之后渲染，所有其内的UI元素都像其他对象一样，固定大小。

该模式下的Event Camera可自己选择，通常是主相机。Receives Events勾选后，表示该Canvas下的所有UI元素都可通过该相机接受Events比如Click等。

 

2. UI RectTransform

 

RectTransform和其他游戏对象的Transform组件一样，只不过RectTransform只用于UI元素，在二维上代表一个可以放下其UI对象的长方形（见图上说明）。但是RectTransform也有PosZ和Rotation，这是为了在3D模式下使UI元素可以像其他游戏对象一样旋转方向。

注意Anchor和Pivot的区别。Anchor是锚点(四个小三角），Pivot枢轴（蓝色小圆圈）。

参考：

http://k79k06k02k.com/blog/334/unity/unity-ugui-%E5%8E%9F%E7%90%86%E7%AF%87%E4%B8%89%EF%BC%9Arecttransform

 

Pivot有点象重心，比如一张图片的Pivot设在最左上角，旋转该图片就像在该Pivot点钉了个图钉，该图片以该Pivot点为中心旋转（调整图片旋转的方式是鼠标靠近图片四角的小蓝点就可以旋转了）。Pivot可以在该UI元素内，也可以超出该元素，如果超出该元素就像一个钉子上有段绳子下挂着该UI比如Image，旋转该UI就以该钉子为中心旋转。

 

PosX和PosY代表Anchor到Pivot的pixel距离。

 

Width & Height代表该元素的宽和高

 

上面说了Anchor代表一个可容纳UI元素的长方形。Anchor的边界代表其父对象的大小边界而不是子对象的（也就是说子对象不能超出其父对象的边界）。Anchor同时受其父对象和自身影响超复杂（想详细了解可从6F看起）。

 

像瞄准镜一样的那个图标是提供的常用Anchor解决方案，包括改变位置和Anchor，如果选择stretch（比如最右下角）则是铺满其父对象的一部分（右下角为铺满全部）。

 

Scale表示放大和缩小，当我们拖动边界放大缩小时是Resize，比如一张Image下有一个Text，调整Image大小只会改变Text的相对位置，不会改变Text的大小和字号。当使用Scale时则Image，Text的大小和字号全都作为一个整体被改变。当Scale某一项为 负值时表示翻转该UI元素（如果Height调整为负即Resize时则该UI元素不可见），常用于一些动画效果。

 

两种编辑模式：

 

摁住Shift拖动会等比例的缩放对象（2：20）

 

3. UI Button

7：00 讲怎样转换Animation，比如鼠标放在Button上该Button变大。

 

Button的OnClick事件选择方法，该方法必须是挂在某个游戏对象上的脚本，内的Public void的方法，可以有参数，但参数类型必须是（float，int ，string， bool， Object）

 

Object是指Unity里的所有对象，包括：GameObject，Component，mono behavior and more。

如果有参数，参数就在OnClick里填写或选取拖拽。

 

OnClick可以同时添加多个GameObject下的多个方法。（比如教程里的同时改变球体和胶囊的材质）。

 

4. UI Image

作为Button，Panel，slider或其他UI元素的组件。

 

注意不是这种Image

 

Image组件的Source Image选项是图片，即精灵。

 

Image Type有四种，Simple就是最正常的那种，Sliced表示切片（9宫格），Tilled像瓦片一样填充图片区域，Filled填充用于特殊用途比如Tanks！里的血条或者车速表等。

 

5. UI Text

没什么特殊的

 

6. UI Events and Events Triggers

每一个UI元素都可以添加Event Trigger组件，添加后可以选择所有事件类型，使比如Image可以像Button一样Call OnClick等。（我的妈呀，这个太厉害了）

 

比如教程里就给炸弹的Image添加了一个PointerEnter的事件，然后选择了方法后鼠标移动到上面炸弹就变红了（厉害厉害，装备系统完全可以这样做啊）。

 

7. UI Slider

Slider也有Transition但仅对Handle有效果，比如高亮只会改变Handle的颜色。

 

Slider有On Value Changed EventTrigger，很强大的功能，在教程里用于改变游戏背景音乐大小，改变灯光明暗，改变其他物体大小，调整摄像机的远近等。

 

在教程的最后说明了，如果用于血条等直接在脚本里控制Value而不用EventTrigger时，取消勾选Interactable。（如果不取消勾选，虽然Handle都删除了，Slider还是可以操作滑动的）

 

8. UI Transitions

 

Transition是UI Button，Slider等组件里的一个内置功能，表示UI元素被点击或鼠标指针飘过时的效果变化。Transition有四种None，ColorTint， SpriteSwap和 Animation。

None表示没有变化，即UI元素的功能还是和往常一样，但该UI元素不会改变视觉效果。

ColorTint表示颜色变化，也是最常用的一种。Target Graphic表示被改变的目标图片，比如Button的图片或Slider的Handle。

从5：00开始有怎样给Button编辑动画过度。

 

9. UI ScrollRect

见之前的教程笔记

10. UI Scrollbar

Scrollbar通常和ScrollRect一起搭配使用，使一块小区域内滚动显示更多内容。

和Slider一样，Transition只对Handle起作用。

 

11. UI Mask

 

通常和ScrollRect搭配一起使用，作用是像一个有洞的罩子一样罩在某张大图上，使其只显示这个洞区域内的大图内容。

要让Mask组件起作用，必须同时存在Image组件。Image组件的SourceImage可以为空。该SourceImage是指Mask洞的形状，默认为长方形。比如Image的图是个圆，那这个洞就是圆形。

如果不想显示这个Image，可以取消勾选Mask上的Show Mask Graphic