UGUI基础

article/2025/10/6 11:56:37

UGUI基础

##1、UGUI概述

++1.1、Unity界面发展史

++++【老版本界面onGUI】=>【GUI插件NGUI】=>【新版本界面UGUI】

++1.2、UGUI特点

++++新的UI系统是从Unity4.6开始被集成到Unity编译器中的。Unity官方给这个新的UI系统赋予的标签是：灵活，快速和可视化。

++++对于开发者而言，就是有三个优点：效率高效果好，易于使用和扩展以及与Unity的兼容性高。

++++新的UGUI系统具有以下特点：

--1、引擎内置，结合更加紧密。

--2、运行稳定，操作方便。

++1.3、UGUI优点

++++UGUI与老版本onGUI相比：

--1、独立的坐标体系；

--2、全新的事件机制；

--3、更佳高效率的运转效率。

++++UGUI与GUI插件NGUI相比：

--1、由NGUI创始人参与开发；

--2、与Unity结合更加密切；

--3、自适应系统更加完善；

--4、更方便的深度处理；

--5、省去Altas，直接使用Sprite Packer；


##2、UGUI画布

++2.1、创建UGUI控件

++++第一种： 在Hierarchy当中通过 右键=>UI，找到相应的UI控件。

++++第二种：通过工具栏【GameObject】=>【UI】，找到相应的UI控件。

++2.2、Canvas画布

++++当我们任意创建一个UI控件的时候可以看到在层级视图当中不但生成我们创建的控件，还会同时创建一个Canvas和EventSystem。


++++Canvas是画布，是所有UI控件的根类，也可以看作所有UI控件的父物体，所有UI控件都必须在Canvas上面绘制。它是一个带有Canvas组件的游戏物体EventSystem事件系统，负责监听用户的输入。

++++创建UI控件时，当层级视图当中没有Canvas和EventSystem系统会帮我们自动创建。

++2.3、总结

++++1、UGUI画布也称为Canvas，UGUI是所有控件的父类。

++++2、所有UGUI控件都必须绘制在画布上面。

++++3、当创建UGUI控件，工程当中没有Canvas的时候会自动创建Canvas与EventSystem。


##3、UGUI基础控件

++3.1、Text

++++Text控件是用来显示文本的文本控件，选中Text可以查看属性：

--Text ：创建控件时显示的文字

--Character：

  --Font ：字体

  --Font Style ：字体格式：黑体/斜体

  --Font Size ：字体大小

  --Line Spacing ：行间距

  --Rich Text ：富文本

--Paragraph：

  --Alignment ：对其方式

  --Horizontal Overflow ：水平溢出

  --Vertical Overflow ：垂直溢出


++++Text的属性可以在Inspector当中通过Text组件进行设置，也可以在代码当中进行动态设置。给Canvas挂载脚本UGUISetting.cs

示例：

Text text;

void Start(){

    text = GameObject.Find(“Text”).GetComponent<Text>();

    text.text = “立钻哥哥”;

    text.alignment = TextAnchor.MiddleCenter;

    text.fontSize = 20;

    text.fontStyle = FontStyle.BoldAndItalic; //字体样式

    text.color = Color.red;

}


++3.2、Image

++++Image控件主要是用来显示图片，显示图片的格式是Sprite，具体属性如下：

--Source Image ：Image显示的图片，图片格式为Sprite

--Color ：颜色。

--Material ：材质。

--Preserve Aspect ：图像宽高是否按原始比例。

--Set Native Size ：将Image大小设置为图片默认大小。


++++当我们给Image选择一张贴图之后会出现Image Type选项，如下图。ImageType总共有四种选项：

--simple ：显示单个会拉伸；

--Tilled ：平铺显示，图片按照原始显示；

--Sliced ：按照九宫格显示，拉伸区域只会在九宫格中间；

--Filled ：填充显示，可以根据不同的填充方式模拟技能冷却的效果。


++++Image Type的Filled填充模式常可以用来制作血条，冷却技能等。

++++示例：如何使用程序控制图片填充显示： 当按键A按下的时候Image控件180度填充显示。

