【unity之UI专题】GUI(IMGUI)详解

👨‍💻个人主页：@元宇宙-秩沅

👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅!

👨‍💻 本文由 秩沅 原创

👨‍💻 收录于专栏：unity实战入门

⭐IMGUI原理⭐

文章目录

• • ⭐IMGUI原理⭐
  • 🎶前言
  • 🎶（A）IMGUI工作原理
  • 🎶（B）IMGUI——基本控件
  • 🎶（C）IMGUI基本控件—文本控件
  • 🎶（D）IMGUI基本控件—按钮控件
  • • 练习操作
  • 🎶（E）IMGUI基本控件—多选框和单选框
  • • 练习操作
  • 🎶（G）IMGUI基本控件—拖动条
  • • 练习操作
  • 🎶（F）IMGUI基本控件—输入框
  • • 练习操作
  • 🎶（H）IMGUI基本控件—图片绘制
  • 🎶（III）IMGUI——复合控件
  • 🎶（J）IMGUI复合控件—工具栏（标签）
  • • 练习操作
  • 🎶（K）IMGUI复合控件—分组和滚动视图
  • • 实践练习
  • 🎶（L）IMGUI复合控件—窗口相关
  • • 实践练习
  • 🎶（M）IMGUI综合—GuiSkin
  • 🎶（N）IMGUI综合—GUILayout
  • ⭐相关文章⭐

🎶前言

• IMGUI不会用作游戏的UI开发
• 会用到游戏的编辑器开发

🅰️ 题单来自：唐老狮

🎶（A）IMGUI工作原理

🎶（B）IMGUI——基本控件

• GUIContent —–可以是以下三者的结合

  

  tooltip–鼠标选中后课得到该信息（作为隐藏信息使用）

• GUIStyle ———全部综合

  1.Nomal ——正常情况

  2.Hover——鼠标停留后

  3.Active——按下之后

🎶（C）IMGUI基本控件—文本控件

🎶（D）IMGUI基本控件—按钮控件

• 点击的逻辑情况 ——> GUI.Button == true ;

  （在原地方点击后松开才算一次点击）

练习操作

• 用GUI制作一个游戏开始界面,上面有开始游戏,退出游戏,设置等等按钮选项，点击开始游戏可以切换到游戏场景

  

using System.Collections;using System.Collections.Generic;using UnityEngine;using UnityEngine.SceneManagement;//-------------------------------------//—————————————————————————————————————//___________项目:  标签和按钮组件的应用     //___________功能： 主面板界面 //___________创建者：秩沅_______________//_____________________________________//-------------------------------------public class GuiExsi : MonoBehaviour{    public Rect RectLabel;    public Rect RectButton1;    public Rect RectButton2;    public Rect RectButton3;      public GUIContent guiContent;    public GUIStyle guistyle;    public GUIStyle button1;    public GUIStyle button2;    public GUIStyle button3;    private void OnGUI()    {        //------------开始游戏基本画面--------------        GUI.Label(RectLabel , guiContent ,guistyle);        if (GUI.Button(RectButton1, "开始游戏", button1))        {            SceneManager.LoadScene("simple1");                        }        GUI.Button(RectButton2,"设置", button2);        GUI.Button(RectButton3, "退出游戏",button3);        //------------游戏设置面板--------------    }}

🎶（E）IMGUI基本控件—多选框和单选框

练习操作

在上一题基础上，弄一个游戏设置面板

有背景音乐的开关和音效的开关

并且点击开始界面的设置可以打开设置面板

• 设置界面主代码

//-------------------------------------
//—————————————————————————————————————
//___________项目: GUI组件练习 
//___________功能： 设置面板    
//___________创建者：秩沅_______________
//_____________________________________
//-------------------------------------
public class GUISetPlane : MonoBehaviour
{
    static public  GUISetPlane instance;
    public Rect SetLable1, SetLable2;
    public Rect closeButPos;
    public GUIContent closeButton;

