6.图片绘制和框

UI系统 > UnityUI系统 > IMGUI > IMGUI基础知识 UI系统 UnityUI系统 IMGUI IMGUI基础知识控件基础控件

发布时间 : 2024-02-26 22:21

字数:2.1k 阅读 :

6.基础控件-图片绘制和框

6.1 知识点

图片绘制

DrawTexture静态方法进行图片绘制

// 在一个矩形内绘制纹理。
GUI.DrawTexture(texPos, tex, mode, alpha, wh);

DrawTexture静态方法所有重载

//DrawTexture静态方法所有重载
//public static void DrawTexture(Rect position, Texture image);
//public static void DrawTexture(Rect position, Texture image, ScaleMode scaleMode);
//public static void DrawTexture(Rect position, Texture image, ScaleMode scaleMode, bool alphaBlend);
//public static void DrawTexture(Rect position, Texture image, ScaleMode scaleMode, bool alphaBlend, float imageAspect);

DrawTexture静态方法重载中的参数

ScaleMode:
- 当图像的宽高比不适合要绘制的宽高比时，如何缩放图像。
- ScaleAndCrop: 也会通过宽高比来计算图片但是会进行裁剪。
- ScaleToFit: 会自动根据宽高比进行计算不会拉变形会一直保持图片完全显示的状态。
- StretchToFill: 始终填充满你传入的 Rect 范围。
alphaBlend:
- 绘制图像时是否应用 Alpha 混合（默认启用）。
- 用来控制图片是否开启透明通道。
imageAspect:
- 用于源图像的宽高比。如果为 0（默认值），则使用图像的宽高比。传入 w/h 来指定所需的宽高比。这让您能够在不改变像素宽度和高度的情况下调整源图像的宽高比。

效果

框绘制

Box静态方法框绘制

// 在 GUI 层上创建一个框。
GUI.Box(texPos, "123");

效果

6.2 知识点代码

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Lesson06_基本控件_图片绘制和框 : MonoBehaviour
{
    public Rect texPos;

    public Texture tex;

    public ScaleMode mode = ScaleMode.StretchToFill;

    public bool alpha = true;

    public float wh = 0;

    private void OnGUI()
    {
        #region 知识点一 图片绘制

        //DrawTexture静态方法 进行图片绘制
        //在一个矩形内绘制纹理。
        GUI.DrawTexture(texPos, tex, mode, alpha, wh);

        //DrawTexture静态方法所有重载
        //public static void DrawTexture(Rect position, Texture image);
        //public static void DrawTexture(Rect position, Texture image, ScaleMode scaleMode);
        //public static void DrawTexture(Rect position, Texture image, ScaleMode scaleMode, bool alphaBlend);
        //public static void DrawTexture(Rect position, Texture image, ScaleMode scaleMode, bool alphaBlend, float imageAspect);

        //DrawTexture静态方法重载中的参数

        //ScaleMode
        //当图像的宽高比不适合要绘制的宽高比时，如何缩放图像。
        //ScaleAndCrop:也会通过宽高比来计算图片 但是 会进行裁剪
        //ScaleToFit：会自动根据宽高比进行计算 不会拉变形 会一直保持图片完全显示的状态
        //StretchToFill:始终填充满你传入的 Rect范围

        //alphaBlend
        //绘制图像时是否应用 Alpha 混合（默认启用）。
        //用来 控制 图片是否开启透明通道的

        //imageAspect
        //用于源图像的宽高比。如果为 0（默认值），则使用图像的宽高比。传入 w/h 来指定所需的宽高比。这让您能够在不改变像素宽度和高度的情况下调整源图像的宽高比。
        //自定义宽高比  如果不填 默认为0 就会使用 图片原始宽高  

        #endregion

        #region 知识点二 框绘制

        //Box静态方法 框绘制
        //在 GUI 层上创建一个框。
        GUI.Box(texPos, "123");

        #endregion
    }
}

6.3 练习题

为各个面板加上背景图片

给三个面板添加绘制背景代码