--在Start方法中获取Image控件，设置填充模式为180度填充：

void Start(){

    image = GameObject.Find(“Image”).GetComponent<Image>();

    image.fillMethod= Image.FillMethod.Radial180;

}

--在Update方法中判断当按键A按下的时候让图片180度填充：

bool isFilled =true;

void Update(){

    if(Input.GetKeyDown(KeyCode.A)){

        isFilled = false;

    }

    if(!isFilled){

        image.fillAmount += Time.deltaTime;

        if(image.fillAmount >= 1){

            image.fillAmount = 1;

            isFilled = true;

        }

     }

}


++3.3、RawImage

++++RawImage同样是用来显示图片的控件，跟Image控件的差别就是Image显示图片的格式为Sprite，RawImage显示图片的格式为Texture，此外RawImage可以控制行列。

--Raw Image(Script)

  --Texture ：导入的图片样式

  --UV Rect：纹理贴图坐标，w和h


++3.4、Button

++++Button控件，包含的Text控件用于显示按钮的文本。

++++当某个UGUI控件添加了Button组件便拥有了按钮点击的功能。

++++Button组件：

--Interactable ：是否可以交互。

--Transition ：按钮的过渡效果。

--按钮在不同状态的颜色：

  --Normal Color

  --Highlighted Color

  --Pressed Color

  --Disabled Color

  --Color Multiplier

--Navigation ：控件间导航。

--On Click() ：给按钮添加响应事件。


++++Transition用于设置按钮在不同状态间的过渡效果，总共有四种方式：

--（1）None：无过渡效果

--（2）Color Tint：设置不同状态不同颜色来过渡。

--（3）Sprite Swap：设置不同图片来过渡不同状态。

--（4）Animation：设置不同动画过渡不同状态。

 

++++给按钮添加监听事件：

Button btn;

void Start(){

    //获取到按钮

    btn = GameObject.Find(“Button”).GetComponent<Button>();

    //给按钮添加监听事件

    btn.onClick.AddListener(BtnClick);

}

 

void BtnClick(){

    //按钮响应事件

    Debug.Log(“btn.onClick.AddListener()”);

}


++3.5、Slider

++++给滑动条Slider添加监听事件。

示例：

Slider slider;

void Start(){

    //获取到Slider组件

    slider = GameObject.Find(“Slider”).GetComponent<Slider>();

    //添加监听事件

    slider.onValueChanged.AddListener(SliderValueChange);

}

 

//事件响应

public void SliderValueChange(float value){

    Debug.Log(“value = ” +value);

}


++3.6、ScrollBar

++++滚动条ScrollBar，Scrollbar层级视图当中包含了滑块Handle。

++++Scrollbar属性：

--Handle Rect ：滑动区域。

--Direction ：滑动方向。

--Value ：滑块当前值。

--Size ：滑块大小。

--Number Of Steps ：可滑动区域分为几步。

--On Value Changed(Single) ：滑块响应事件。


++3.7、Toggle

++++Toggle为单选框，可以用来创建开关按钮。如下图，层次视图当中包含了显示背景的Background和显示文本的Label。


++++Toggle属性如下，其中Group表示当前选中框是否属于某一组选中框，若是的话则所有选中框只能选中一个。

--Is On ：交互是否开启。

--Toggle Transition ：状态改变过渡效果设置。

--Graphic ：选中或取消要显示或隐藏的文本或图片。

--Group ：当前选中框是否属于某个组。

--On Value Changed(Boolean) ：事件响应。


++++给Toggle添加监听事件

示例：

Toggle toggle;

void Start(){

    toggle = GetComponent<Toggle>(); //获取Toggle组件

    //给Slider组件添加监听事件

    toggle.onValueChanged.AddListener(ToggleAction);

}

void ToggleAction(bool isOn){

    print(isOn);

}


++3.8、InputField

++++InputField创建出来如下图，InputField层级视图当中包含Placeholder与Text，

--Placeholder 用于显示占位符，即输入框没有输入文本时显示的文本，例如下图的“Enter text”；

--Text 用于显示输入的内容。