    private  bool swtich1 = true ;
    private  bool swtich2 = true ;
    private  bool swtich3 = true;
    public Rect SetLable3;
    //-----------------------------------

    public void Active()      //让自身激活
    {
        Debug.Log("设置面板已经激活");
        GUISetPlane a = instance.gameObject.GetComponent() as GUISetPlane;
        a.enabled = true;
    }

    public void DisActive()   //让自身失活
    {
        Debug.Log("设置面板已经失活");
        GUISetPlane a = instance.gameObject.GetComponent() as GUISetPlane;
        a.enabled = false ;
    }

    //-------------------------------------
    private void OnGUI()
    {
       
        swtich1 = GUI.Toggle(SetLable1, swtich1, "音效开关");

        swtich2 = GUI.Toggle(SetLable2, swtich2, "音乐开关");

        swtich3 = GUI.Toggle(SetLable3, swtich3, "音乐开关");

        if (GUI.Button(closeButPos, closeButton))
        {
            Debug.Log("已点击关闭窗口");
            DisActive();
            GuiExsi.instance.gameObject.GetComponent().enabled = true ;
        }
    }
    private void Awake()
    {
        instance = this;
    }
}

• 开始界面主代码

//-------------------------------------
//—————————————————————————————————————
//___________项目:   GUI组件练习     
//___________功能：  开始界面    
//___________创建者：秩沅
//_____________________________________
//-------------------------------------

public class GuiExsi : MonoBehaviour
{
    static public GuiExsi instance;
    //---------------------------
    public Rect RectLabel;
    public Rect RectButton1;
    public Rect RectButton2;
    public Rect RectButton3;
    public GUIContent guiContent;
    public GUIStyle guistyle;
    public GUIStyle button1;
    public GUIStyle button2;
    public GUIStyle button3;
    //---------------------------
    public void Active()      //让自身激活
    {
        Debug.Log("主面板已经激活");
        GuiExsi a =instance.gameObject.GetComponent() as GuiExsi;
        a.enabled = true ;
    }
    public void DisActive()   //让自身失活
    {
        Debug.Log("主面板已经失活");
        GuiExsi a = instance.gameObject.GetComponent() as GuiExsi;
        a.enabled = false;
    }
    private void OnGUI()
    {
        //------------开始游戏基本画面--------------

        GUI.Label(RectLabel , guiContent ,guistyle);
        if (GUI.Button(RectButton1, "开始游戏", button1))
        {
            SceneManager.LoadScene("simple1");               
        }

        GUI.Button(RectButton3, "退出游戏",button3);

       if(GUI.Button(RectButton2, "设置", button2))
        {
            Debug.Log("已点击设置");
            DisActive();
              GUISetPlane.instance.gameObject.GetComponent().enabled = true ;
     
        }   
    }
    private void Awake()
    {
         instance = this;
    }
}

🎶（G）IMGUI基本控件—拖动条

练习操作

• 在原有的基础上加入拖动条

  

