个人技术总结——Unity3D实现UI界面设计

222000314邵彧扬学生 2023-06-07 23:08:24

这个作业属于哪个课程	2023年福大-软件工程实践-W班
这个作业要求在哪里	软件工程实践总结&个人技术博客
这个作业的目标	1、课程回顾与总结 2、个人技术总结
其他参考文献	《构建之法》

1 技术描述

使用场景

在使用 Unity 3D 制作游戏时，需要构建一些信息交互等用户界面时使用。

学习原因
团队项目使用 Unity 3D 制作一款联机的平台跳跃类游戏，游戏中涉及到用户的账号信息以及游戏中大量的用户交互信息。

技术难点
需要学习各种复杂的 UI 控件以及组件，并且需要使用C#来编写一些特定的脚本来完成相应的工作。

2 技术详述

UI简单来说就是一个在游戏中作为菜单状的一个东西，上面每个按钮，每个背景都是我们去设计的，并且实现的功能

UGUI 是 Unity 官方的 UI 实现方式，其系统相比于 OnGUI 系统更加人性化，而且是一个开源系统，利用游戏开发人员进行游戏界面开发。UGUI 系统有3个特点：灵活、快速、可视化。对于游戏开发者来说，UGUI运行效率高，执行效果好，易于使用，方便扩展，与 Unity 3D 兼容性高。

在unity中对于UI的制作，首先要先创建一个canvas画布，然后在画布上开始用自己拥有的素材开始制作UI。

在这里注意几点问题，一是canvas画布大小不需要去改变，虽然看起来它比地图大了很多，但是我们只需要再创建一个新的相机即可，不需要去改变画布的的大小，如果将画布的大小设置成与地图大小一致，则会出现很多麻烦，比如Text文本框无法正常使用，会出现字体大小不匹配等一系列麻烦。

只需要将新创建的相机拖入到canvas中的Render Camera，然后将画布中的一些属性进行一些小的调整如图：

这样就能让UI被新创建的相机进行拍摄，然后再将新创建的相机属性进行一些调整，就可以让这个UI相机只对UI进行拍摄：

而对于unity自带的一些UI的简单操作，常用的一般只有Image(背景板),Button（按钮）,Panel（背景板）,Togger(可做切换背包时的一个按钮，可以随着点击而显现不同的ui)，Slider(拖动条或进度条)，Text(文本框)等，这些都是常用的一些基本的UI。

而这一些简单的UI，都可以作为组件添加到Image背景板上，可以让image又更多的功能及作用。

对于togger的使用

首先将togger作为组件挂载在想要改变的UI上，或者直接使用unity自带的UI togger也是可以的，然后自己编写一个脚本：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class MyToggle : MonoBehaviour
{
    public GameObject isOnGameObject;
    public GameObject isOffGameObject;

    private Toggle toggle;

    // Start is called before the first frame update
    void Start()
    {
        toggle = GetComponent<Toggle>();
        OnvalueChange(toggle.isOn);
    }

    public void OnvalueChange(bool isOn)
    {
        isOnGameObject.SetActive(isOn);
        isOffGameObject.SetActive(!isOn);
    }
}

然后这样就可以将自己改变所拖动的UI的is on的选定与否，这样就可以控制ui的显示

*如果要用togger来做背包的面板切换的话，可以将多个togger按钮进行一个分组，就是把它们变成一个单选按钮，具体操作就是将多个togger按钮全选，然后拖动到togger的Group的属性上，然后再挂载上一个togger group组件，这样就可以把多个togger按钮变成一个组，变成单选按钮，然后在每个按钮下再制作想要分类的UI，这样就可以完成一个背包的切换功能了。

2.1 组件

UGUI 中最重要的一个组件就是 Canvas 画布，它是摆放所有 UI 元素的区域，在场景中创建的所有组件都会自动变为Canvas游戏对象的子对象。
在 Unity 3D 中创建 UGUI 控件后，会同时创建 Event System 事件系统的 GameObject，用于控制各类事件。Unity 3D 自带两个 Input Module ，一个用于响应标准输入，另一个用于响应触摸操作。
Text组件是UGUI中最常用的组件，它的作用是对文本数据进行处理并显示。

Font：显示文字的字体
Line Spacing：行与行之间的垂直距离
Rich Text：富文本格式勾选后可以显示文本中的标记标签信息
Image组件是UGUI中比较常用的组件，用来控制和显示图片。

Source Image：需要显示的图片的来源
Color：图片的颜色
Material：渲染图像的材质
Raycast Target：能否接收到射线检测
Image Type：图片的排列方式
Button是一个按钮组件，在开发中经常使用，通过单击按钮执行某些事件、动作、切换状态等。

Interactable：是否启动按钮取消勾选则按钮失效
Transition：按钮状态过渡的类型
Navigation：导航
On Click：按钮单击事件的列表设置单击后执行哪些函数
Button组件可以通过On Click手动添加监听事件，也可以通过代码动态添加监听事件
Toggle组件通常进行状态判断，如是否记住密码，是否开启某些指令等。
Slider是一个滑动条组件，可以用来制作血条、进度条、滑动条、游戏音量制作等。
ScrollView组件是一个滚动窗口以及区域组件，在做游戏背包或者商城展示大量物品时，可以使用ScrollView组件。
Dropdown组件是下拉菜单，可用于快速创建大量选择项、创建下拉菜单模板等，比较常用的功能有添加选项、添加监听事件。
InputField组件是输入框组件，是一个用来管理输入的组件，通常用来输入用户的账号，密码或者再聊天室输入文字。

2.2 预制体

在 Unity 中，预制体的作用是重复利用资源，比如房间界面中大量不确定的房间数，游戏世界的花草树木、房屋建筑。这些资源都是重复出现的，我们可以将它做成预制体，方便重复利用。而制作预制体的方法也很简单，只需要将场景中的控件、模型等拖入到 Hierarchy 面板即可。

预制体覆盖、同步也很容易做到在修改完其中一个组件后，点击 Overrides 后再点击 Apply All 即可。

2.3 图片资源的存储

组件中想用到自己的各种图片资源，可以在项目中新建一个文件夹，将图片资源添加进去。

接着点击添加的图片，将图片的 Texture Type 改为Sprite(2D and UI)，点击应用后，即可在组件的image属性中选择。

2.4 脚本的使用

在组件中可以选择已有的组件或者自己新写的脚本进行添加即可。

2.4.1 界面的跳转

首先点击 file ，再点击 Build Settings 将需要使用的场景添加进去（当前点开的场景）。

接着便可以在 C# 使用SceneManager的LoadScence进行跳转的工作

2.4.2 创建房间的自动生成

需要使用到预制体

2.4.3 游戏内部交互信息的显示

注意信息的显示逻辑，通过设置点击选中显示相应的信息。

2.5 游戏对象管理和优化

使用List来存储战斗单位的引用，以便在需要时对其进行管理和操作。这样可以方便地对战斗单位进行更新、移动、攻击等操作。

public class BattleManager : MonoBehaviour
{
    public GameObject unitPrefab;
    public int numUnits;
 
    private List<GameObject> units = new List<GameObject>();
 
    private void Start()
    {
        CreateUnits();
    }
 
    private void CreateUnits()
    {
        for (int i = 0; i < numUnits; i++)
        {
            GameObject unit = Instantiate(unitPrefab);
            units.Add(unit);
        }
    }
 
    private void Update()
    {
        // 更新战斗单位的逻辑
    }
}