UGUI组件详解

最新推荐文章于 2024-09-07 16:32:56 发布
最新推荐文章于 2024-09-07 16:32:56 发布
阅读量4k 收藏 39
点赞数 5
分类专栏： UGUI Unity 文章标签： UGUI Unity
Unity 同时被 2 个专栏收录
111 篇文章 10 订阅
订阅专栏
UGUI
14 篇文章 0 订阅
订阅专栏

什么是 UGUI

UGUI 是 Unity 自带的一套 GUI 系统，含有基本的一些 UI 控件。

UGUI 控件有哪些？

我们常用的有 Canvas，Text，Image，Button，Toggle，Slider，Scroll Bar，Scroll View，Input Field。

怎样新建 UI 控件

在Hierarchy中添加 
在 Hierarchy 中右键添加

在Component中添加 
在菜单栏的 Component 中添加

Canvas

Canvas 是所有 UI 控件的根节点，即所有 UI 控件均需要在 Canvas 下。

这里写图片描述 
上图所示即一个 Canvas 包含了多个 UI 控件。

Text

用来显示文本的。

这里写图片描述

  • Text：即显示的文本内容。

  • Font：文字的字体。

  • Font Style：字体的形式，有正常，加粗，斜体，加粗斜体几种可选。

  • Font Size：字体的大小。

  • Line Spacing：行间距。

  • Rich Text：是否支持富文本。

  • Alignment：对齐方式。

  • Align By Geometry：几何对齐

  • Horizontal Overflow：横向裁剪方式。

    • Wrap：裁剪
    • Overflow：不裁剪

  • Vertical Overflow：竖向裁剪方式。

    • Truecate：裁剪 
      • Overflow：不裁减

  • Best Fit：是否最佳适应当前大小。

  • Color：字体的颜色。

  • Material：字体的材质。

  • Raycast Target：是否可被点击到。

Image

用来显示图片的。

这里写图片描述

  • Source Image：显示的源图片。

  • Color：给图片叠加的颜色。

  • Material：图片的材质。

  • Raycast Target：是否可被点击到。

  • Image Type：图片的类型。

    • Simple：普通类型

      这里写图片描述

      这里写图片描述

      • Preserve Aspect：是否保持图片的外形比例
      • Set Native Size：设置为图片的原大小

    • Sliced：九宫格

      这里写图片描述

      这里写图片描述

      • Fill Center：是否填充中间部分

    • Tiled：平铺

      这里写图片描述

      这里写图片描述

      • Fill Center：是否填充中间部分

    • Filled：填充

      这里写图片描述

      这里写图片描述

      • Fill Method：

        • Horizontal：横向填充
        • Vertical：纵向填充
        • Radial 360：360 度填充
        • Radial 180：180 度填充
        • Radial 90：90 度填充

      • Fill Origin：填充起点

      • Fill Amount：填充量
      • Clockwise：是否按时钟方向
      • Preserve Aspect：是否保持图片的外形比例
      • Set Native Size：设置为图片的原大小

Button

游戏中使用的按钮。

这里写图片描述

这里写图片描述 
上图展示了按钮一般由图片和文字组成

这里写图片描述

  • Interactable：按钮当前是否激活可用

  • Transition：过渡方式

    • Color Tint：颜色过渡.

      这里写图片描述

      • Target Graphic：控制颜色的对象
      • Normal Color：正常时的颜色
      • Highlighted Color：悬浮高亮时的颜色
      • Pressed Color：点击按下时的颜色
      • Disabled Color：禁止不可用时的颜色
      • Color Mutiplier：颜色乘数
      • Fade Duration：渐变过渡时间

    • Sprite Swap：图片过渡

      这里写图片描述

      • Target Graphic：控制变化图片的对象
      • Highlighted Sprite：悬浮高亮时的图片
      • Pressed Sprite：点击按下时的图片
      • Disabled Sprite：禁止不可用时的图片

    • Animation：动画过渡

      这里写图片描述

      • Normal Trigger：正常时的动画触发
      • Highlighted Trigger：悬浮高亮时的动画触发
      • Pressed Trigger：点击按下时的动画触发
      • Disabled Trigger：禁止不可用时的动画触发
      • Auto Generate Animation：自动生成动画

  • Navigation：导航方式

    • None：无
    • Horizontal：横向
    • Vertical：纵向
    • Automatic：自动
    • Explicit：自定义

  • Visualize：导航线是否可见