using System.Collections;using System.Collections.Generic;using UnityEngine;//-------------------------------------//—————————————————————————————————————//___________项目: 单选框和拖动条的应用 //___________功能： 音效设置面板    //___________创建者：秩沅_______________//_____________________________________//-------------------------------------public class GUISetPlane : MonoBehaviour{    //-----------------------------------    static public  GUISetPlane instance;    public Rect SetLable1, SetLable2;        public Rect closeButPos;    public GUIContent closeButton;    private  bool swtich1 = true ;    private  bool swtich2 = true ;    //-----------------------------------    float ling1 = 1f;    float ling2 = 1f;    public Rect roelPso1;    public Rect roelPso2;    public Rect texturePos;    public Texture texture;    //-----------------------------------    public void Active()      //让自身激活    {        Debug.Log("设置面板已经激活");        GUISetPlane a = instance.gameObject.GetComponent() as GUISetPlane;        a.enabled = true;    }    public void DisActive()   //让自身失活    {        Debug.Log("设置面板已经失活");        GUISetPlane a = instance.gameObject.GetComponent() as GUISetPlane;        a.enabled = false ;    }    //-------------------------------------    private void OnGUI()    {        GUI.DrawTexture(texturePos, texture);        swtich1 = GUI.Toggle(SetLable1, swtich1, "音效开关");        swtich2 = GUI.Toggle(SetLable2, swtich2, "音乐开关");          ling1 = GUI.HorizontalSlider(roelPso1 , ling1, 1, 0);          ling2 = GUI.HorizontalSlider(roelPso2 , ling2, 1, 0);        if (GUI.Button(closeButPos, closeButton))        {            Debug.Log("已点击关闭窗口");            DisActive();            GuiExsi.instance.gameObject.GetComponent().enabled = true ;        }    }    private void Awake()    {        instance = this;    }}

🎶（F）IMGUI基本控件—输入框

练习操作

• 在之前的基础上

  弄一个登陆面板

  有用户名输入和密码输入

  有进入游戏和返回上一级按钮

  点击开始界面中的开始游戏后 进入登陆面板

  输入的 用户名为 admin 密码为8888才能切换场景

  

using System.Collections;using System.Collections.Generic;using UnityEngine;using UnityEngine.SceneManagement;//-------------------------------------//—————————————————————————————————————//___________项目:   输入框的和图片绘制组件的应用//___________功能：  登录界面面板//___________创建者：秩沅_______________//_____________________________________//-------------------------------------public class RegisterIn : MonoBehaviour{    public   Rect fieldPos1;    public   Rect fieldPos2;    public   Rect texturePos;    public   Rect buttonPos,buttonPos2;    public   Rect lable1, lable2;    public   Texture backGrounp;    public   GUIContent content,content2;    public   GUIStyle buttonStyle, buttonStyle2;    string acount = "";    string secret = "";    static public RegisterIn instance;    //-------------------------------------    public void Active()      //让自身激活    {         RegisterIn a = instance.gameObject.GetComponent() as RegisterIn;        a.enabled = true;    }    public void DisActive()   //让自身失活    {              RegisterIn a = instance.gameObject.GetComponent() as RegisterIn;        a.enabled = false;    }    //-------------------------------------    private void OnGUI()    {        GUI.DrawTexture(texturePos, backGrounp);        acount = GUI.TextField(fieldPos1 , acount);        secret = GUI.PasswordField(fieldPos2, secret, '*');        GUI.Label (lable1  ,"用户名");        GUI.Label (lable2  , "密码");        //信息正确载入场景        if ( GUI.Button(buttonPos, content, buttonStyle))        {            if( acount == "admin" && secret == "88888")            {                SceneManager.LoadScene("simple1");                Debug.Log("登录成功");            }                  }        //返回到主界面        if (GUI.Button(buttonPos2, content2, buttonStyle2))        {            DisActive();            GuiExsi.instance.gameObject.GetComponent().enabled = true;        }    }    private void Awake()    {        instance = this;    }}

🎶（H）IMGUI基本控件—图片绘制

🎶（III）IMGUI——复合控件

🎶（J）IMGUI复合控件—工具栏（标签）

练习操作

• 在登录进去的界面后，创建三个信息标签

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
//-------------------------------------
//—————————————————————————————————————
//___________项目:  复合控件工具栏的应用    
//___________功能： 信息显示面板
//___________创建者：秩沅_______________
//_____________________________________
//-------------------------------------
public class Maincontent : MonoBehaviour
{
    //默认选择第一个表格
    int num = 0;    
    public Rect toolPos2 ;
    public GUIStyle messStyle;
    string[] mess = { "人物信息","装备信息","宠物信息"};
    private void OnGUI()
    {      
          //num =  GUI.Toolbar(toolPos1,num,mess);
          num = GUI.SelectionGrid(toolPos2, num, mess,1, messStyle);

    }

}

