UI入门——血条制作

文章目录

• 实验内容
• • IMGUI制作简单血条
  • UGUI设计血条预制
  • 动态效果展示
  • 两种制作的优缺点
  • • IMGUI优缺点分析
    • UGUI优缺点分析
  • 预制使用方法
• 更新
• • 解决血条暴露行踪问题

 

实验内容

实现简单血条预制：

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

步骤分析:
首先IMGUI在之前的实验中也有用到，主要是用来设置开始游戏和结束游戏的界面。实现方法是在onGUI函数中添加相应的控件（Label、Button等）,也就是说每次都调用onGUI都会刷新一次所有控件。
而UGUI是课上新接触的UI设计工具。主要设计可以通过鼠标拖拽、设置属性等方式，在二维平面上完成UI设计，即时能够看到效果。换句话说可以不通过代码就能实现一定的UI效果。

分析完两者的一些区别之后就开始动手实现了。

IMGUI制作简单血条

由于IMGUI主要是通过代码来实现UI，所以也没有说需要建立模型什么的，调整位置也是靠代码控制xy坐标来实现。所以直接上代码：

public class IMGUIhealth : MonoBehaviour
{
    public float value;
    private float tmp;
    
    // Start is called before the first frame update
    private void OnGUI()
    {
    	// 加号按钮，点击时增加血量，每次增加十分之一
        if (GUI.Button(new Rect(450, 50, 40, 40), "+"))
        {
            tmp += 10;
            if (tmp > 100)
                tmp = 100;
        }
		// 减号按钮，点击时减少血量，每次减少十分之一
        if (GUI.Button(new Rect(100, 50, 40, 40), "-"))
        {
            tmp -= 10;
            if (tmp < 0)
                tmp = 0;
        }
		// 线性插值，使得变化更平滑
        value = Mathf.Lerp(value, tmp, 0.05f);
	
		// 使用HorizontalScrollbar作为血条主体，利用value来控制血量多少
        GUI.color = Color.red;
        GUI.HorizontalScrollbar(new Rect(200, 50, 200, 20), 0, value, 0, 100);
        
    }
}

•  

代码主要添加了三个控件：两个Button负责加减血量，一个水平滚动条负责显示血量。
Button的用处就不讲了，之前实践过很多次了ÿ