Toggle

开关，适用于单选或者复选或者控制其他控件的显示或隐藏。

这里写图片描述 
上图显示一个 Toggle 一般由底图，文本和一个是否选中的图片组成。

这里写图片描述

大部分类似于 Button。

  • Is on：是否默认处于打开状态

  • Toggle Transtion：开关过渡方式

    • Fade：渐变过渡
    • None：无

  • Graphic：开关控制的对象

  • Group：所属于的 Toggle Group。（所属同一个 Toggle Group 的可以存在互斥状态）

Slider

滑杆。

这里写图片描述 
上图所示一个滑杆由背景，滑杆进度，滑块三部分组成。

这里写图片描述

大部分类似于 Button。

  • Fill Rect：填充的对象

  • Handle Rect：滑杆对象

  • Direction：滑动的方向

    • Left to Right：由左往右
    • Right to Left：由右往左
    • Bottom to Up：由下往上
    • Up to Bottom：由上往下

  • Min Value：最小值

  • Max Value：最大值

  • Whole Numbers：是否只允许整数进度值

  • Value：当前值

Scroll Bar

滚动条。

这里写图片描述 
上图所示滚动条由背景和滑块组成。

这里写图片描述

大部分类似于 Slider。

  • Size：滑块的比例大小

  • Number of Steps（指可滚动的位置数目）：为0和1时不生效，如果设置成2，则滚动条滚动时只会处在最大值和最小值的位置，因为它的可滚动数目为两个。

Scroll View

滚动区域。

这里写图片描述 
上图所示滚动区域由背景，遮罩和显示内容组成。

这里写图片描述

  • Content：显示的内容框

  • Horizontal：是否可以横向滚动

  • Vertical：是否可以纵向滚动

  • Movement Type：

    • Unrestricted：无限制的滚动，无回滚
    • Elastic：有限制的滚动，有回滚
    • Elasticity：回滚系数，数值越大弹性越小
    • Clamped：有限制的回滚，无回滚

  • Inertia：惯性

    • Deceleration Rate：减速率

  • Scroll Sensitivity：滚动灵敏度

  • Viewport：可视区域

  • Horizontal Scrollbar：横向滚动控制条

  • Vertical Scrollbar：纵向滚动控制条

Input Field

输入框。

这里写图片描述 
上图所示输入框由背景，默认文本和输入文本组成。

这里写图片描述

大部分类似于Button。

  • Text Component：输入文本组件

  • Text：文本内容

  • Character Limit：限制字符长度 (0 表示不限制)

  • Content Type：验证输入类型

    • Standard：标准
    • Autocorrented：自动修正
    • Integer Number：整数
    • Decimal Number：可带小数
    • Alphanumeric：数字和字母混合
    • Name：字母
    • Email Address：邮箱
    • Password：密码
    • Pin：数字密码
    • Custom：自定义

  • Placeholder：最初显示文本

  • Line Type:换行方式（当输入内容超出输入域边界时）

  1. single Line(单一行)：超出边界不换行，输入域的内容只有一行
  2. multi Line Submit(多行)：超出边界则换行，输入域的内容有多行；
  3. multi Line Newline(多行):超出边界则新建换行，输入域内容有多行；

  • Caret Blink Rate：光标闪动速率

  • Caret Width：光标宽度

  • Custom Caret Color：光标颜色

  • Selection Color：被选中部分颜色

  • Hide Mobile Input：是否隐藏手机输入

  • Read Only：是否只读

Dropdowm

大部分类似于Button。

  • Caption Text:首选项文字显示
  • Caption Image:首选项图片显示
  • Item Text：下拉列表中单个Item文字的显示
  • Item Image:下拉列表中单个图片的显示
  • Value值会随着下拉列表选项中的不同而变化，默认为0，就是选择的时下拉列表中的第一个
  • Options里面的第一个框是下拉列表中的文字，第二个是图片。

简单的控件组合

这里写图片描述

这里写图片描述 

其中包含了常用的基本控件组合。

本文参考自：https://blog.csdn.net/fannyandfly/article/details/51323937

