UGUI组件详解

最新推荐文章于 2024-07-28 21:55:01 发布
最新推荐文章于 2024-07-28 21:55:01 发布
阅读量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

画个小圆儿
关注
专栏目录
【Unity-UGUI控件全面解析】| Layout自动布局组件详解
努力前行，总会成为自己心中的那道光
06-06 2万+
UGUI中有个自动布局组件Auto Layout，主要包含下面几个模块（点击可进入官方文档下查看描述）： 自动布局 布局元素 (Layout Element) 水平布局组 (Horizontal Layout Group) 垂直布局组 (Vertical Layout Group) 网格布局组 (Grid Layout Group) 内容大小适配器 (Content Size Fitter) 自动布局系统 基于布局元素和布局控制器的概念。一个布局元素是具有矩形变换以及其他可选组件的游戏对象。布局元素对自身
UGUI——基本组件
jizhenli1的博客
03-30 2010
Text 动态字体：用于实时生成，比如聊天打字等。 静态字体：使用Unity3D的静态字体需要先制作静态字体库，可以借助BMFont 这个工具来生成字体图集和UV信息，得到png图片和fnt文件。 SDF字体：矢量字体，当界面放大或者缩小的时候，不会出现模糊。普通字体 是记录UV坐标，生成纹理，SDF是记录距离轮廓的距离，并且在缩 放的时候进行插值。 ...
UGUI中UI控件简介
*LYZY*的博客
08-28 6260
又是新的一周啊！开始新的生活啦！这周主要简单介绍一下关于Unity中的新版本的UI常用控件。新版本的Unity对UI方面做了不少优化之处呢！今天主要以unity较新的版本unity5.6.2版本来讲述一下UI控件。 先来看一下都有哪些UI控件元素！ Text：文本 Text控件呢！是我们在UI元素中比较常见的控件啦！先来看一下组件上面都有哪些属性吧！
Mint UI简介
最新发布
AngelCryToo的专栏
07-28 882
Mint UI 是一套基于 Vue.js 的移动端组件库，由饿了么（Ele.me）前端团队开发和维护。其设计灵感来自于饿了么的移动端应用，旨在提供轻量级、简洁且功能齐全的 UI 组件，以帮助开发者快速构建高质量的移动端 Web 应用。
【UnityUGUI】UGUI六大组件和三大基本控件详解
秩沅
10-22 2928
屏幕分辨率计算公式 = 画布尺寸 * 缩放系数像素单位转存储单位尺寸 x 16 位 / 8字节 /1024 =？kbCnvasscaler——画布缩放控制器。
UGUI
Xingaaaxing的专栏
12-29 1712
1、UIButton 单独可使用        这个脚本可以 提供外部监听按下/点击/释放的3个事件（参数附带着数据）。  源官方Button只有 点击事件 [csharp] view plaincopyprint? using UnityEngine.Events;   using UnityEngine.EventSystems;    
UGUI组件详解(基本)
u012636407的博客
02-13 2181
******************************************************************************************************************部分内容摘自网络:灵思迈Leansmall的博客约定: 绿色(控件) 黑色(说明) 红色(属性) 深蓝(摘抄段落) 紫色(事件) 橙色(脚本)***********...
UGUI案例详解+核心代码.rar
08-14
本资源“UGUI案例详解+核心代码.rar”提供了关于如何使用C#语言在Unity中操作UGUI组件的具体实例和关键代码，这对于理解和掌握Unity中的UI系统非常有帮助。 首先，我们来探讨一下UGUI中的Button组件。Button是UGUI...
UGUI轮播图组件实现方法详解
08-26
UGUI轮播图组件实现方法详解 本资源主要为大家详细介绍了UGUI轮播图组件的实现方法，支持自动轮播、手势切换等功能，具有一定的参考价值。下面是对此组件的详细知识点解释： 1. 轮播图组件的基本概念 UGUI轮播图...
【Unity-UGUI控件全面解析】| Text文本组件详解
热门推荐
努力前行，总会成为自己心中的那道光
04-29 2万+
Text文本，是为了向用户展示非交互式的文本信息。用于在工程中显示文字的地方(常用)，简单来说只要能看到字的情况下，一般都是用的这个组件。 在Hierarchy视图，选择 UI→Text 新建Text文本：
UGUI组件封装
04-09
参考博客 https://blog.csdn.net/qq_37310110/article/details/89149420
4.6以上通用UGUI官方组件示例教程工程全
03-14
4.6以上通用UGUI官方组件示例教程工程全 测试工程5.1.1f1， 从官方拿过来的，完全无错。 切记导入的时候工程路径不可有中文。
UGUI基本组件
weixin_47027712的博客
09-27 343
1.Canvas（画布） a. Canvas就是所以ui组件都在这创建，改写属性等等； b.创建画布是在菜单栏右击选择UI下的Canvas就可以创建； 2.panel（面板，控制面板） a.可以管理UI组件，设计属性； b.可以修改图片背景，颜色，透明度； 3. Text（文本） a.编辑文字； b.修改文字颜色，字体，样式，大小，居中，加粗等等； 4.Button（按钮） a.Button就是按钮，比如开始游戏，可以添加，文字，图片； b。unity最常用的组...
Unity3D UGUI
qq_63044970的博客
01-04 330
一、 Canvas 1.Screen Space - Overlay 这种渲染模式表示 Canvas 下的所有的 UI 控件永远位于屏幕的前面 , 不管有没有相机 , UI元素永远在屏幕最前面 ，主要是2D效果。类似手机膜贴在手机屏幕的最上面，若是屏幕尺寸或屏幕分辨率发生变化，Canvas也会自动和当前屏幕尺寸相适应，这也就很好的解决了屏幕自适应问题。 2. Screen Space - Camera 这种渲染模式 Canvas 和 摄像机之间有一定的距离 , 可以在摄像机和 Canvas ...
UGUI基本组件介绍
weixin_44165354的博客
06-13 3310
以下内容是根据Unity 2018.4.13f1版本进行编写的 使用红色字体并用【】中括号提示的是Unity 2020.1.0f1版本的新特性 1、UGUI基本控件及常用组件 图一 图二   注：本文中控件指的是能直接在面板创建的Unity内置的UGUI控件（如图一），组件指的是挂载在GameObject游戏物体上的Unity内置脚本（如图二）   1-1、Image控件 UGUI系统中提供了两种显示图片的控件——Image和Raw Image。 其中Image控件是UGUI中最常用的控件之一，用于挂
UGUI-- 六大基础组件
Go_Accepted的博客
04-17 1057
UGUI：六大基础组件 Canvas对象上依附的： Canvas：画布组件，用于渲染UI控件 Canvas Scaler：画布分辨率自适应组件，主要用于分辨率自适应 Graphic Raycaster：射线事件交互组件，主要用于控制射线响应开关 RectTransform：UI对象位置锚点控制组件，主要用于控制位置和对齐方式 EventSystem对象上依附的： EventSystem Standalone Input Module 玩家输入事件响应系统和独立输入模块组件，主要用于监听玩家
Unity UGUI 各组件介绍
海月的博客
08-13 921
画布 Canvas 画布是摆放所有UI元素的区域，每一个UI对象都有一个自身的画布组件。 脱离了画布，UI就无法使用。 创建画布时，会自动创建一个UI事件管理系统EventSystem。 画布的渲染模式 Render Mode 屏幕空间-覆盖 Screen Space - Overlay 即使没有相机，也能呈现UI。 如果屏幕大小发生了改变，画布将自动改变大小来适配屏幕。 屏幕空间-摄像机Screen Space - Camera 画布被放置在相机前一个给定的距离上，通过指定相机..
【UGUI】UGUI 常用布局组件
阿黄的博客
07-04 2031
原文地址：http://blog.csdn.net/u012322710/article/details/53200911 一. Grid Layout Group 横竖布局 Padding —— 间隔 CellSize —— 子物体大小 Spacing —— 子物体之间的间隔 Start Corner —— 子物体排列的角度 Start Axis ——
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、付费专栏及课程。

余额充值