Unity3D游戏编程-血条

Unity3D游戏编程-血条

文章目录

• Unity3D游戏编程-血条
• • 一、作业要求
  • 二、项目配置
  • 三、项目演示
  • • （1）视频演示
    • （2）项目下载
    • （3）文字说明
    • （4）项目截图
  • 四、前置内容
  • • （1）IMGUI
    • （2）UGUI
  • 五、实现过程和方法(算法）
  • • （1）IMGUI
    • （2）UGUI
  • 六、分析两种实现的优缺点
  • • （1）IMGUI
    • （2）UGUI
  • 七、参考资料

一、作业要求

血条（Health Bar）的预制设计。具体要求如下：

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

二、项目配置

Windows 10
Unity 2020.3.17f1c1

三、项目演示 （1）视频演示

点击此处可以前往
可开启字幕观看。

（2）项目下载

下载Assets文件夹
点击此处可以前往gitee

（3）文字说明

1. 创建unity专案后，将保存的文件夹中的Assets替换成在上面项目下载的Assets文件夹
2. 打开专案，然后点选Assets > Scenes的play加载场景
3. 运行游戏
4. 点击+/-按钮可以对IMGUI的血条血量进行增加或减少

（4）项目截图

四、前置内容 （1）IMGUI

代码驱动的 UI 系统，没有图形化设计界面，只能在 OnGUI 阶段用 GUI 系列的类绘制各种 UI 元素，因此 UI元素只能浮在游戏界面之上。

（2）UGUI

所有 UI 元素都是游戏对象，友好的图形化设计界面， 可在场景渲染阶段渲染这些 UI 元素。

---

五、实现过程和方法(算法） （1）IMGUI

IMGUI主要利用按钮，来对血条进行血量的加和减。
并且利用HorizontalScrollbar来显示滑条。

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

public class IMGUI : MonoBehaviour
{
    public float value;
    public float pos;
    private float tmp;
    int middle = Screen.width / 2;
    
    private void OnGUI()
    {
        if (GUI.Button(new Rect(middle - 160, 50, 40, 40), "+"))
        {
            //当按下+时，血量增加
            tmp += 5;
            if (tmp > 100)
                tmp = 100;
        }

        if (GUI.Button(new Rect(middle + 120, 50, 40, 40), "-"))
        {
            //当按下-时，血量减少
            tmp -= 5;
            if (tmp < 0)
                tmp = 0;
       }

        value = Mathf.Lerp(value, tmp, 0.05f);//更新血条的长度数值
        //Mathf.Lerp是用来取value和tamp的中值，第三个参数是倾向

        GUI.color = Color.red;//设置颜色
        //设置滑条参数分别是
        //(位置，滑条左边的初始位置，滑条的长度，整个滑条的初始值，整个滑条的最大值)
        GUI.HorizontalScrollbar(new Rect(middle - 100, 60, 200, 20), pos, value, 0, 100);
    }
}

---

（2）UGUI

1. 创建GameObject > UI > Slider
2. 打开Slide的子组件，点击Handle Slide Area，把可视化去掉
   
3. 点击Fill Area，调整以下参数：

锚点位置是middle center
pos X = pos Y = pos Z = 0;
width = 160 ; height = 10

4. 点击Fill，修改color颜色
   

5. 点击slider，右侧Inspector下滑，修改以下参数：

Max value = 100
value = 10

这样就可以看到血条变化了：

6. 创建给血条添加自动变化的脚本（血条自动减少增大，并且随血量变换颜色）：

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

public class UGUI : MonoBehaviour
{
    public Slider slider;
    float factor = 0.1f;
    public bool active = true;
    private int turn = 1;
    
    private void Start(){ }
    
    void change() {
        if (turn == 1)
            slider.value -= 0.3f;//血量减少
        else 
            slider.value += 0.3f;//血量增加

        if (slider.value <= 0) {
            slider.value = 0;
            turn = 2;
        }
        if (slider.value >= 100) {
            slider.value = 100;
            turn = 1;
        }
    }
    void Update () {
        //看向镜头位置
		this.transform.LookAt (Camera.main.transform.position);
        
        if (active)
            change();
        Color current = slider.fillRect.transform.GetComponent().color;
        if (slider.value <= 60) {//根据血量转换颜色
            slider.fillRect.transform.GetComponent().color = Color.Lerp(current, Color.red, factor);
        }
        else {
            slider.fillRect.transform.GetComponent().color = Color.Lerp(current, Color.green, factor);
        }
	}

}

7. 把脚本拖给Canvans，再把Slider拖给脚本内的slider参数

点击运行就可以看到效果。
8. 修改Canvans的名字为HealthBarUGUI，并且拖入Asset，成为预设。

---

六、分析两种实现的优缺点 （1）IMGUI

优点：

1. UI元素只能浮在游戏界面之上，因此IMGUI系统通常不打算用于玩家可能使用并与之交互的普通游戏内用户界面。
2. 符合游戏编程的传统，可以仅靠编程实现。
3. 对新手友好，入门容易，同时帮助理解游戏引擎渲染的调用函数。

缺点：

1. 难以调试，无法直观看到UI布局情况，需要使用代码一点一点更改位置。

（2）UGUI

优点：

1. 所见即所得设计工具。
2. 支持多模式、多摄像机渲染。
3. 面向对象，每个控件都是一个对象，通过对其加减Component或者改变属性可以实现不同的效果。

缺点：

1. 使用困难，许多设计技巧和方法都需要查阅大量资料去学习。

---

七、参考资料

1. 【Unity3D】血条（Health Bar）
2. Unity控件HorizontalSlider与HorizontalScrollbar的一些区别