🎶（K）IMGUI复合控件—分组和滚动视图

实践练习

• 动态变化滚动视图的内容框长度

using System.Collections;
using System.Collections.Generic;
using System.Text;
using UnityEngine;
//-------------------------------------
//—————————————————————————————————————
//___________项目:  复合控件工具栏的应用    
//___________功能： 信息显示面板
//___________创建者：秩沅_______________
//_____________________________________
//-------------------------------------
public class Maincontent : MonoBehaviour
{
    
    int num = 0; //默认选择第一个表格
    public int viewNumber;
    public Rect toolPos2 ,showPos,contenPos ;
    public Vector2 scorllPos;
    public GUIStyle messStyle;
    string[] mess = { "人物信息","装备信息","宠物信息"};
    string[] messView = {"装备1", "装备2", "装备3", "装备4", "装备5" };
    
    private void OnGUI()
    {      
          //num =  GUI.Toolbar(toolPos1,num,mess);
        num = GUI.SelectionGrid(toolPos2, num, mess,1, messStyle);


        //动态变化内容框的长度——随着内容的数量而改变
        contenPos.height = viewNumber * 30;

        scorllPos = GUI.BeginScrollView(showPos, scorllPos, contenPos);
        
        for (int i = 0; i < viewNumber ; i++)
        {
            GUI.Button(new Rect(0,i * 30, 50, 30),messView[i]);
        }
       
        GUI.EndScrollView();
    }

}

🎶（L）IMGUI复合控件—窗口相关

• ID相当于窗口唯一识别码

  

实践练习

• 将游戏退出

//-------------------------------------
//—————————————————————————————————————
//___________项目:       ______________
//___________功能： 退出确定窗口
//___________创建者：秩沅_______________
//_____________________________________
//-------------------------------------
public class ExitWindows : MonoBehaviour
{
    static public ExitWindows instance;
    public Rect windowPos;
    //---------------------------
    public void Active()      //让自身激活
    {
        Debug.Log("主面板已经激活");
        ExitWindows a = instance.gameObject.GetComponent() as ExitWindows;
        a.enabled = true;
    }
    public void DisActive()   //让自身失活
    {
        Debug.Log("主面板已经失活");
        ExitWindows a = instance.gameObject.GetComponent() as ExitWindows;
        a.enabled = false;
    }
    private void OnGUI()
    {
        GUI.ModalWindow(1, windowPos, (int id)=> WinFuction(1) , "提示");
        
    }
    public Rect pos1, pos2, pos3;
    public void WinFuction( int id)
    {
        
        GUI.Label(pos1, "请再次确认");
        if(GUI.Button(pos2, "退出"))
        {
            Application.Quit();
        }
        else if (GUI.Button(pos3, "取消"))
        {
            DisActive();
        }
    }
    
    private void Awake()
    {
        instance = this;
    }
}

🎶（M）IMGUI综合—GuiSkin

• 图片中备注来自唐老狮

  

🎶（N）IMGUI综合—GUILayout

⭐相关文章⭐

⭐【2023unity游戏制作-mango的冒险】-6.关卡设计

⭐【2023unity游戏制作-mango的冒险】-5.攻击系统的简单实现

⭐【2023unity游戏制作-mango的冒险】-4.场景二的镜头和法球特效跟随

⭐【2023unity游戏制作-mango的冒险】-3.基础动作和动画API实现

⭐【2023unity游戏制作-mango的冒险】-2.始画面API制作

⭐【2023unity游戏制作-mango的冒险】-1.场景搭建

⭐“狂飙”游戏制作—游戏分类图鉴（网易游学）

⭐本站最全-unity常用API大全（万字详解），不信你不收藏

你们的点赞👍 收藏⭐ 留言📝 关注✅是我持续创作，输出优质内容的最大动力！