Canvas :
Canvas -->Render Mode(三种模式) :
Screen Space - overlay :此模式不需要UI摄像机,UI将永远出现在所有摄像机的最前面。
Screen Space - Camera :此模式需要一个UICamera,原理和NGUI相似,如果想要在UI前展示什么东西,可以创建一个深度大于这个UICamera的相机。
World Space :完全3D的UI
Canvas Scaler :
UI Scale Mode :Scale With Screen Size 表示以宽度为标准缩放;Screen Match Mode选择Match Width Or Height,比例设置为1,即只和高度适配。
Image :
Rect Transform : PosX PosY PosZ 中心点的坐标 Width Height 宽、高
Anchors :相对于父物体的位置,针对不同分辨率的自适应 (0,0)代表父物体的左下,(1,1)代表父物体的右上,锚点在父物体的某个位置,子物体与父物体就固定了这个间隔;四个锚点,相当于四根钉子,钉子Image的父级元素上。 四个实心蓝点,相当于四个纽扣,缝在Image的四个边上。 锚点和纽扣之间被四根无形的钢丝链接(注意是钢丝因为不会伸缩), 如果把Image调整好了大小,现在想让他随着屏幕的变化进行缩放,那么就把四个锚点,拖拽到四个纽扣上,相对于把Image 的四个角钉在了父级元素上,父级元素缩放就会拽着Image进行缩放,比例是一致的。 如果锚点合并在一起,相当于把Image四个角往同一个方向拽,所以不会改变Image的大小。
Pivot :自身坐标系,中心点的坐标(正中间为(0.5,0.5))
组件 :
Source Image --> 要显示的图片 (Sprite(2D and UI)) 等比例缩放 :T --> 按住shift拉 或 Preserve Aspect
Set Native Size 设置为图片原本的大小
Image Type :Simple、Sliced、Filled、Tiled
Sliced模式(图片切割) :选中图片 --> Sprite Editor(图片编辑器)切割 九宫格
Tiled模式(分裂) :选中图片 -->Sprite Mode改为Multiple --> Sprite Editor 切割图片 Sprite Editor --> Slice(切割模式) --> Automatic(自动切割)
Filled模式 :可以实现技能冷却的效果
Fill method :填充的方式
Fill Amount(0~1) :0为图片完全不显示,1为图片完全显示
UGUI的渲染方式 :在Hierarchy面板下,越靠下的越在前显示
this.transform.SetAsFirstSibling(); //设置该UI元素为第一个
this.transform.SetSiblingIndex(1); //用下标设置对象的位置
this.transform.SetAsLastSibling; //设置该UI元素为最后一个
如果给UI加动画,不能自动编辑动画时,需要手动添加 :Add property --> 对应的游戏对象 --> Anchered position (只第一个需要手动,之后的就可以自动添加了)
Button :
Transition :None、Color Tint、sprite swap、Animation
Color Tint :改Button的背景色
Sprite swap :放四种状态的图片,Source Image --> 正常显示 、HightLighted Sprite --> 停留、pressed Sprite --> 点击、Disable Sprite --> 冻结
Animation :Auto Generate Animation(自动创建一个Animator) --> ctrl+6,自动创建 --> Normal :对应创建好了4个对应状态
Navigation :选中多个Button
Automatic模式 :visualize(显示)自动寻路
Explicit模式 :自己设置寻路模式
加事件 :
On Click (+ -)事件,绑定一定的方法,点击按钮触发
Scrollbar(滑动条) :
Direction :拖动的方向
value(0~1) :从一端到另一端,size是Image Handle的大小
Number of steps :固定步长,一次能走多远
Slider(滑动条) : (可以做血条)
Direction :拖动的方向
value(0~1) :从一端到另一端
子物体 :背景,拉过的填充区域,和拖动的小球
Input Filed(输入文本框) :
On Value Change(string) :变化,把挂载写好方法的脚本的物体拖进去,找到方法,可以得到输入的文字
End Edit(string) :最终效果,用的更多
Grid Layout Group :
在父物体Image上加的组件,其所有子物体会自动排列,子物体不能拖动和改变大小
Cell size :改变所有子物体的大小
spacing :子物体之间的间隔
start comer :每一行的第一个在左或右;start Axis :水平或者竖直排列;constraint :放几行,放几列
Toggle :(复选框实现单选的效果)
Text :
Rich Text :勾选中后,html语言
RawImage :
需要Texture类型的图片,与Image基本类似