画个小圆儿
关注
专栏目录
Unity3D的UI系统（UGUI）初级入门
03-21
本课程主要介绍Unity3d的UI系统（UGUI），先对UGUI做一个总体概述，之后对每个UI控件逐一进行详细讲述，内容包括控件的作用、设置方法、使用场景及属性细节，帮助大家熟练使用UGUI设计游戏的交互界面。
Unity之UGUI详解
热门推荐
BraveRunTo的博客
06-09 3万+
UGUI 文章目录UGUI六大基础组件概述Canvas对象上依附的：CanvasCanvas ScalerGraphic RaycasterRectTransformEventSystem对象上依附的：EventSystemStandalone Input ModuleCanvas画布组件Screen Space overlayScreen Space CameraWorld SpaceCanvasScaler画布缩放控制器组件学前准备：Constant Pixel Size恒定像素模式Scale With
干货——UGUI渲染RT渲染半透明并与背景完美融合
最新发布
wufeng0000的博客
09-07 1402
UGUI 是 Unity 自带的一套 UI 系统，提供了丰富的组件和功能，方便开发者快速创建各种用户界面。UGUI 的渲染是在屏幕空间进行的，默认情况下不支持直接渲染到 RenderTexture。
Unity中的UI系统之UGUI
K_CRACKING的博客
04-22 4097
UGUI是什么UGUI是Unity引擎内自带的UI系统官方称之为:Unity UI是目前Unity商业游戏开发中使用最广泛的UI系统开发解决方案它是基于Unity游戏对象的UI系统,只能用来做游戏UI功能不能用于开发Unity编辑器中内置的用户界面如何在Unity中使用UGUI直接在Hierarchy窗口中右键选择UIUI中所有内容都是UGUI相关控件六大基础组件1、Canvas对象上依附的:①Canvas:画布组件,主要用于渲染UI控件②。
Unity基础UGUI学习
wangwen_22的博客
11-06 2270
2.多个Canvas使用相同Camera时，优先根据SortingLayer显示，当SortingLayer相同时，再次根据OrderInLayer显示。使用 UGUI来开发UI，离不开Canvas组件，所有的 UI 元素，一般都是放在包含 Canvas 组件的节点。Sort Order：Canvas 深度，多个 Canvas时，Sort Order 值大的在上层。Sorting Layer：Canvas深度，可以手动添加，决定显示的优先级，列表下面的优先级越高。这篇文章很详细，可以看看，
Unity 如何把UGUI做到极致的优化
你只管努力，其他的，交给天意！
07-01 8125
在日常工作中，UI的性能往往是被忽略的一点，他其实看似影响不大，但当一个项目达到了性能瓶颈的时候，你反过来在去优化UI，你会发现你大部分的性能，内存，包体全都的原因都处于UI系统。 一个没有提前考虑性能和优化的UI系统带来的问题会有很多，比如： Apk包体过大 界面之间切换不流畅 动画卡顿掉帧 内存占用过大（会导致应用闪退） Draw Call过多导致GPU渲染压力大游戏掉帧 顶点过多造成游戏卡顿 这只是一部分在游戏中很常见的性能问题。 那么究竟是什么原因造成了我们的UI性能下降。 首先，要知道为什么会
UGUI案例详解+核心代码.rar
08-14
本资源“UGUI案例详解+核心代码.rar”提供了关于如何使用C#语言在Unity中操作UGUI组件的具体实例和关键代码，这对于理解和掌握Unity中的UI系统非常有帮助。 首先，我们来探讨一下UGUI中的Button组件。Button是UGUI...
UGUI轮播图组件实现方法详解
08-26
UGUI轮播图组件实现方法详解 本资源主要为大家详细介绍了UGUI轮播图组件的实现方法，支持自动轮播、手势切换等功能，具有一定的参考价值。下面是对此组件的详细知识点解释： 1. 轮播图组件的基本概念 UGUI轮播图...
UGUI ScrollRect滑动定位优化详解
08-19
UGUI ScrollRect 滑动定位优化详解 UGUI ScrollRect 滑动定位优化是 Unity 中非常重要的一项技术，它可以实现滑动组件的优化，提高用户体验。本文将详细介绍 UGUI ScrollRect 滑动定位优化的实现方法，并提供详细的...
UGUI讲解.zip
03-13
UGUI，全称为Unity Graphical User Interface，是Unity引擎中一套强大的基于图元的用户界面系统，自Unity 5.0版本开始引入。这个压缩包"UGUI讲解.zip"包含了使用UGUI完成的实例代码，适用于Unity 2017.4.2f1版本，...
UGUI学习
guapiyipian的博客
02-13 898
UGUI学习
Unity--UGUI创建基本的UI
爱编程的鱼的博客
11-10 1669
填充：已与简单相同的方式显示sprite，不同之处在于他从原点按定义的方向，方法和数 量填充的sprite。有多种UI元素可用于创建自己的用户界面，尝试使用文本和图像创建基本的UI布局。2.1.在Hierarchy面板中 右键 -> UI ->Canvas;3.2 在Inspector中，将纹理类型更改为精灵（2D和UI）2.2.在Hierarchy面板中右键 -> UI ->Text。平铺：平铺不是拉伸，对于没有边界的精灵，将整个精灵平铺。3.1 在项目中选择2D -> Texture。
UGUI简述
A_Ly的专栏
08-29 2699
UGUI 全称 ：Unity GUI.是Unity公司在 4.6以上版本加入的强大UI界面系统。 特点： 引擎内置，结合紧密； 运行稳定，操作简便； UGUI优势 * 动画系统与Unity引擎紧密结合 使用Unity的Animation与Amimator 做UGUI的动画系统。 *屏幕自适应 *UGUI的深度处理 在Canvas中，以精灵的在“层级视图”父对象中的上下循环，决定其
【Unity基础】ugui的基础知识篇
qq_41094072的博客
09-26 7087
这里主要学习UGUI的可视化组件 参考资料:https://docs.unity3d.com/cn/2021.3/Manual/UIVisualComponents.html。
UGUI的简单理解
NeverMore741的博客
09-23 1400
1.Canvas（画布） UGUI中几乎所有的组件都要在Canvas下搭建 2.EventSysteam（事件系统） 如果进行UI搭建的时候，缺少或删除了EventSysteam的话会导致UGUI中的组件无法交互，无法发生事件. 3.Panel 平时我们进行UI工程搭建的时候，我们都会先创建Panel面板，创建Panel面板的同时，会自动生成Canvas，后期所有的UI搭建都将在Panel上进行。 4.Image Source Image（图像源）：纹理格式为Sprite（2D .
UGUI优化篇（更新中）
2301_76618920的博客
07-15 1529
UGUI优化
【UGUI】UGUI入门，系统介绍
GreAmbWang的博客
05-01 2万+
Unity 2017.1.0f3 常用的UI控件 添加UI控件 创建UI控件时，如果没有Canvas和EventSystem系统会自动创建。 Canvas是画布，是所有UI控件的根类，所有UI控件都必须在Canvas上绘制。如果UI控件不在Canvas下，将无法正常渲染显示。 EventSystem负责处理UI控件的操作。 组件 所有的UI控件都有一个RectTransfor...
UGUI：一个轻量级的TFTLCD彩色显示屏GUI库
LONGSHEN1的博客
12-29 3767
UGUI是一个经过精心设计的轻量级TFT-LCD彩色显示屏GUI库，旨在为用户提供高效、稳定且易于使用的图形用户界面。该库采用先进的图形处理技术，能够实现高质量的图像显示和流畅的用户交互体验。同时，UGUI还提供了丰富的组件和工具，使用户能够轻松地创建各种类型的GUI界面，满足不同应用场景的需求。
Unity UI系统-UGUI简介
陈言必行 -- Unity游戏开发领域优质博主
09-06 4608
UGUI的简介： UGUI系统是从Unity 4.6开始，被集成到Unity的编辑器中Unity官方给这个新的UI系统赋予的标签是：灵活，快速和可视化！，简单来说对于开发者而言就是有三个优点：效率高效果好，易于使用，扩展，以及与Unity的兼容性高。 在不使用任何代码的前提下，就可以简单快速额在游戏中建立其一套UI界面，这在过去是绝对不可想想的，但是新的UI系统确实做到了这一点因为Un
Unity UGUI详解：组件与互动指南
“Unity UGUI教程”是一份详细解释Unity用户界面系统（UGUI）的中文文档，涵盖了从基本布局到互动组件，再到动画集成和自动布局等多个方面。 1. UIOverview概要： Unity的UGUI系统是其4.6版本引入的，用于创建现代...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值