游戏界面设计GUI

绝地灬酷狼 2023-05-29 05:06 150阅读 0赞

## 区别 ##

1.  NGUI：Unity的插件，由外部公司开发的。（因开发人员离开Unity，继续开发NGUI，所以NGUI现在仍在更新）
2.  UGUI：Unity吸收NGUI的开发公司，为Unity新增原生的UGUI。

## 什么是GUI ##

1.  GUI是指那些显示在屏幕上给予用户提示的界面，这些界面不会与游戏内容产生互动或者影响。
2.  GUI用的是屏幕坐标系，都是2D效果。

## 主要API ##

1.  所有代码都要写在`OnGUI()`方法中。在界面变动时每帧都会进行一次擦除、一次重绘。
2.  流式布局：`GUILayout.xxx`（自左向右、自上向下顺序排列布局）
3.  块布局：`GUI.xxx`（固定在某个位置）
4.  文本框：`GUILayout.TextField(文本框内容, GUI布局的规格参数);`（返回值为当前文本框的内容）
5.  按钮：`GUILayout.Button(文本框内容, GUI布局的规格参数);`（默认值为false，点击后返回值为true）
6.  世界坐标转化为屏幕坐标：`Camera.main.WorldToScreenPoint(世界坐标位置);`
7.  GUI绘制图形：`GUI.DrawTexture(new Rect(图形x坐标，图形y坐标，图形宽度，图形高度),图形对象);`

## GUI文本框 源码 ##

using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;
    
    public class GUITest : MonoBehaviour
    { 
        //设置变量，用于存储文本框内容
        string s1,s2 ;
        int i;
        private void Start()
        { 
            s1 = "click";
            s2 = "";
            i = 0;
        }
        //调用GUI方法，每帧都会进行一次擦除、一次重绘
        private void OnGUI()
        { 
            //s = GUILayout.TextField(s, GUILayout.Width(100));
            //print(s);
    
            //判断按钮是否激活，松开时返回true，其他状态返回false
            if (GUILayout.Button(s1, GUILayout.Width(100)))
            { 
                i++;
                s2 = "click-" + i;
            }
            //流布局绘制文本框
            GUILayout.TextField(s2, GUILayout.Width(100));
        }
    }

## GUI血条效果 源码 ##

在unity中上传血条图片  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoZW5xaWFua2s_size_16_color_FFFFFF_t_70]

using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;
    
    public class GUIHealth : MonoBehaviour
    { 
        //定义图片对象，在unity上传图片
        public Texture2D health;
        private float speed;
        private Vector3 headPos;
        // Start is called before the first frame update
        void Start()
        { 
            speed = 5;
        }
    
        // Update is called once per frame
        void Update()
        { 
            //物体按键移动
            transform.Translate(Vector3.right * Time.deltaTime * speed * Input.GetAxisRaw("Horizontal"));
            transform.Translate(Vector3.forward * Time.deltaTime * speed * Input.GetAxisRaw("Vertical"));
    
            //获取物体头顶的位置
            //将世界坐标系转到屏幕坐标系
            headPos = Camera.main.WorldToScreenPoint(transform.position + Vector3.up*1.5f);
        }
    
        private void OnGUI()
        { 
            //GUI绘制血条图形
            GUI.DrawTexture(new Rect(headPos.x-64, Screen.height - headPos.y, 128,8), health);
        }
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoZW5xaWFua2s_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoZW5xaWFua2s_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191105194810237.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoZW5xaWFua2s=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoZW5xaWFua2s_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191105194835377.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoZW5xaWFua2s=,size_16,color_FFFFFF,t_70