++++输入框Inputield的具体属性：

--Text ：初始文本显示的内容

--Character Limit ：字符数量限制。

--Content Type ：文本类型。

--Line Type ：文本单行显示还是多行。

--Caret Blink Rate ：光标闪动频率。

--Caret Width ：光标的宽度。

--Custom Caret Color ：自定义光标的颜色。

--Selection Color ：选中文本时的颜色。

--On Value Changed(String) ：文本编辑时触发的事件。

--On End Edit(string) ：结束编辑的时候触发的事件。


++++给InputField添加监听事件

示例：

InputField inputField;

void Start(){

    //获取输入框

    inputField = GameObject.Find(“InputField”).GetComponent<InputField>();

    inputField.onEndEdit.AddListener(InputFieldEndEdit);

}

 

void InputFieldEndEdit(string text){

    print(“文本框当中的文本：” +text);

}


++3.9、Panel

++++Panel ：面板，功能相当于控制的容器，里面可以存放其他控件。

--作用： 使用Panel控件可以整体移动和处理一组控件。

--设计规范： 一个功能完备的UI界面往往会使用多个Panel控件。

++++示例： 将资源商店当中的所有分类放在单独一块Panel当中。


##4、RectTransform

++4.1、RectTransform

++++RectTransform的作用用来计算UI的位置和大小，RectTransform继承于Transform，具有Transform的所有特征，通过RectTransform能够实现基本的布局和层次控制。

++++RectTransform当中专有名字：

--Pos X, Pos Y ：Pivot与Anchor的距离

--Pivot ：中轴，中心点

--Anchor ：锚点

--Width&Height ：宽与高，相对于锚点

--Left, Right, Top, Bottom ：左右上下


++4.2、中心点Pivot

++++按下T键选中某一个UI控件即可看到UI控件的中心点，中心点也叫中心轴，当鼠标拖动UI控件进行旋转的时候会围绕中心点旋转。

--中心点是矩形的一部分。

--0对应左下角，1对应右上角。


++4.3、锚点Anchor

++++如图所示，箭头所指即为锚点，锚点表示的是相对于父级矩形的子矩形区域。

++++如图所示，锚点为四边形，锚点有多种摆放方式，可以为矩形，点状或是为线状。

++++锚点移动范围仅限于父级视图当中。


++4.4、锚点的四种摆放方式

--锚点呈点状

--锚点与组件本身重合

--锚点跟父物体重合

--锚点呈线状

++++（1）锚点呈点状： 当UI的锚点为中心点时，不管父控件的大小怎么改变，UI距离锚点的位置固定，大小固定，此时RectTransform(Pos X, Pos Y, Width, Height)，其中Pos X与Pos Y分别表示UI中心点到锚点的水平与方向距离。Width与Height是UI的大小。


++++（2）锚点与组件本身重合： 当UI的锚点为四方形或者与UI本身大小相同的时候，UI的大小与父控件的大小变换成正比，此时RectTransform(Left, Top, Right, Botton)，分别为锚点左，上，右，底 距离UI对应边的距离。


++++（3）锚点跟父物体重合： 当UI控件的锚点与父物体重合的时候，不管父物体怎么变化，UI控件四条边相对于锚点四条边的距离保持不变。


++++（4）锚点呈线状：

--当UI控件的锚点呈线状并为竖直方向时，则UI控件竖直方向的大小与父物体竖直方向的大小成正比，水平方向大小不变。

--当锚点呈线状并且为水平方向时，则水平方向大小与父物体水平方向的大小成正比，竖直方向大小不变。




#立钻哥哥Unity 学习空间: http://blog.csdn.net/VRunSoftYanlz/

++立钻哥哥推荐的拓展学习链接（Link_Url）：

++++立钻哥哥Unity 学习空间: http://blog.csdn.net/VRunSoftYanlz/

++++Unity引擎基础：https://blog.csdn.net/vrunsoftyanlz/article/details/78881685

++++Unity面向组件开发：https://blog.csdn.net/vrunsoftyanlz/article/details/78881752

