Unity UI 系统:Unity UI package (uGUI) 使用说明

卡牌游戏 UI 系统

Unity UI 基础概念

布局(Layout)

Unity 的屏幕坐标定义为左下角为 (0, 0),右上角为 (1, 1) 。

锚点(Anchor)

  • 锚点控制 子矩形UI的边 相对 父矩形对应坐标轴的指定比例边 的 距离 保持不变。
    • Anchor Min X 的 值 value 表示:该矩形UI左边的X坐标 相对 父矩形UI的比例值为value处对应的X轴坐标 的距离保持不变。
    • Anchor Min Y 的 值 value 表示:该矩形UI底边的Y坐标 相对 父矩形UI的比例值为value处对应的Y轴坐标 的距离保持不变。
    • Anchor Max X 的 值 value 表示:该矩形UI右边的X坐标 相对 父矩形UI的比例值为value处对应的X轴坐标 的距离保持不变。
    • Anchor Max Y 的 值 value 表示:该矩形UI顶边的Y坐标 相对 父矩形UI的比例值为value处对应的Y轴坐标 的距离保持不变。
  • 所以锚点不能通过控制父控件的大小来直接控制子控件的缩放,只能通过控制子控件边与父控件边的距离来间接控制。

随屏幕大小缩放

  • 通过 GameObject 菜单创建新的画布时,默认情况下也会添加画布缩放器组件
  • 在画布缩放器组件中,可将其 UI Scale Mode 设置为 Scale With Screen Size。使用此缩放模式,可以指定要用作参考的分辨率。如果当前屏幕分辨率小于或大于此参考分辨率,则会相应设置画布的缩放因子,使所有 UI 元素都与屏幕分辨率一起放大或缩小。
  • 其他设置见官方说明

布局组

网格布局组

Event System

事件系统的主要作用如下:

  • 管理视为选中状态的 GameObject
  • 管理正在使用的输入模块(Input Module)
  • 管理射线投射(如果需要)
  • 根据需要更新所有输入模块

Input Module

输入模块包含定义事件系统行为方式的主要逻辑,可用于:

  • 处理输入
  • 管理事件状态
  • 将事件发送到场景中对象。

该卡牌游戏中采用的就是默认的 Standalone Input Module。该模块与控制器/鼠标/触摸输入具有相同的功能。响应输入时会发送按钮按压、拖拽以及类似事件。

在这里插入图片描述

处理输入事件

如 UI 可以通过实现 IPointerClickHandler 接口的方式来处理用户点击事件:

public class CardUI : MonoBehaviour, IPointerClickHandler
{
    public void OnPointerClick(PointerEventData eventData)
    {
        if (eventData.button == PointerEventData.InputButton.Left)
        {
            if (onClick != null)
                onClick.Invoke(this);
        }

        if (eventData.button == PointerEventData.InputButton.Right)
        {
            if (onClickRight != null)
                onClickRight.Invoke(this);
        }
    }
}

Raycaster

射线投射器用于确定指针在哪个对象上方。

当场景中存在并启用了射线投射器时,只要从输入模块发出查询,事件系统就会使用该射线投射器。

如果使用多个射线投射器,那么这些射线投射器都会进行针对性投射,并且结果将根据与元素的距离进行排序。

Graphic Raycaster

图形射线投射器用于对 Canvas 进行射线投射。射线投射器查看画布上的所有图形,并确定是否有任何图形被射中。

Canvas Group

画布组 (Canvas Group) 可集中控制整组 UI 元素的某些方面,而无需单独处理每个元素。画布组的属性会影响所在的 GameObject 以及所有子 Object 。

画布渲染器

画布渲染器 (Canvas Renderer) 组件用于渲染Canvas中包含的图形 UI 对象。
在这里插入图片描述

属性

画布渲染器在 Inspector 中没有公开属性

详细信息

菜单 (GameObject > Create UI) 中提供的标准 UI 对象都在需要的地方附加了 Canvas Renderer,但对于自定义 UI 对象,可能需要手动添加此组件。虽然 Inspector 中没有公开属性,但可通过脚本访问一些属性和函数;请参阅脚本参考中的 CanvasRenderer 页面以了解完整的详细信息。

