Unity3D学习之UI系统——UGUI

这篇具有很好参考价值的文章主要介绍了Unity3D学习之UI系统——UGUI。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


1. 前言

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

2 六大基础组件概述

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

3 Canvas——渲染模式的控制

3.1 Canvas作用

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unityUnity3D学习之UI系统——UGUI,学习,ui,笔记,unity

3.2 Canvas的渲染模式

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

3.2.1 Screen Space -Overlay 覆盖模式

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

3.2.2 Screen Space - Camera 摄像机模式

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
创建专门的摄像机渲染UI
并让主摄像机不渲染UI层

3.2.3 World Space

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

4 CanvasScaler ——画布缩放控制器

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
宽高 * 缩放系数 = UI界面大小

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
参考分辨率

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

4.1 Constant Pixel Size 恒定像素模式

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
图片格式要改为Sprite
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

恒定像素模式计算公式
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

4.2 Scale With Screen Size 缩放模式

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
会根据当前分辨率 和 参考分辨率的比率自动计算UI的缩放量
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

4.3 Constant Physical Size 恒定物理模式

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

4.4 3D模式

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

5 Graphic Raycaster图形射线投射器

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

6 EventSystem和Standalone Input Module

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

7 RectTransform

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
获得参数
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

8 三大基础控件

8.1 Image 图像控件

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

8.2 Text 文本控件

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
富文本
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

8.3 RawImage 原始图像控件

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

9 组合控件

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

9.1 Button 按钮

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

9.1.1 代码控制

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

9.1.2 监听点击事件的两种方式

1) 托脚本
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
2) 代码监控
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

9.2 Toggle 开关控件

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
只要三个的toggle group属于同一个Group,就变成了单选框

9.2.1 代码控制

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

9.2.2 监听事件

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

9.3 InputField 文本输入控件

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

9.3.1 代码控制

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

9.3.2 事件监听

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

9.4 Slider 滑动条控件

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

9.4.1 代码控制

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

9.4.2 事件监听

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

9.5 ScrollBar 滚动条

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

9.6 ScrollView 滚动视图

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

9.6.1 代码控制

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

9.7 Dropdown 下拉列表控件

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

10 图集制作

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
UGUI查看DrawCall
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

11 UI事件监听接口

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

11.1 继承接口和函数

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
拖入相关的
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

11.2 事件监听父类

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

11.3 练习题

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
长按按钮脚本,提供两个事件给外部,让外部进行处理
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unityUnity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

12 EventTrigger 事件触发器

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

12.1 练习题

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
关联函数

设置向量长度为遥感能移动的长度

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unityUnity3D学习之UI系统——UGUI,学习,ui,笔记,unity

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

13 屏幕坐标转UI相对坐标

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

13.1 练习题

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

14 Mask遮罩

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
maskable要钩勾上
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
是否显示遮罩的图
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

15 模型和粒子显示在UI之前

15.1 3D模型在UI之前

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
这部分在Camere前面有
还有另一个方法
通过图片显示
使用一个单独的摄像机渲染该层,然后转化成照片
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
拖入到taget camera
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
在UI里创建RawImage
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

15.2 粒子特效在UI之前

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
粒子特效和3D物体基本一致

16 异形按钮

点击图片按钮的空白区域也会响应,所以要设置异性按钮
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
改变点击后影响的控件 target Graphic
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

通过代码改变图片的透明度
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

17 自动布局组件

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

17.1 布局属性

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

17.2 水平垂直布局组件

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
给父对象添加
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
设置之后会自动调节子对象的大小
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
会是否强制扩展子对象

添加 Layout Element 组件,规则会按布局元素进行设置,
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
父对象最小后,会按子对象的大小显示
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
父对象变大后,会出现上图情景

17.3 水平布局组件

和垂直布局差不多
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

17.4 网格布局组件

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unityUnity3D学习之UI系统——UGUI,学习,ui,笔记,unity
添加后
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

17.5 内容大小适配器

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
和ScrollView配合使用
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

17.6 宽高比适配器

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

18 画布组Canvas Group

在panel 组件 添加,管理画布中所有的组件
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity
Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity

19 UGUI源代码

Unity3D学习之UI系统——UGUI,学习,ui,笔记,unity文章来源地址https://www.toymoban.com/news/detail-832576.html