++++Unity物理系统：https://blog.csdn.net/vrunsoftyanlz/article/details/78881879

++++Unity2D平台开发：https://blog.csdn.net/vrunsoftyanlz/article/details/78882034

++++UGUI基础：https://blog.csdn.net/vrunsoftyanlz/article/details/78884693

++++UGUI进阶：https://blog.csdn.net/vrunsoftyanlz/article/details/78884882

++++UGUI综合：https://blog.csdn.net/vrunsoftyanlz/article/details/78885013

++++Unity动画系统基础：https://blog.csdn.net/vrunsoftyanlz/article/details/78886068

++++Unity动画系统进阶：https://blog.csdn.net/vrunsoftyanlz/article/details/78886198

++++Navigation导航系统：https://blog.csdn.net/vrunsoftyanlz/article/details/78886281

++++Unity特效渲染：https://blog.csdn.net/vrunsoftyanlz/article/details/78886403

++++Unity数据存储：https://blog.csdn.net/vrunsoftyanlz/article/details/79251273

++++Unity中Sqlite数据库：https://blog.csdn.net/vrunsoftyanlz/article/details/79254162

++++WWW类和协程：https://blog.csdn.net/vrunsoftyanlz/article/details/79254559

++++Unity网络：https://blog.csdn.net/vrunsoftyanlz/article/details/79254902

++++C#事件：https://blog.csdn.net/vrunsoftyanlz/article/details/78631267

++++C#委托：https://blog.csdn.net/vrunsoftyanlz/article/details/78631183

++++C#集合：https://blog.csdn.net/vrunsoftyanlz/article/details/78631175

++++C#泛型：https://blog.csdn.net/vrunsoftyanlz/article/details/78631141

++++C#接口：https://blog.csdn.net/vrunsoftyanlz/article/details/78631122

++++C#静态类：https://blog.csdn.net/vrunsoftyanlz/article/details/78630979

++++C#中System.String类：https://blog.csdn.net/vrunsoftyanlz/article/details/78630945

++++C#数据类型：https://blog.csdn.net/vrunsoftyanlz/article/details/78630913

++++Unity3D默认的快捷键：https://blog.csdn.net/vrunsoftyanlz/article/details/78630838

++++游戏相关缩写：https://blog.csdn.net/vrunsoftyanlz/article/details/78630687

++++设计模式简单整理：https://blog.csdn.net/vrunsoftyanlz/article/details/79839641

++++U3D小项目参考：https://blog.csdn.net/vrunsoftyanlz/article/details/80141811

++++UML类图：https://blog.csdn.net/vrunsoftyanlz/article/details/80289461

++++Unity知识点0001：https://blog.csdn.net/vrunsoftyanlz/article/details/80302012

++++U3D_Shader编程（第一篇：快速入门篇）：https://blog.csdn.net/vrunsoftyanlz/article/details/80372071

++++U3D_Shader编程（第二篇：基础夯实篇）：https://blog.csdn.net/vrunsoftyanlz/article/details/80372628

++++立钻哥哥Unity 学习空间: http://blog.csdn.net/VRunSoftYanlz/


--_--VRunSoft : lovezuanzuan--_--


http://chatgpt.dhexx.cn/article/EiektelZ.shtml

相关文章

【Unity基础】ugui的案例篇（个人学习）

【Unity基础】ugui的案例篇（个人学习）

文章目录 前言案例1、点击游戏物体改变一次颜色&#xff0c;被UI遮挡的情况下点击无效1.动态图演示2.实现方式I.实现方案1 通过射线检测实现 3.源码演示Lua部分代码CSharp部分代码 案例2、圆形图片的制作1.图演示2.实现方式I.实现方案1 使用Mask组件实现II.实现方案2 通过重写G…
阅读更多...
Unity UGUI源码解析

Unity UGUI源码解析

前言 这篇文章想写的目的也是因为我面试遇到了面试官问我关于UGUI原理性的问题&#xff0c;虽然我看过&#xff0c;但是并没有整理出完整的知识框架&#xff0c;导致描述的时候可能自己都是不清不楚的。自己说不清楚的东西&#xff0c;别人就等于你不会。每当学完一个东西的时…
阅读更多...
UGUI基础学习

