Unity GUI 图形用户界面的设计

最新推荐文章于 2025-03-01 20:14:36 发布
最新推荐文章于 2025-03-01 20:14:36 发布
阅读量3k 收藏 25
点赞数
分类专栏： Unity 游戏设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43673589/article/details/106003320
版权

第一种用户界面 OnGUI

用OnGUI函数来实现按钮功能

利用按钮对它旋转，缩放，平移

创建平面，创建立方体

创建GUIButton.cs脚本

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

public class GUIButton : MonoBehaviour
{
    float speed = 3f;
    float scale = 1f; 
    float rodatespeed = 30f;

    public Texture btnTexture;//按钮贴图
    GUIContent content;//文本内容

    // Start is called before the first frame update
    void Start()
    {
        content = new GUIContent("旋转立方体", btnTexture);
    }

    // Update is called once per frame
    void Update()
    {
        
    }
    private void OnGUI()
    {
        if (GUILayout.Button("移动立方体"))
        { 
            transform.Translate(Vector3.right * speed * Time.deltaTime);
        }
        if (GUI.Button(new Rect(160, 106, 200, 80), content))
        {
            transform.Rotate(Vector3.up * rodatespeed * Time.deltaTime,Space.World);
        }
        if (GUILayout.Button("缩放立方体"))
        {
            scale += scale * speed * Time.deltaTime;
            transform.localScale = new Vector3(scale, scale, scale);
        }
    }
}

效果

第二种用户界面 UGUI

创建按钮

设置为2D

按钮背景图设置

网上随便下载一张图

在Unity中把图片格式设置成精灵Sprite再导入

调整大小

按钮颜色设置

正常

悬浮

按下

松开

修改按钮文本

效果

现在为该按钮写脚本 OnButtonEvents.cs

待会要用到

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

public class OnButtonEvent : MonoBehaviour
{
    public GameObject cube;
    public float speed=30f;
    // Start is called before the first frame update
    void Start()
    {
        
    }

    // Update is called once per frame
    void Update()
    {
        
    }

    public void MoveCubeRight()
    {
        cube.transform.position += Vector3.right * speed * Time.deltaTime;
    }
    public void MoveCubeLeft()
    {
        cube.transform.position += Vector3.left * speed * Time.deltaTime;
    }
    public void MoveCubeUp()
    {
        cube.transform.position += Vector3.forward * speed * Time.deltaTime;
    }
    public void MoveCubeDown()
    {
        cube.transform.position += Vector3.back * speed * Time.deltaTime;
    }

    public void Move()
    {
        cube.transform.Translate(Vector3.forward * speed * Time.deltaTime, Space.World);
    }

    public void Rotate()
    {
        cube.transform.Rotate(Vector3.up * speed, Space.World);
    }

    public void Scale()
    {
        cube.transform.localScale = new Vector3(3, 3, 3);
    }
}

创建Rotate.cs脚本

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

public class Rotate : MonoBehaviour
{
    public GameObject gameobj;
    public float speed = 300f;
    // Start is called before the first frame update
    void Start()
    {
        
    }

    // Update is called once per frame
    void Update()
    {
        
    }

    public void rotateObj()
    {
        gameobj.transform.Rotate(Vector3.up * speed * Time.deltaTime, Space.World);
    }
}

把脚本绑定到Cube上并指定对象为Cube

选择按钮

添加对象和鼠标事件

效果

新建一个场景GameUI

下载一张图片作游戏背景

分辨率：700*525

导入并设置图片类型为精灵

选中Image对象

调整大小与图像分辨率一致

导入图像并调整位置

效果

创建文本

字体大小最大27，超过27不显示（为什么？）

因为文本框有点小，可以按如下方式调整文本框

对其方式如下，不然可能看不见

效果

建一个按钮

再建一个测试文本，此文本一直存在，直到点击关于游戏时，将显示一段文本以覆盖此文本

创建一个 GameUI.cs 脚本，绑定到测试文本上

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;//要用文本text，就要包含这个

public class GameUI : MonoBehaviour
{
    private Text text;//定义一个文本变量
    // Start is called before the first frame update
    void Start()
    {
        text = GetComponent<Text>();//获取text组件
    }

    // Update is called once per frame
    void Update()
    {
        
    }

    public void ButtonFunc()
    {
        text.text = "北林数媒181";
    }
}

把这个脚本绑定到测试文本上

为按钮添加鼠标事件

若GameUI中没有找到ButtonFunc函数，说明刚刚编辑的脚本没有保存

保存后就有了

效果

点击前

点击后

创建一个勾选工具

修改GameUI代码

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;//要用文本text，就要包含这个

public class GameUI : MonoBehaviour
{
    private Text text;//定义一个文本变量
    // Start is called before the first frame update
    void Start()
    {
        text = GetComponent<Text>();//获取text组件
    }