到了这里,关于Unity3D学习之UI系统——UGUI的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Unity3D学习之数据持久化——XML

    最终达到的效果 树形结构 属性通过空格隔开 属性名 = 引导包裹的内容 这两个代表的东西是一样的 可以在菜鸟上使用xml验证器 xml验证器 在Resources文件夹创建一个xml文件 把文件再复制到streamingAsserts 3.2.1 通过Resources文件进行读取 3.2.2 通过xml文件进行加载 获取根节点 遍历同名

    2024年01月23日
    浏览(34)
  • Unity3D学习之数据持久化——PlayerPrefs

    就是保存存档和读取存档。 分为两部分,存储和读取,先看存储在看读取 PlayerPrefs 是unity提供可以存储和读取玩家数据的公共类 上面定义过 PlayerPrefs.SetInt(“myAge”,18) 后面再定义PlayerPrefs.SetFloat(“myAge”,20.2f) 后面进行读取int型 myAge时,会变成默认值0 打印结果 0 和 100 1)父

    2024年01月18日
    浏览(66)
  • 【Unity3D小功能】Unity3D中实现点击‘文字’出现‘UI面板’

    推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享 简书地址 QQ群:398291828 大家好,我是佛系工程师 ☆恬静的小魔龙☆ ,不定时更新Unity开发技巧,觉得有用记得一键三连哦。 宠粉博主又来了,今天有粉丝问我如何实现点击一段文字然后出现的面板在那段文字附近显示: 深入了

    2024年04月13日
    浏览(42)
  • unity3D之UI

    1.canvas介绍 (1)Canvas属于Unity的UGUI,UGUI提供了强大的可视化编辑,大大提高了GUI的开发效率。 (2)Canvas是所有UI组件的父物体,也就是说每一个UI组件都必须在Canvas下,作为Canvas的子物体,当你创建一个UI控件时,如果在Hierarchy下没有Canvas组件的话,Unity会帮你自动创建一个Canva

    2024年02月04日
    浏览(95)
  • 【Unity3D小功能】Unity3D中实现UI擦除效果、刮刮卡功能

    推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享 简书地址 我的个人博客 大家好,我是佛系工程师 ☆恬静的小魔龙☆ ,不定时更新Unity开发技巧,觉得有用记得一键三连哦。 使用Unity3D实现UI的擦拭效果、刮刮卡功能的效果实现方式比较多,比如说用Shader、Texture渲染都是可以

    2024年02月04日
    浏览(200)
  • 【Unity3D】UI Toolkit简介

            UI Toolkit 是一种基于 Web 技术的 GUI 框架,是为了解决 UGUI 效率问题而设计的新一代 UI 系统(UGUI 的介绍详见→UGUI概述)。与 UGUI 不同,UI Toolkit 没有采用 GameObject 的方式,而是参考了 Web 技术的 XML 和 CSS 方案。这意味着它只保存变化的数据,而不是整个界面状态,

    2024年02月10日
    浏览(39)
  • 【Unity3D】UI Toolkit元素

    1 前言         UI Toolkit简介 中介绍了 UI Builder、样式属性、UQuery、Debugger,UI Toolkit容器 中介绍了 VisualElement、ScrollView、ListView、GroupBox 等容器,UI Toolkit样式选择器 中介绍了简单选择器、复杂选择器、伪类选择器等样式选择器,本文将介绍 UI Toolkit 中的元素,主要包含

    2024年02月09日
    浏览(36)
  • 【Unity3D】UI Toolkit容器

    1 前言         UI Toolkit简介 中介绍了 UI Builder、样式属性、UQuery、Debugger,UI Toolkit元素 中介绍了 Label、Button、TextField、Toggle、Radio Button、Slider、Progress Bar、Dropdown、Foldout 等元素,UI Toolkit样式选择器 中介绍了简单选择器、复杂选择器、伪类选择器等样式选择器,本文将

    2024年02月09日
    浏览(36)
  • 使用Unity生成UI预制体 (Unity3D)

    在Unity中,预制体(Prefab)是一种非常有用的工具,用于生成可重复使用的UI元素。预制体使得UI的创建和管理变得更加简单和高效。在本文中,我们将详细介绍如何使用Unity生成UI预制体,并提供相应的源代码示例。 步骤1:创建UI元素 首先,我们需要创建UI元素,例如按钮、

    2024年02月05日
    浏览(42)
  • 【Unity3D】实现UI点击事件穿透

              注意:EventSystem.current.RaycastAll获取到的对象列表是能够接受事件的,假如你的按钮Button自己身上没有Image,而是Button的子物体有,那么你就要给这个子物体也加上标签Tag才能响应到。 如果ExecuteEvents.Execute不管用,可以试试ExecuteEvents.ExecuteHierarchy

    2024年02月04日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包