UGUI基础学习

目录 TEXT IMAGE ROWIMAGE TEXT fontsize:字体 color&#xff1a;字体颜色 ;inespacing:字行间隔 代码展示&#xff1a; using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI;public class TEXTtest : MonoBehaviour {p…
阅读更多...
UGUI源码解析——总览

UGUI源码解析——总览

一&#xff1a;图像相关 ——UIBehaviour&#xff1a;UI组件的基类&#xff0c;继承MonoBehaviourUGUI源码解析——UIBehaviour——CanvasUpdateRegistry&#xff1a;图像、布局重建注册器UGUI源码解析——CanvasUpdateRegistry——ICanvasElement&#xff1a;图像、布局重建接…
阅读更多...
UGUI 全方位了解

UGUI 全方位了解

随着 unity3d 4.6 ~ 5.x 新 UI 系统终于与大家见面了。这篇文章将不会介绍如何使用按钮、滚动条之类的UI控件&#xff0c;这些内容可以参考 Unity Manual&#xff1b;这篇文章的重点是&#xff0c;如何理解 UI 系统的设计&#xff0c;以便更好的在实际中使用它。 RectTransfor…
阅读更多...
UI框架(UGUI)

UI框架(UGUI)

整个游戏的工程源码下载链接&#xff1a;点击打开链接 可以参考的写的Demo和本文章来学习 毕竟有些细节问题在文章中不能一一说到 工具&#xff1a;VS2010、Unity5.2.3f 先介绍整个Demo的主面板 其中任务、技能、符文等等都是按钮&#xff0c;点击按钮会生成相应面板 【Pro…
阅读更多...
UGUI相关使用

UGUI相关使用

UGUI 文章目录 UGUI1.六大基础组件概述1.1 Canvas组件1.2 CanvasScaler组件1.3 Graphic Raycaster组件1.4 Event System组件1.5 Standalone Input Module组件1.6 RectTransform组件 2.三大基础控件概述2.1 图像控件Image2.2 文本控件Text2.3 RawImage原始图像组件 3.七大组合控…
阅读更多...
Unity UGUI系统

Unity UGUI系统

UI系统对比 对 UI 系统的选择取决于是为 Unity 编辑器开发 UI&#xff0c;还是为游戏或应用程序开发运行时 UI。 UI 的类型UI 工具包Unity UI(uGUI)IMGUI注意事项运行时&#xff08;调试&#xff09;✔ *✔✔这指用于调试用途的临时运行时 UI。运行时&#xff08;游戏内&…
阅读更多...
UGUI 详解

UGUI 详解

1.RectTransform RectTransform组件 继承自Transform组件&#xff0c;是2D界面中元素的Transform。 对比Transform增加了新的属性分别是&#xff1a;Anchor&#xff08;锚点&#xff09;和 Pivot&#xff08;轴心点&#xff09;。 属性&#xff1a; localPosition&#xff1a;图…
阅读更多...
UGUI学习笔记（八）UGUI不规则响应区域

UGUI学习笔记（八）UGUI不规则响应区域

一、Unity自带的点击策略 在上一篇文章中我们了解到&#xff0c;UI的默认响应区域是UI元素所在的矩形框线内的区域。这也就意味着&#xff0c;当UI的图形为不规则形状时&#xff0c;点击图形的外部也可能会触发事件。 但其实Unity自带了一种不规则区域点击策略。要想使用它&…
阅读更多...
[Unity UGUI图集系统]浅谈UGUI图集使用

[Unity UGUI图集系统]浅谈UGUI图集使用

**写在前面&#xff0c;下面是自己做Demo的时候一些记录吧&#xff0c;参考了很多网上分享的资源 一、打图集 1.准备好素材&#xff08;建议最好是根据图集名称按文件夹分开&#xff09; 2、创建一个SpriteAtlas 3、将素材添加到图集中 4、生成图集 到此&#xff0c;我们的图…
阅读更多...
Ngui和Ugui的区别