    // Update is called once per frame
    void Update()
    {
        
    }

    public void ButtonFunc()
    {
        text.text = "北林数媒181";
    }

    public void ToggleFunc(Toggle toggle)
    {
        text.color = toggle.isOn ? Color.black : Color.cyan;
    }
}

选择Toggle，添加鼠标事件，绑定测试文本

效果

默认勾选

取消勾选后测试文本变色

添加滚动条

修改GameUI代码

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;//要用文本text，就要包含这个
using System;//类型转换

public class GameUI : MonoBehaviour
{
    private Text text;//定义一个文本变量
    int fontsize;//字体大小
    // Start is called before the first frame update
    void Start()
    {
        text = GetComponent<Text>();//获取text组件
        fontsize = text.fontSize;
    }

    // Update is called once per frame
    void Update()
    {
        
    }

    public void ButtonFunc()
    {
        text.text = "北林数媒181";
    }

    public void ToggleFunc(Toggle toggle)
    {
        text.color = toggle.isOn ? Color.black : Color.cyan;
    }

    public void SliddleFunc(Slider slider)
    {
        float s = slider.value;
        text.fontSize = fontsize + Convert.ToInt32(s);//类型转换
    }
}

为滑动条添加鼠标事件

绑定测试文本，添加刚刚添加的函数

指定Slider，不指定就不会获取值

调整Slider最大值

效果

添加滑动条

修改脚本

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;//要用文本text，就要包含这个
using System;//类型转换

public class GameUI : MonoBehaviour
{
    private Text text;//定义一个文本变量
    int fontsize;//字体大小
    Vector3 pos;//字体的位移向量
    // Start is called before the first frame update
    void Start()
    {
        text = GetComponent<Text>();//获取text组件
        fontsize = text.fontSize;
        pos = text.transform.position;//初始化的时候先把字体的位置获取了
    }

    // Update is called once per frame
    void Update()
    {
        
    }

    public void ButtonFunc()
    {
        text.text = "北林数媒181";
    }

    public void ToggleFunc(Toggle toggle)
    {
        text.color = toggle.isOn ? Color.black : Color.cyan;
    }

    public void SliddleFunc(Slider slider)
    {
        float s = slider.value;
        text.fontSize = fontsize + Convert.ToInt32(s);//类型转换
    }

    public void ScrollbarFunc(Scrollbar scrollbar)
    {
        text.transform.position = new Vector3(pos.x + scrollbar.value * 100f, pos.y, pos.z);//放大100倍，只改变x，其他不变
    }
}

为滑动条添加鼠标事件

效果

添加一个下拉菜单

修改代码

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;//要用文本text，就要包含这个
using System;//类型转换

public class GameUI : MonoBehaviour
{
    private Text text;//定义一个文本变量
    int fontsize;//字体大小
    Vector3 pos;//字体的位移向量
    // Start is called before the first frame update
    void Start()
    {
        text = GetComponent<Text>();//获取text组件
        fontsize = text.fontSize;
        pos = text.transform.position;//初始化的时候先把字体的位置获取了
    }

    // Update is called once per frame
    void Update()
    {
        
    }

    public void ButtonFunc()
    {
        text.text = "北林数媒181";
    }

    public void ToggleFunc(Toggle toggle)
    {
        text.color = toggle.isOn ? Color.black : Color.cyan;
    }

    public void SliddleFunc(Slider slider)
    {
        float s = slider.value;
        text.fontSize = fontsize + Convert.ToInt32(s);//类型转换
    }

    public void ScrollbarFunc(Scrollbar scrollbar)
    {
        text.transform.position = new Vector3(pos.x + scrollbar.value * 100f, pos.y, pos.z);//放大100倍，只改变x，其他不变
    }

    public void DropdownFunc(Dropdown dropdown)
    {
        switch(dropdown.value)
        {
            case 0:
                text.fontStyle = FontStyle.Bold;
                break;
            case 1:
                text.fontStyle = FontStyle.BoldAndItalic;
                break;
            case 2:
                text.fontStyle = FontStyle.Italic;
                break;
        }
    }
}

添加鼠标事件和对象

效果

选择不同项目时，测试文本的字体格式不同

添加动态文本框

修改脚本

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;//要用文本text，就要包含这个
using System;//类型转换

public class GameUI : MonoBehaviour
{
    private Text text;//定义一个文本变量
    int fontsize;//字体大小
    Vector3 pos;//字体的位移向量
    // Start is called before the first frame update
    void Start()
    {
        text = GetComponent<Text>();//获取text组件
        fontsize = text.fontSize;
        pos = text.transform.position;//初始化的时候先把字体的位置获取了
    }

    // Update is called once per frame
    void Update()
    {
        
    }

