UGUI 第一篇

UGUI ,一直都是没仔细看看,这里至少列出需要去学的东西。

using UnityEngine.UI;
using UnityEngine.Events;
using UnityEngine.EventSystems;

1、Canvas 相关组件

Canvas、—— 主要设置 Render Mode,决定是屏幕空间还是3D空间
Canvas Scaler、—— 主要设置 UI Scale Mode,决定UI的自适应缩放(和自动布局不同)
Graphic Raycaster、—— 射线,应该是忽略一些层的物体之类的

Canvas Group、
Canvas Renderer、

第1点——Canvas 渲染模式

Canva 3种渲染模式说明
Screen Space - Overlay默认,类似屏幕贴膜,一定是最上层的,无须指定相机
Screen Space - CameraCanvas放在一个相机的指定距离,通过该相机渲染,相机设置改变会有影响
World Space此模式下,Canvas类似普通的3D物体,通过坐标来决定遮挡关系

第2点——Canvas Scaler 缩放模式

Canvas Scaler 3种缩放模式说明
Constant Pixel Size
Scale with Screen Size
Constant Physical Size

第3点——Graphic Raycaster

Graphic Raycaster
每个Canvas都会有一个 Grahpic Raycaster,用于获取用户选中的 UI控件;
如果有多个 Canvas,那么Canvas之间的事件响应顺序由其显示顺序决定,Hierachy面板越靠上越后响应;
除了Screen Space - Overlay,另外两种渲染模式,Graphic Raycaster可以用来设置遮挡目标。

第4点——注意要点

注意要点
1、UI元素在Canvas里的绘制顺序和它们在Hierachy中的顺序相同,后一个会挡在前一个上边
2、如果有多个 Canvas,那么Canvas之间的事件响应顺序由其显示顺序决定,Hierachy面板越靠上越后响应
3、除了Graphic Raycaster,Component / Event / …还有 Physics Raycaster、Physics 2D Raycaster

2、Event System

Event System 对象是自动创建的,默认带了2个组件,是Unity中的事件管理系统,是一种将输入事件发送到应用程序的对象,包括鼠标、键盘、或自定义输入。

Component -> Event -> xxx(这里边有输入、事件触发器、射线(这个射线应该放在Canvas中))

默认带的两个

Event System
Standalone Input Module

其他

Touch Input Module (已经不再需要,因为它的功能已经被 Standalone Input Module 实现)
Event Trigger
。。。。。

3、可视化组件

Text(考虑富文本RichText)、
Image、—— 用于显示 sprite
Raw Image、—— 用于显示 texture
Mask、—— 用于限定子物体的显示不会超出此物体的范围
RectMask2D、——
显示组件共用的UI Effect Components —— Shadow、Outline、Position as UV1

GameObject -> UI - > Panel 物体 —— 创建的UI是一个带Image组件的对象,没有 Panel 这样的组件
一个覆盖屏幕的平面,一般可以用来显示UI背景,另外它的 Image 的 alpha不会影响子物体
另外,Panel 会自动根据屏幕大小来调整自身大小,所以不用担心其屏幕自适应问题
至于为何会调整自身大小,是因为它的Rect Transform的 Anchor是父物体Canvas的4个角

4、交互组件

Selectable Base Class —— Transition Options、Navigation Options
Button、
Toggle、
Toggle Group、
Slider、
Scrollbar、
Dropdown、
Input Field、
Scroll Rect、

GameObject -> UI -> ScrollView,创建的UI是一个复合对象,没有 Scroll View 这样的组件,用的是 Scroll Rect + Image + xx

//Button一种注册方式,点击时就会自动调用相应方法
button.onClick.AddListener(Test_AddFunction);

5、Rect Transform 与 锚点Anchor

6、Animation Intergation —— UI动画

7、Auto Layout自动布局

LayoutElement、
Content Size Fitter、
Aspect Ratio Fitter、
Horizontal Layout Group、
Vertical Layout Group、
Grid Layout Group、

8、各种UI事件 ——

回调函数、如何注册事件

9、UI How Tos ——

为多分辨率设计UI
使UI元素适应容器大小
创建一个世界坐标的UI
由脚本创建UI元素
用动画来创建一个屏幕移动的效果(例如UI元素由屏幕外移动到屏幕内)

10、UGUI源码

11、UI框架

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值