Ngui和Ugui的区别

NGUI的元素更新&#xff1a; UIPanel.LateUpdate采用轮询的方式&#xff0c;每帧都会执行&#xff0c;并且每帧都会有UIPanel.UpdateWidgets这个函数的调用&#xff0c;做的事情就是对这些UI元素的位置、缩放等信息的获取&#xff0c;也就是即使没有变化的UI元素&#xff0c;也…
阅读更多...
Unity—UGUI

Unity—UGUI

每日一句&#xff1a;读数、学习 去更远的地方&#xff0c;才能摆脱那些你不屑一顾的圈子 目录 InputFiled输入框 例&#xff1a;用户名和密码 Toggle组件 案例&#xff1a;冷却效果 InputFiled输入框 Text Component 输入文本组件 Text输入内容 Character Limit 输入字符…
阅读更多...
【Unity3D】UGUI概述

【Unity3D】UGUI概述

1 UGUI 与 GUI 区别 GUI控件 在编译时不能可视化&#xff0c;并且界面不太美观&#xff0c;在实际应用中使用的较少。UGUI 在编译时可视化&#xff0c;界面美观&#xff0c;实际应用较广泛。 2 Canvas 渲染模式&#xff08;Render Mode&#xff09; Screen Space - Overlay&a…
阅读更多...
怎样使用UGUI

怎样使用UGUI

什么是 UGUI UGUI 是 Unity 自带的一套 GUI 系统&#xff0c;含有基本的一些 UI 控件。 UGUI 控件有哪些&#xff1f; 我们常用的有 Canvas&#xff0c;Text&#xff0c;Image&#xff0c;Button&#xff0c;Toggle&#xff0c;Slider&#xff0c;Scroll Bar&#xff0c;Scroll…
阅读更多...
Unity3D UGUI系列之合批

Unity3D UGUI系列之合批

目录 1. 什么是UGUI的合批1.1 准备工作1.2 批处理1.3 批处理的意义1.4 UGUI的合批 2 分析工具的使用2.1 Frame Debugger的使用2.2 Profiler-UI的使用 3 UGUI合批规则3.1 UGUI合批初体验3.2 UGUI合批被打断初体验3.3 UGUI合批规则详解3.3.1 合批规则3.3.2 合批规则示例13.3.3 合…
阅读更多...
unity中NGUI与UGUI的区别？

unity中NGUI与UGUI的区别？

什么是UI? UI即User Interface&#xff08;用户界面&#xff09;的简称。泛指用户的操作界面&#xff0c;UI设计主要指界面的样式&#xff0c;美观程度。而使用上&#xff0c;对软件的人机交互、操作逻辑、界面美观的整体设计则是同样重要的另一个门道。好的UI不仅是让软件变得…
阅读更多...
【UGUI】UGUI入门，系统介绍

【UGUI】UGUI入门，系统介绍

Unity 2017.1.0f3 常用的UI控件 添加UI控件 创建UI控件时&#xff0c;如果没有Canvas和EventSystem系统会自动创建。 Canvas是画布&#xff0c;是所有UI控件的根类&#xff0c;所有UI控件都必须在Canvas上绘制。如果UI控件不在Canvas下&#xff0c;将无法正常渲染显示。 Eve…
阅读更多...
UGUI框架

UGUI框架

记录最新学习的UGUI框架。 UIType类保存面板基本信息&#xff08;名称、路径&#xff09;&#xff0c;该面板会在具体的面板类里面&#xff08;StartPanel&#xff09;进行实例化。 public class UIType {private string name;public string Name { get > name; }private …
阅读更多...
UGUI的简单理解

UGUI的简单理解

1.Canvas（画布） UGUI中几乎所有的组件都要在Canvas下搭建 2.EventSysteam（事件系统） 如果进行UI搭建的时候，缺少或删除了EventSysteam的话会导致UGUI中的组件无法交互，无法发生事件. 3.Panel 平时我们进行UI工程搭建的时候，我们都会先创建Panel面板，创建Panel面板的…
阅读更多...
推荐文章

Copyright @ 2022~2023