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

guduadmin291月前

【unity之UI专题】GUI(IMGUI)详解,在这里插入图片描述,第1张

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

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

👨‍💻 本文由秩沅原创

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

【unity之UI专题】GUI(IMGUI)详解,在这里插入图片描述,第2张

⭐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工作原理

【unity之UI专题】GUI(IMGUI)详解,在这里插入图片描述,第3张

【unity之UI专题】GUI(IMGUI)详解,在这里插入图片描述,第4张

🎶（B）IMGUI——基本控件

【unity之UI专题】GUI(IMGUI)详解,在这里插入图片描述,第5张

【unity之UI专题】GUI(IMGUI)详解,在这里插入图片描述,第6张

GUIContent -----可以是以下三者的结合
tooltip–鼠标选中后课得到该信息（作为隐藏信息使用）

GUIStyle ———全部综合

1.Nomal ——正常情况

2.Hover——鼠标停留后

3.Active——按下之后

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

【unity之UI专题】GUI(IMGUI)详解,在这里插入图片描述,第8张

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

【unity之UI专题】GUI(IMGUI)详解,在这里插入图片描述,第9张

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

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

练习操作

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

【unity之UI专题】GUI(IMGUI)详解,在这里插入图片描述,第10张

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基本控件—多选框和单选框

【unity之UI专题】GUI(IMGUI)详解,在这里插入图片描述,第11张

【unity之UI专题】GUI(IMGUI)详解,在这里插入图片描述,第12张

【unity之UI专题】GUI(IMGUI)详解,在这里插入图片描述,第13张

练习操作

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

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

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

设置界面主代码

//-------------------------------------
//—————————————————————————————————————
//___________项目: 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基本控件—拖动条

【unity之UI专题】GUI(IMGUI)详解,在这里插入图片描述,第14张

练习操作

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

【unity之UI专题】GUI(IMGUI)详解,在这里插入图片描述,第15张

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基本控件—输入框

【unity之UI专题】GUI(IMGUI)详解,在这里插入图片描述,第16张

练习操作

在之前的基础上

弄一个登陆面板

有用户名输入和密码输入

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

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

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

【unity之UI专题】GUI(IMGUI)详解,在这里插入图片描述,第17张

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基本控件—图片绘制

【unity之UI专题】GUI(IMGUI)详解,在这里插入图片描述,第18张

【unity之UI专题】GUI(IMGUI)详解,在这里插入图片描述,第19张

🎶（III）IMGUI——复合控件

【unity之UI专题】GUI(IMGUI)详解,在这里插入图片描述,第20张

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

【unity之UI专题】GUI(IMGUI)详解,在这里插入图片描述,第21张

【unity之UI专题】GUI(IMGUI)详解,在这里插入图片描述,第22张

练习操作

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

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复合控件—分组和滚动视图

【unity之UI专题】GUI(IMGUI)详解,在这里插入图片描述,第23张

【unity之UI专题】GUI(IMGUI)详解,在这里插入图片描述,第24张

实践练习

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

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相当于窗口唯一识别码

【unity之UI专题】GUI(IMGUI)详解,在这里插入图片描述,第25张

实践练习

将游戏退出

【unity之UI专题】GUI(IMGUI)详解,在这里插入图片描述,第26张

//-------------------------------------
//—————————————————————————————————————
//___________项目:       ______________
//___________功能： 退出确定窗口
//___________创建者：秩沅_______________
//_____________________________________
//-------------------------------------
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

【unity之UI专题】GUI(IMGUI)详解,在这里插入图片描述,第27张

图片中备注来自唐老狮

🎶（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大全（万字详解），不信你不收藏

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

db标签

网友评论

搜索: Search

最新文章

热门文章

【unity之UI专题】GUI(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

⭐相关文章⭐

猜你喜欢

网友评论