// 开始面板脚本
public class BeginPanel : MonoBehaviour
{
    // 背景图片
    public Rect bkPos;
    public Texture bkTex;

    private void OnGUI()
    {
        // 背景
        GUI.DrawTexture(bkPos, bkTex); // **API: GUI.DrawTexture**
        
        // 其他代码...
    }
}

// 设置面板脚本
public class SettingPanel : MonoBehaviour
{
    // 背景图片
    public Rect bkPos;
    public Texture bkTex;

    private void OnGUI()
    {
        // 背景
        GUI.DrawTexture(bkPos, bkTex); // **API: GUI.DrawTexture**
        
        // 其他代码...
    }
}

// 登陆面板脚本
public class LoginPanel : MonoBehaviour
{
    // 背景图片
    public Rect bkPos;
    public Texture bkTex;

    private void OnGUI()
    {
        // 背景
        GUI.DrawTexture(bkPos, bkTex); // **API: GUI.DrawTexture**
        
        // 其他代码...
    }
}

修改参数查看效果

6.4 练习题代码

BeginPanel

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

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

//开始面板
public class BeginPanel : MonoBehaviour
{
    //面板的显示隐藏 所有地方都能够快速使用的
    //静态 方法 和静态变量 就可以直接通过类名就用了
    private static BeginPanel instance;

    public static void ShowMe()
    {
        if(instance != null)
        {
            instance.gameObject.SetActive(true);
        }
    }

    public static void HideMe()
    {
        if (instance != null)
        {
            instance.gameObject.SetActive(false);
        }
    }

    //游戏标题
    public Rect labPos;
    public GUIContent labContent;
    public GUIStyle labStyle;

    //3个游戏按钮
    public Rect btn1Pos;
    public Rect btn2Pos;
    public Rect btn3Pos;
    public GUIStyle btnStyle;

    //背景
    public Rect bkPos;
    public Texture bkTex;

    private void Awake()
    {
        instance = this;
    }

    private void OnGUI()
    {
        //为之前的各个面板加上背景图片

        //背景
        GUI.DrawTexture(bkPos, bkTex);

        //游戏标题
        GUI.Label(labPos, labContent, labStyle);

        //3个游戏按钮
        if(GUI.Button(btn1Pos, "开始游戏", btnStyle))
        {
            //SceneManager.LoadScene("GameScene");
            LoginPanel.ShowMe();
            HideMe();
        }
        if(GUI.Button(btn2Pos, "设置游戏", btnStyle))
        {
            //显示设置界面
            SettingPanel.ShowMe();
            //隐藏自己
            HideMe();
        }
        if(GUI.Button(btn3Pos, "退出游戏", btnStyle))
        {
            QuitTipPanel.ShowMe();
            HideMe();
        }
    }
}
#endregion

SettingPanel

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

#region 练习题一
//在上一知识点练习题基础上，制作一个游戏设置面板，上面有背景音乐的开关和音效的开关，并且点击开始界面的设置面板可以打开设置面板

public class SettingPanel : MonoBehaviour
{
    //面板的显示隐藏 所有地方都能够快速使用的
    //静态 方法 和静态变量 就可以直接通过类名就用了
    private static SettingPanel instance;

    public static void ShowMe()
    {
        if (instance != null)
        {
            instance.gameObject.SetActive(true);
        }
    }

    public static void HideMe()
    {
        if (instance != null)
        {
            instance.gameObject.SetActive(false);
        }
    }

    //音乐开关和音效开关
    public Rect toggleMusicPos;
    public Rect toggleSoundPos;
    private bool isSelMusic = true;
    private bool isSelSound = true;

    //关闭按钮
    public Rect btnPos;
    public GUIStyle btnStyle;

    //请在上一知识点的练习题基础上，在设置面板中加入拖动条控制音乐大小
    private float musicValue = 1;
    public Rect musicPos;
    private float soundValue = 1;
    public Rect soundPos;

    //背景
    public Rect bkPos;
    public Texture bkTex;

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

