【unity之IMGUI】所以你还想在百度上搜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 -----可以是以下三者的结合
    【unity之IMGUI】所以你还想在百度上搜IMGUI的底层原理是什么吗?_第1张图片
    tooltip–鼠标选中后课得到该信息(作为隐藏信息使用)
  • GUIStyle ———全部综合
    1.Nomal ——正常情况
    2.Hover——鼠标停留后
    3.Active——按下之后

(C)IMGUI基本控件—文本控件


在这里插入图片描述


(D)IMGUI基本控件—按钮控件


在这里插入图片描述

  • 点击的逻辑情况 ——> GUI.Button == true ;
    (在原地方点击后松开才算一次点击)

练习操作

  • 用GUI制作一个游戏开始界面,上面有开始游戏,退出游戏,设置等等按钮选项,点击开始游戏可以切换到游戏场景
    【unity之IMGUI】所以你还想在百度上搜IMGUI的底层原理是什么吗?_第2张图片
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之IMGUI】所以你还想在百度上搜IMGUI的底层原理是什么吗?_第3张图片
在这里插入图片描述
【unity之IMGUI】所以你还想在百度上搜IMGUI的底层原理是什么吗?_第4张图片

练习操作

在上一题基础上,弄一个游戏设置面板
有背景音乐的开关和音效的开关
并且点击开始界面的设置可以打开设置面板

  • 设置界面主代码

//-------------------------------------
//—————————————————————————————————————
//___________项目: 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<GUISetPlane>() as GUISetPlane;
        a.enabled = true;
    }

    public void DisActive()   //让自身失活
    {
        Debug.Log("设置面板已经失活");
        GUISetPlane a = instance.gameObject.GetComponent<GUISetPlane>() 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<GuiExsi>().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<GuiExsi>() as GuiExsi;
        a.enabled = true ;
    }
    public void DisActive()   //让自身失活
    {
        Debug.Log("主面板已经失活");
        GuiExsi a = instance.gameObject.GetComponent<GuiExsi>() 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<GUISetPlane>().enabled = true ;
     
        }   
    }
    private void Awake()
    {
         instance = this;
    }
}


(G)IMGUI基本控件—拖动条


在这里插入图片描述

练习操作

  • 在原有的基础上加入拖动条
    【unity之IMGUI】所以你还想在百度上搜IMGUI的底层原理是什么吗?_第5张图片
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<GUISetPlane>() as GUISetPlane;
        a.enabled = true;
    }

    public void DisActive()   //让自身失活
    {
        Debug.Log("设置面板已经失活");
        GUISetPlane a = instance.gameObject.GetComponent<GUISetPlane>() 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<GuiExsi>().enabled = true ;
        }
    }
    private void Awake()
    {
        instance = this;
    }
}


(F)IMGUI基本控件—输入框


在这里插入图片描述

练习操作

  • 在之前的基础上
    弄一个登陆面板
    有用户名输入和密码输入
    有进入游戏和返回上一级按钮
    点击开始界面中的开始游戏后 进入登陆面板
    输入的 用户名为 admin 密码为8888才能切换场景
    【unity之IMGUI】所以你还想在百度上搜IMGUI的底层原理是什么吗?_第6张图片
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<RegisterIn>() as RegisterIn;
        a.enabled = true;
    }
    public void DisActive()   //让自身失活
    {      
        RegisterIn a = instance.gameObject.GetComponent<RegisterIn>() 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<GuiExsi>().enabled = true;
        }

    }
    private void Awake()
    {
        instance = this;
    }
}


(H)IMGUI基本控件—图片绘制


在这里插入图片描述
在这里插入图片描述


(III)IMGUI——复合控件


在这里插入图片描述


(J)IMGUI复合控件—工具栏(标签)


【unity之IMGUI】所以你还想在百度上搜IMGUI的底层原理是什么吗?_第7张图片
【unity之IMGUI】所以你还想在百度上搜IMGUI的底层原理是什么吗?_第8张图片

练习操作

  • 在登录进去的界面后,创建三个信息标签
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之IMGUI】所以你还想在百度上搜IMGUI的底层原理是什么吗?_第9张图片
【unity之IMGUI】所以你还想在百度上搜IMGUI的底层原理是什么吗?_第10张图片

实践练习

  • 动态变化滚动视图的内容框长度
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之IMGUI】所以你还想在百度上搜IMGUI的底层原理是什么吗?_第11张图片

实践练习

  • 将游戏退出

【unity之IMGUI】所以你还想在百度上搜IMGUI的底层原理是什么吗?_第12张图片


//-------------------------------------
//—————————————————————————————————————
//___________项目:       ______________
//___________功能: 退出确定窗口
//___________创建者:秩沅_______________
//_____________________________________
//-------------------------------------
public class ExitWindows : MonoBehaviour
{
    static public ExitWindows instance;
    public Rect windowPos;
    //---------------------------
    public void Active()      //让自身激活
    {
        Debug.Log("主面板已经激活");
        ExitWindows a = instance.gameObject.GetComponent<ExitWindows>() as ExitWindows;
        a.enabled = true;
    }
    public void DisActive()   //让自身失活
    {
        Debug.Log("主面板已经失活");
        ExitWindows a = instance.gameObject.GetComponent<ExitWindows>() 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之IMGUI】所以你还想在百度上搜IMGUI的底层原理是什么吗?_第13张图片

  • 图片中备注来自唐老狮
    【unity之IMGUI】所以你还想在百度上搜IMGUI的底层原理是什么吗?_第14张图片

(N)IMGUI综合—GUILayout


【unity之IMGUI】所以你还想在百度上搜IMGUI的底层原理是什么吗?_第15张图片


⭐相关文章⭐

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

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

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

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

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

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

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

⭐本站最全-unity常用API大全(万字详解),不信你不收藏



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

你可能感兴趣的:(#,unity实战基础,#,unity常用API,unity,游戏引擎)