    public void ButtonFunc()
    {
        text.text = "北林数媒181";
    }

    public void ToggleFunc(Toggle toggle)
    {
        text.color = toggle.isOn ? Color.black : Color.cyan;
    }

    public void SliddleFunc(Slider slider)
    {
        float s = slider.value;
        text.fontSize = fontsize + Convert.ToInt32(s);//类型转换
    }

    public void ScrollbarFunc(Scrollbar scrollbar)
    {
        text.transform.position = new Vector3(pos.x + scrollbar.value * 100f, pos.y, pos.z);//放大100倍，只改变x，其他不变
    }

    public void DropdownFunc(Dropdown dropdown)
    {
        switch(dropdown.value)
        {
            case 0:
                text.fontStyle = FontStyle.Bold;
                break;
            case 1:
                text.fontStyle = FontStyle.BoldAndItalic;
                break;
            case 2:
                text.fontStyle = FontStyle.Italic;
                break;
        }
    }

    public void InputFieldFuc(InputField inputField)
    {
        text.text = inputField.text;
    }
}

添加鼠标事件和对象

效果

编辑前

结束编辑时文字改变

Unity UI界面设计方法
CoffeMilk的博客
08-15 2万+
一、新建一个场景，创建基础的UI面板 1、比如取名为：UI_Test 2、创建一个面板，用作UI显示：如图所示区域，点击鼠标右键选择UIàPanel，如下图所示：   3、新建一个摄像机只用于照射UI界面，取名UICamera,然后对该UICamera进行必要的设置： 4、修改Canvas为UICanvas，Panel为BasePanel,然后对UICanvas进行必要的...
Unity GUI
qq_54350870的博客
04-17 510
unity ui学习课堂笔记
Unity教程：GUI 界面开发
qq_38456196的博客
01-28 4051
UI概述： UI永远是显示在屏幕的最前面上，不受变形、碰撞、光照的影响 GUI概述： GUI是Graphical User Interface的缩写。Unity的图形界面系统能容易和快速创建出各种交互界面。与传统的方法：创建GUI对象，标出位置，再写对应的事件函数不同，只需要用很少的代码，就可以把这些工作搞定。原理是内置的控制元素，可以把创建实例，标出位置与对应函数一次搞定。例如： voi...
Unity GUI游戏界面
Coderbook的博客
11-25 2656
Unity3D GUI 游戏界面 一、GUI 高级控件 系统高级 UI 控件已经成为游戏开发中不可或缺的一部分。高级界面由系统提供，比低级界面运行效率高（高级界面为系统实现，低级界面为自己手动实现），高级界面有很多种，可以应用于各种游戏以及软件。 1.Label 控件 Label 控件（标签控件），可用于在游戏界面以文本的形式展示出一串字符串或贴图。 用法： static function Label (position : Rect, text : string) : void static fun
Unity 基础—— UGUI 游戏界面开发：从基础到高级
最新发布
徽程22级的在读学生
03-01 1294
在 Unity 开发中，UGUI（Unity GUI）是构建游戏界面的核心工具。无论是简单的按钮、文本，还是复杂的布局和动画，UGUI 都提供了强大的支持。本文将基于 《Unity3D游戏开发》（宣雨松 第3版） 的内容，结合 Unity 2023 的最新特性，详细解析 UGUI 的使用方法，帮助你掌握游戏界面开发的技能。
Unity3D笔记六 GUI游戏界面
weixin_34319999的博客
01-08 395
1、Label：标签控件，可以在游戏中用来展示文本字符串信息，不仅可以写字还可以贴图片。   2、Button：按钮控件，一般分图片按钮和普通的按钮，还有一个连续按钮RepeatButton注意，这个在WebForm里面是没有的。 Ps:用GUI.Button(new Rect(10,200,70,30),"文字按钮" )来添加按钮时这个方法是有返回值的bool类型；   3、TextF...
Unity3D之UI设计
热门推荐
逆袭的博客
08-04 1万+
UI, 差不多是玩家打开一个游戏最先看到的东西, 差不多也是玩家最不在意的东西. 对开发者来说, 几乎每个游戏模块都与 UI 有联系, 处理不当 UI 就是恶梦. 宽高比适应, 分辨率适应, 像素对齐…光是这些就足够没有经验的开发者浪费大量的时间了. 好在 Unity 这样的引擎提供了已经很强大的 UI 解决方案, 以及许多其他开发者提供的插件. 但是这还不够. 这篇文章主要谈一谈 UI 的逻辑设
Unity教学课件： 第03章 Unity3D图形用户界面基础.ppt
05-08
在创建交互式游戏体验时，图形用户界面（GUI）是至关重要的组成部分。本教学课件主要讲解了Unity3D中的GUI系统，特别是关于Button控件和Label控件的基础知识。 首先，我们来深入理解3.1章节的Button控件。Button...
第03章 Unity3D图形用户界面基础.zip
12-04
在Unity3D中，图形用户界面（GUI）是至关重要的，它帮助开发者创建交互式的游戏控制台，显示得分，提供设置菜单等。本章将深入探讨Unity3D的UGUI系统，它是Unity自Unity5版本以来提供的全新GUI解决方案。 UGUI...
Unity3D图形用户界面基础：Button控件的使用方法详解
Unity教学课件中的第03章“Unity3D图形用户界面基础”主要介绍了GUI系统中的Button控件。Button控件是用于创建按钮，用户点击按钮时会触发相应的功能。在游戏开发中，Button控件经常用于创建界面、游戏功能的触发、...
Unity3d UI设计简述
zxycs1996的博客
05-07 6302
在我们的实训项目中，本人主要负责UI的设计以及unity中UI界面的代码编写部分。 由于之前没有对Unity进行过深入的了解，于是在实训开始的初期，我首先对于unity中的UI界面部分的功能进行了了解。 Canvas Canvas是一个画布，就像我们绘图用的图纸一样，所有的控件都必须在Canvas中才能被绘制出来，在其他地方则不能被绘制出来。 在Canvas上进行绘制时，首
Unity FairyGUI 曲面UI 多功能界面 界面demo最全
11-28
Unity FairyGUI 资源包里面介绍了很多种常用非常用的界面美观的UI demo，其中囊括了曲面UI，多功能界面等，可以说是UnityUI 界面demo最全的资源包
Unity 科幻风格的全息交互界面UI（内含多个Demo）
01-24
Unity 科幻风格的全息交互界面UI（内含多个Demo），若有报错，请在AssetStore下载 LegacyImageEffects，导入即可使用
我自己使用的Unity3d的UI框架
07-29
这是我自己总结的用于unity3d中的UGUI的代码框架，里面还有许多我总结的工具类，动态库
Unity自定义编辑器界面（Inspector界面）
01-01
在开发的过程中，往往会需要在组件中添加一些按钮，用于执行一些自定义的操作。 例如你有一个组件A，里面有一个List<Collider>，你想在这个List中存放当前Scene中所有的碰撞体数据。那么你会在组件A中写一个方法Find去遍历获取，一种情况你可以运行Unity的时候在Start方法中去执行Find方法，如果你想不运行Unity的情况下就获取到，那么可以使用[ExecuteInEditMode]标签，然后依旧在Start方法中执行Find方法。再或者就是这篇要介绍的自定义编辑器界面来处理。 首先我们简单的写个组件如下： using UnityEngine; public class
UnityGUI强大10多个统计DIY自定义组件分享
11-15
（http://blog.csdn.net/qq_29579137/article/details/73836597）（http://my.csdn.net/qq_29579137）（https://github.com/ll4080333/UnityCodes）分流，请支持正版，谢谢。
Unity中的UI系统之GUI
K_CRACKING的博客
02-27 2774
全局颜色//全局的着色颜色，影响背景和文本颜色//文本着色颜色//背景元素着色，和全局颜色相乘整体皮肤样式。
Unity3D游戏制作之 UI框架设计(四)：模态窗体管理
qq_37436859的博客
08-30 823
我们在开发UI窗体时，对于“弹出窗体”往往因为需要玩家优先处理弹出小窗体，则要求玩家不能(无法)点击“父窗体”，这种窗体就是典型的“模态窗体”。在此笔者设计了四种模式类型：完全透明、半透明、低透明度、透明且可以穿透。 对于“模态窗体”的基本实现原理是： 　　　　在弹出窗体的后面增加一层“UI遮罩窗体”，当需要弹出特定模态窗体时，脚本自动控制“UI遮罩窗体”的“层级”，把弹出模特窗体与普通窗...
学习Unity3D（1）之GUI游戏界面
IN
03-05 6355
前言：    本学习笔记仅供参考，有问题可以留言！    至于Unity游戏引擎的安装破解之类的问题请自行百度。    基本的Unity界面也可以随意百度的到，所以不做阐述。一、GUI高级控件    圣典百科GUI界面纲要    系统高级UI控件已经成为游戏开发中不可或缺的一部分。高级界面由系统提供，比低级界面运行效率高（高级界面为系统实现，低级界面为自己手动实现），高级界面有很多种，可以应用于各...
Unity3D GUI系统教程：创建图形用户界面
在Unity3D中，GUI（图形用户界面）是一个重要的组成部分，它允许开发者在3D场景中构建2D界面，用于展示游戏信息或接收用户输入。Unity3D的GUI系统非常灵活，可以创建各种复杂的用户交互界面。在【第五讲_Unity_GUI】...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值