UI系统-作业与练习（9）

1.分别使用 IMGUI 和 UGUI 实现

IMGUI：

原理：IMGUI我打算直接用HorizontalScrollbar这个API来实现。HorizontalScrollbar是一个水平滚动条，外形与UGUI中的Slider类似，用法其实也差不多。然后在加上两个按钮，一个实现加血，一个实现减血。

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

public class HealthBar1 : MonoBehaviour
{
    // Start is called before the first frame update
    public float viewBlood = 10f;
    private float targetBlood = 10f;
    private Rect bloodBar;
    private Rect addButton;
    private Rect minusButton;
 
    void Start () {
        bloodBar = new Rect(Screen.width - 250, 20, 200, 50);
        addButton = new Rect(Screen.width - 250, 50, 40, 20);
        minusButton = new Rect(Screen.width - 90, 50, 40, 20);
	}

    public void addBlood() {
        targetBlood = targetBlood + 2 > 10f? 10f : targetBlood + 2;
    }
 
    public void minusBlood() {
        targetBlood = targetBlood - 2 < 0f? 0f : targetBlood - 2;
    }
 	private void OnGUI() {
        if (GUI.Button(addButton, " + "))  addBlood();
        if (GUI.Button(minusButton, " - ")) minusBlood();
        //viewBlood = Mathf.Lerp(viewBlood, targetBlood, 0.1f); //用来平滑血条变化过程

        viewBlood  = targetBlood;
        GUI.HorizontalScrollbar(bloodBar, 0f, viewBlood, 0f, 10f);
    }
}

这里血条是噗嗤一下突然间变化，显得很不自然，我们想要它一个渐变的过程，于是在查阅资料以及借鉴师兄的博客后，使用Mathf.Lerp来实现。

可能是截屏软件的问题，渐变的过程不太明显，不过unity的Game界面还是可以很明显的看出来的，并且变化的幅度越大，这个效果会越明显。

UGUI：

UGUI上课老师也演示过了，很直观。这里直接开始布置就好。
首先找一个动画模型，最好是人物的不过想找个能看的还免费的挺难的，最后这个还是看之前同学用过，直接添加进仓库后放入场景，之后以这个模型为父对像添加UI子对象。大致的对应关系如下图：


你可以选择把background去掉，就可以得到一个纯血条了。


按钮的功能实现和上面的IMGUI相似，写个脚本挂canvs上再选好对应就行。

到此两种方法都实现了。

2.使用 UGUI，血条是游戏对象的一个子元素，任何时候需要面对主摄像机

在之前的UGUI血条实现过程中发现，给模型加上移动脚本后，UI由于是其子对象会跟着他一起移动，
同时方向也会变化。

效果大概是这样。我知道很僵硬，别骂了别骂了

然后在此基础上给canvs加上时刻面向主摄像机的代码。这里有两种解决方式transform.LookAt(Camera.main.transform.position)以及transform.LookRotation(Vector3.forward)，比较下两种实现方式，transform.LookAt(Camera.main.transform.position)是面向主摄像机这个点，所以在转向的时候还是会发生抖动，相比之下，transform.LookRotation(Vector3.forward)面向正前方就稳定很多。不过不仔细观察的话没有很大的区别，所以就不单独截屏了，两段代码我都放进了脚本里，要看效果注释掉其中一个就好。

放一下修改后的效果：

这个僵硬是动画帧的问题，考虑到他不是重点，就将就看下

3.分析两种实现的优缺点

IMGUI

优点

• IMGUI 的存在符合游戏编程的传统
• 在修改模型，渲染模型这样的经典游戏循环编程模式中，在渲染阶段之后，绘制 UI 界面无可挑剔
• 这样的编程既避免了 UI 元素保持在屏幕最前端，又有最佳的执行效率，一切控制掌握在程序员手中，这对早期计算和存储资源贫乏的游戏设备来说是格外大的优势。

缺点

• IMGUI系统通常不打算用于玩家可能使用并与之交互的普通游戏内用户界面，因其难以调试。
• 传统代码驱动的 UI 面临效率低下

UGUI

优点

• 所见即所得（WYSIWYG）设计工具，设计师也能参与程序开发，说白了就是简单易懂
• 支持多模式、多摄像机渲染
• UI 元素与游戏场景融为一体的交互
• 面向对象的编程，这个程设也提到过

4.给出预制的使用方法

assets文件夹中找到sence文件夹中的Health Bar，双击场景化初始化后运行即可。

项目地址：https://github.com/BbeClinton/unity_game/tree/main/Health%20Bar