    private void OnGUI()
    {
        //为之前的各个面板加上背景图片

        //背景
        GUI.DrawTexture(bkPos, bkTex);

        //音乐开关和音效开关
        isSelMusic = GUI.Toggle(toggleMusicPos, isSelMusic, "音乐开关");
        isSelSound = GUI.Toggle(toggleSoundPos, isSelSound, "音效开关");

        //拖动条
        musicValue = GUI.HorizontalSlider(musicPos, musicValue, 0, 1);
        soundValue = GUI.HorizontalSlider(soundPos, soundValue, 0, 1);

        //关闭按钮 设置面板
        if (GUI.Button(btnPos, "", btnStyle))
        {
            //关闭自己这个面板的功能
            HideMe();
            //显示开始界面
            BeginPanel.ShowMe();
        }
    }

    //总结
    //1.要完成 面板之间 相互控制显示 有3中方法
    //  第一种：都写在一个OnGUI中 通过bool标识去控制显影
    //  第二种：挂载在同一个对象上 通过控制脚本的 失活激活 enable去控制代码是否执行 达到显影
    //  第三种：挂载在不同对象上 通过控制对象的 失活激活 来达到 面板的显影

    //2.关键的 如何在多个面板之间相互调用显隐  我们是通过 静态变量和静态方法的形式
    //  在Awake时  初始化 静态变量  如果要用该方法 一开始 这个对象不能失活
}
#endregion

LoginPanel

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

#region 练习题二
//请在之前的基础上,制作一个登陆面板,有用户名输入和密码输入,有进入游戏和返回上一级按钮,点击开始界面中的开始游戏后 进入登陆面板,输入的用户名为admin密码为8888才能切换场景

public class LoginPanel : MonoBehaviour
{
    //面板的显示隐藏 所有地方都能够快速使用的
    //静态 方法 和静态变量 就可以直接通过类名就用了
    private static LoginPanel instance;

    public static void ShowMe()
    {
        if (instance != null)
        {
            instance.gameObject.SetActive(true);
        }
    }

    public static void HideMe()
    {
        if (instance != null)
        {
            instance.gameObject.SetActive(false);
        }
    }

    //两个 按钮


    public Rect btn1Pos;
    public Rect btn2Pos;
    //两个 label
    public Rect lab1Pos;
    public Rect lab2Pos;
    //两个 输入框
    public Rect input1Pos;
    public Rect input2Pos;

    //用户名和密码
    private string userName = "";
    private string passWord = "";

    //背景
    public Rect bkPos;
    public Texture bkTex;

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

    private void OnGUI()
    {
        //为之前的各个面板加上背景图片

        //背景
        GUI.DrawTexture(bkPos, bkTex);

        //登录按钮
        if ( GUI.Button(btn1Pos, "登录游戏") )
        {
            if(userName == "admin" && passWord == "8888")
            {
                SceneManager.LoadScene("GameScene");
            }
            else
            {
                Debug.Log("用户名或者密码错误");
            }
        }

        //返回按钮
        if( GUI.Button(btn2Pos, "返回") )
        {
            BeginPanel.ShowMe();
            HideMe();
        }

        //文本
        GUI.Label(lab1Pos, "用户名");
        GUI.Label(lab2Pos, "密码");

        //输入框
        userName = GUI.TextField(input1Pos, userName);
        passWord = GUI.PasswordField(input2Pos, passWord, '*');
    }
}
#endregion

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 785293209@qq.com

6.图片绘制和框

6.基础控件-图片绘制和框

6.1 知识点

图片绘制

DrawTexture静态方法 进行图片绘制

DrawTexture静态方法所有重载

DrawTexture静态方法重载中的参数

效果

框绘制

Box静态方法 框绘制

效果

6.2 知识点代码

6.3 练习题

为各个面板加上背景图片

给三个面板添加绘制背景代码

修改参数查看效果

6.4 练习题代码

BeginPanel

SettingPanel

LoginPanel

DrawTexture静态方法进行图片绘制

Box静态方法框绘制