# 用户界面和UI系统

u3d有2个UI系统，一个是传统的UGUI，一个是UI TOOL KIT,现在网上大部分教程都是UGUI的，而且UGUI主要以图片为主，可以做出更好看的效果，本文也使用UGUI

#### 开始
为便于观察，可以将编辑器设置为2D模式

[![](https://iovhm.com/book/uploads/images/gallery/2025-01/scaled-1680-/7HMD1vIoJQfuFEyp-image-1736397717035.png)](https://iovhm.com/book/uploads/images/gallery/2025-01/7HMD1vIoJQfuFEyp-image-1736397717035.png)


**在层级管理器上右键->ui->canvas**，此时编辑器将自动增加一个EventSystem,EventSystemy用于处理输入事件。

也可以直接增加一个image控件，编辑器也会自动帮忙增加canvas和Eventy System，所有的UI组件实际上都扩自image,可以在image上增加组件，此时，这个image就变成了一个按钮，可以处理按钮事件了。

##### 使用中文字体

**window->TextMeshPro->Font Assets Creator**

[![](https://iovhm.com/book/uploads/images/gallery/2025-01/scaled-1680-/lTpVCQm1ULvsHbl9-image-1736395317229.png)](https://iovhm.com/book/uploads/images/gallery/2025-01/lTpVCQm1ULvsHbl9-image-1736395317229.png)

**注意character set** 选择**characters from file**,并在项目创建一个txt文件，文件编码为utf8,把你需要使用的文字输入进去，即默认不会有文字

x想要获得得更清晰的显示效果，可以选择**Render Mode****SMOOTH_HINTED**，默认是**SDFAA**生产速度最快，但是显示效果一般

然后点击Generate Font atlas生成，最后点击保存，即可以使用中文字体了

#### 处理按钮事件

新增一个脚本**UiEvents.cs**，新建一个GameObject, 并将脚本挂载上去，回到button上，附件相关事件

```csharp
public class UiEvents : MonoBehaviour
{

    public void OnBtnStartGanmeClick()
    {
        Debug.Log("Button Clicked");
    }
}

```

[![](https://iovhm.com/book/uploads/images/gallery/2025-01/scaled-1680-/GsQZMgL27D16mzEJ-image-1736397523545.png)](https://iovhm.com/book/uploads/images/gallery/2025-01/GsQZMgL27D16mzEJ-image-1736397523545.png)

[![](https://iovhm.com/book/uploads/images/gallery/2025-01/scaled-1680-/HUREny7SfjrZAY68-image-1736397672311.png)](https://iovhm.com/book/uploads/images/gallery/2025-01/HUREny7SfjrZAY68-image-1736397672311.png)


#### 使用布局系统

使用锚点确定对其方式，可以按照我们常见的布局模式，使用Panel先画出区块，例如top,left，以适用自适应

[![](https://iovhm.com/book/uploads/images/gallery/2025-01/scaled-1680-/0A4LuFXNVBKBVHnP-image-1736397960587.png)](https://iovhm.com/book/uploads/images/gallery/2025-01/0A4LuFXNVBKBVHnP-image-1736397960587.png)

使用Panel先画出区块，例如top,left，以适用自适应

[![](https://iovhm.com/book/uploads/images/gallery/2025-01/scaled-1680-/UBw1UqHz9vM42BZW-image-1736398582800.png)](https://iovhm.com/book/uploads/images/gallery/2025-01/UBw1UqHz9vM42BZW-image-1736398582800.png)


增加一个GameObject,增加组件，搜索Layout，根据需要，选择网格布局、垂直布局、水平布局
[![](https://iovhm.com/book/uploads/images/gallery/2025-01/scaled-1680-/uynAddzGeckk6w5P-image-1736399345363.png)](https://iovhm.com/book/uploads/images/gallery/2025-01/uynAddzGeckk6w5P-image-1736399345363.png)


#### 常用组件
- Toggle（复选框）

[![](https://iovhm.com/book/uploads/images/gallery/2025-01/scaled-1680-/tkr1h39vzxwDzwId-image-1736516396807.png)](https://iovhm.com/book/uploads/images/gallery/2025-01/tkr1h39vzxwDzwId-image-1736516396807.png)

组件由Background（未选中状态），Checkmark（选中状态），Label（文字）三部分组成，可以分别设置单独的背景实现效果

- Slider（滑动动条）

[![](https://iovhm.com/book/uploads/images/gallery/2025-01/scaled-1680-/2dhmmswy5JKZWg0x-image-1736516793079.png)](https://iovhm.com/book/uploads/images/gallery/2025-01/2dhmmswy5JKZWg0x-image-1736516793079.png)

组件由三部分组成：Background（背景），Handle（滑块），Fill（填充）组成，既在最左边时，全部是背景，随着向右滑动，填充fill

- Scrollbar（滚动条）
滚动条由：Scrollbar（滚动条）、Handle（滑块）组成

[![](https://iovhm.com/book/uploads/images/gallery/2025-01/scaled-1680-/OXjv0CHjlVwUqvok-image-1736517559066.png)](https://iovhm.com/book/uploads/images/gallery/2025-01/OXjv0CHjlVwUqvok-image-1736517559066.png)


#### 注意事项

如果提示说新老版本的input system不兼容，需要在**EventSystem**上执行相关操作

[![](https://iovhm.com/book/uploads/images/gallery/2025-01/scaled-1680-/wXQoKhHnLVtHyTk3-image-1736527829447.png)](https://iovhm.com/book/uploads/images/gallery/2025-01/wXQoKhHnLVtHyTk3-image-1736527829447.png)