UI系统

UI系统

这是3D游戏编程的第九次作业

说明文档

本次实验采用IMGUI和UGUI两种方式制作了血条预制，并对比了两者的优缺点。

作业内容

血条（Health Bar）的预制设计

具体要求如下：

• 分别使用 IMGUI 和 UGUI 实现
• 使用 UGUI，血条是游戏对象的一个子元素，任何时候需要面对主摄像机
• 分析两种实现的优缺点
• 给出预制的使用方法

初始化

• 导入资源包Standard Assets
• 在游戏对象视图中加入Plane
• 使用标准资源包中的第三人称人物预制：
• 初始化工作完成，人物可以正常站立在平面上

使用IMGUI实现

IMGUI在前面的几次游戏制作里都有用到，它利用游戏事件循环来显示在整个游戏界面的顶部，既然要跟随人物，也就涉及世界坐标到屏幕坐标的转换：

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

public class HealthBar : MonoBehaviour {
  public float health = 0.5f;
  public float len = 200;
  public float width = 20;

  void OnGUI() {
    // 血条是挂载在任务上的，所以直接获取人物的transform，
    // 注意一点的是血条要在人物顶上
    Vector3 worldPos = new Vector3(transform.position.x, transform.position.y - 0.2f, transform.position.z);
    // 取到绝对坐标后，转化为屏幕坐标
    Vector3 screenPos = Camera.main.WorldToScreenPoint(worldPos);
    //计算血条大小比例
    float distance = (transform.position.z - Camera.main.transform.position.z - 10);
    float newScale = (distance < 0 ? 1 : 1 / (1 + distance)) * 0.5f;
    //生产HorizontalScrollbar
    GUI.HorizontalScrollbar(
    	new Rect(screenPos.x - (len/2)*newScale, screenPos.y, len*newScale, width*newScale), 
    	0.0f, health, 0.0f, 1.0f);
  }
}

重点有两个：

• 世界坐标转换为屏幕坐标：一开始我是想着自己计算的（有点不自量力），后来查思路的时候发现已经有了相关的函数：WorldToScreenPoint。
• 解决了位置后，还要考虑血条长度的近大远小问题：这里简单的用一个反比函数进行距离的比例计算。

另外就是既然使用的是IMGUI，自然调用的是GUI的函数，代码中使用的是滑动条，它的参数比较多：

public static float HorizontalScrollbar(Rect position, float value, float size, float leftValue, float rightValue);
public static float HorizontalScrollbar(Rect position, float value, float size, float leftValue, float rightValue, GUIStyle style);

Parameters

position	Rectangle on the screen to use for the scrollbar.
value	The position between min and max.
size	How much can we see?
leftValue	The value at the left end of the scrollbar.
rightValue	The value at the right end of the scrollbar.
style	The style to use for the scrollbar background. If left out, the horizontalScrollbar style from the current GUISkin is used.

解释：

GUI.HorizontalScrollbar(
    	new Rect(screenPos.x - (len/2)*newScale, screenPos.y, len*newScale, width*newScale), 
    	0.0f, health, 0.0f, 1.0f);

首先是位置参数，将其居中摆放在人物头顶上，并且长度根据比例变化。
随后是血条的值，left、right指定0和1表示最小最大值，value指定的是血条起始位置，size则是血量值。

效果如下

使用UGUI实现

这里参考老师的课程网站的方法制作：

• 菜单 Assets -> Import Package -> Characters 导入资源
• 在层次视图，Context 菜单 -> 3D Object -> Plane 添加 Plane 对象
• 资源视图展开 Standard Assets :: Charactors :: ThirdPersonCharater :: Prefab
• 将 ThirdPersonController 预制拖放放入场景，改名为 Ethan
• 检查以下属性
  • Plane 的 Transform 的 Position = (0,0,0)
  • Ethan 的 Transform 的 Position = (0,0,0)
  • Main Camera 的 Transform 的 Position = (0,1,-10)
• 运行检查效果
• 选择 Ethan 用上下文菜单 -> UI -> Canvas, 添加画布子对象
• 选择 Ethan 的 Canvas，用上下文菜单 -> UI -> Slider 添加滑条作为血条子对象
• 运行检查效果
• 
• 选择 Ethan 的 Canvas，在 Inspector 视图
  • 设置 Canvas 组件 Render Mode 为 World Space
  • 设置 Rect Transform 组件 (PosX，PosY，Width， Height) 为 (0,2,160,20)
  • • 设置 Rect Transform 组件 Scale （x,y） 为 (0.01,0.01)
• 运行检查效果，应该是头顶 Slider 的 Ethan，用键盘移动 Ethan，观察
• 

• 展开 Slider
  • 选择 Handle Slider Area，禁灰（disable）该元素
  • 选择 Background，禁灰（disable）该元素
  • 选择 Fill Area 的 Fill，修改 Image 组件的 Color 为 红色
• 选择 Slider 的 Slider 组件
  • 设置 MaxValue 为 100
  • 设置 Value 为 75
• 运行检查效果，发现血条随人物旋转
• 

给 Canvas 添加以下脚本 LookAtCamera.cs

using UnityEngine;

public class LookAtCamera : MonoBehaviour {

	void Update () {
		this.transform.LookAt (Camera.main.transform.position);
	}
}

实现效果：

优缺点分析

• IMGUI
  • 优点:
    使用方便，上手容易，调试方便
  • 缺点:
    效率低，需要每次onGUI重新生成所有组件
    配置不够灵活，实现运动、动画等比较麻烦
• UGUI
  • 优点:
    拥有UI状态，可以比较方便的修改其属性或进行其他操作(运动等)
    每次生命周期不需要重复遍历一次UI组件，效率较高
  • 缺点:
    使用比较繁琐、对不同的功能需要提供不同的canvas，并单独配置

预制的使用方法

将上面的血条脚本拖动到人物预制上即可。请查看具体实现的说明

传送门

gitee仓库