Unity UI 类型

基础 UI 组件

文本(Text)

图像(Image)

原始图像(Raw Image)

图像组件采用精灵,但原始图像采用纹理(无边框等)。

遮罩 (Mask)

遮罩不是可见的 UI 控件,而是一种修改控件子元素外观的方法。遮罩将子元素限制(即“掩盖”)为父元素的形状。因此,如果子项比父项大,则子项仅包含在父项以内的部分才可见。

按钮(Button)

组成
  • Background(Image)
  • Text

滑动条(Slider)

组成
  • Background(Image)
  • Fill Area
    • Fill(image)

滚动条(Scrollbar)

  • 可以通过 Direction 设置滚动方向:
    在这里插入图片描述
组成
  • Background(Image)
    • Sliding Area(Tansform)
      • Handle(Image)

输入区域(InputField)

组成
  • Background(Image)
    • Placeholder(Text)
    • Text

开关(Toggle)

组成
  • Background(Image)
    • CheckMark(Image)
  • Label(Text)

矩形滚动框(Scroll Rect)

组成
  • Background(Image)
    • Viewport(Image + Mask)
      • Content
    • Scrollbar Horizontal(Scrollbar)
    • Scrollbar Vertical(Scrollbar)

下拉选单(Dropdown List)

组成
  • Image
    • Label(Text)
    • DropdownArrow(Image)
    • Template(Scroll Rect)

UI Animation

过渡选项

Color Tint

Sprite Swap

Animator

Animator Controller

  • 控制器会引用其中所用的动画剪辑(Animation Clip),使用状态机来管理各种动画状态和它们之间的过渡。
  • 仅在对人形角色进行动画化时,才需要引用 Avatar。对于其他动画类型,只需Animator Controller。

设置 Trigger

在这里插入图片描述

代码中触发方法:

timeout_animator?.SetTrigger("pulse");

Reference

  • https://docs.unity3d.com/2022.3/Documentation/Manual/com.unity.ugui.html
  • https://zhuanlan.zhihu.com/p/157273459
  • https://zhuanlan.zhihu.com/p/667966938
  • https://www.lfzxb.top/personal-ui-framework-consider/
  • https://developer.unity.cn/projects/63f6c166edbc2a7851283390
  • 22
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Unity UI框架是一种用于创建用户界面(UI)的工具集和组件集合。它提供了丰富的UI元素和功能,可以帮助开发者轻松地构建交互性和可视化的界面。 Unity UI框架可以通过Unity Asset Store进行下载。打开Unity编辑器,点击"Window"菜单,选择"Asset Store"选项,会打开Asset Store窗口。在搜索栏中输入"Unity UI框架",可以找到很多可用的UI框架。 在选择和下载UI框架之前,开发者应该了解项目的需求并进行评估。可以根据项目的规模、复杂度和用户需求来选择合适的UI框架。一些常用的UI框架包括:"TextMeshPro"、"DOTween" 和 "UGUI"等。开发者可以根据自己的需要选择适合的框架。 下载UI框架后,可以将其导入到Unity项目中。在Asset Store或者Unity Package Manager中选择合适的UI框架,点击"Download" 或者 "Import"按钮进行安装。安装完成后,可以在Unity编辑器的"Assets"文件夹中找到导入的UI框架。 使用UI框架时,可以在Unity编辑器中创建UI元素,如按钮、文本、滑动条等,并对其进行布局和样式设置。可以通过脚本代码来实现交互性功能,如按钮的点击事件、输入框的文本处理等。UI框架还提供了很多可定制的功能和效果,如动画、过渡和绘制等,可以增强用户界面的视觉效果和交互体验。 总之,Unity UI框架是一个方便使用的工具集,可以帮助开发者快速构建用户界面。通过下载合适的UI框架,开发者可以轻松地创建、布局和管理UI元素,提供良好的用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值