UGUI

Image

• Simple 常用简单模式
• Sliced 九宫格模式
• Tiled 瓦片模式
• Filled 填充模式

Sliced 九宫格模式

1. 选中图片。
2. 点击Sprite Editor打开精灵体编辑器（版本高的需要先到Window → Package Manager下载2D Sprite组件）。
3. 将其拖动到合适位置，点击Apply保存设置。

Tiled 瓦片

可以实现一格一格的血条

Filled 填充模式

可以实现普通的血条，进度条，技能冷却。

Scroll View

制作滚动地图

1. 右键创建一个Scroll View组件。
2. 在创建的组件下的Content下创建Image。
3. 将世界地图转换成精灵体后拖入Image,并调整Image锚点为基于父物体全屏平铺。
4. 调整Content锚点为居中，并调整Width和Height为合适大小（要大于Scroll View 尺寸，才能产生滚动效果）。

UI自适应布局

画布组件 Canvas

Render Mode 下的三种模式

• Screen Space- Overlay UI渲染在场景中所有游戏物体的最上层。
• Screen Space- Camera 指定相机渲染，可以用于3DUI制作
• World Space 世界空间，常用于场景中的交互游戏物体，如：游戏场景中电脑

3DUI

1. 将Canvas中的Render Mode中的参数改成Screen Space- Camera。
2. 将指定的相机拖入Canvas下的Render Camera。要指定渲染的相机必须是透视相机，因为只有透视相机才能体现出近大远小的效果。
3. 旋转场景中的UI，旋转UI点击E键就行，缩放UI点击T键就行。将UI放到指定位置。

World Space用法

缩放指定Canvas大小，拖放到指定位置。游戏场景中的电脑显示器之类。

Canvas Scaler 画布自适应

• Constant Pixel Size 恒定像素大小。
• Scale With Sxreen Size 缩放屏幕大小。
• Constant Physical Size 恒定物理大小。

其中缩放屏幕大小最为常用，因为不同机器上像素比例是不一样的。

Grid Layout Group/Vertical Layout Group/Horizontal Layout Group

网格布局中元素受限于网格布局设置的大小，横向布局和纵向布局不受限制。

游戏背包实现

1. 创建一个Scroll View。
2. 在Centent中添加Grid Layout Group。
3. 在Centent中添加Content Size Fitter，并调整Fit。
4. 在Centent添加元素物体。
5. 在上添加对应的图片。
6. 想要单方向滑动，更改游戏物体Scroll View上的Scroll Rest组件上的Horizontal和Vertical

可滑动文本框

1. 创建一个Scroll View组件
2. 在游戏物体Content上添加Text组件用于显示文本
3. 在游戏物体Content添加Content Size Fitter组件用于动态控制文本大小
4. 想要单方向滑动，更改游戏物体Scroll View上的Content组件上的Horizontal和Vertical

制作世界地图

1. 右键创建一个Scroll View组件。
2. 在创建的组件下的Content下创建Image。
3. 将世界地图转换成精灵体后拖入Image,并调整Image锚点为基于父物体全屏平铺。
4. 调整Content锚点为居中，并调整Width和Height为合适大小（要大于Scroll View 尺寸，才能产生滚动效果）。

常用UI组件

• Mash 蒙版
• Outline 描边
• Shadow 阴影
• Aspect Ratio Fitter 等比缩放