找回密码
 立即注册
查看: 360|回复: 0

【Unity3D】UGUI概述

[复制链接]
发表于 2023-2-23 12:54 | 显示全部楼层 |阅读模式
1 UGUI 与 GUI 区别


GUI控件 在编译时不能可视化,并且界面不太美观,在实际应用中使用的较少。UGUI 在编译时可视化,界面美观,实际应用较广泛。
2 Canvas 渲染模式(Render Mode)


    Screen Space - Overlay:画布自动适应屏幕尺寸,不能调整 RectTransform 组件参数属性,UI 元素置于屏幕上方,不需要相机

    Screen Space - Camera:画布自动适应屏幕尺寸,不能调整 RectTransform 组件参数属性,UI 元素的深度由 Plane Distance 决定

    World Space:画布不自动适应屏幕尺寸,可以调整 RectTransform 组件参数属性






3 UGUI 控件


在 Hierarchy 窗口右键,选择 UI 列表里的控件,即可创建 UGUI 控件。每个 UGUI 控件必须附着在 Canvas 里才能渲染,可以将多个 UGUI 控件放在一个 Canvas 里面渲染。

    Text:文本框

    Image:图框

    RawImage:原图框

    InputField:输入框

    Button:按钮

    Tooggle:选择框

    Slider:滑动条

    Scrollbar:滚动条

    Dropdown:下拉菜单

    Panal:面板

选中创建的 UGUI 控件,按键盘【T】键,可以调整控件大小和位置。

4 RectTransform 组件


每个 UGUI 控件都有一个 RectTransform 组件(继承 Transform),它定义了控件的锚点、相对锚点的位置、宽高、中心点、旋转、缩放等属性。

    Left、Top、Right、Bottom:控件的 4 个顶点围成的边框相对 4 个锚点围成的边框的位置;

    Width、Height:控件的宽高;

    Anchors:锚点,每个控件有 4 个锚点,由于 4 个锚点围成的边框始终是矩形,所已只需记录左上角和右下角的 2 个锚点位置;

    Pivot:中心点位相对置,配合旋转使用;

    Rotation:旋转角度;

    Scale:缩放;

    PosX、PosY、PosZ:中心点绝对位置。

左上和右下锚点在斜线上(无重合)

左上和右下锚点在水平线上(水平拉伸)

左上和右下锚点在竖直线上(垂直拉伸)

左上和右下锚点重合(4合1)
5 锚点(Anchor)


每个 RectTransform 组件中,都有锚点属性,用于限制控件大小、位置,便于适配不同屏幕尺寸。用户可以通过拖拽如下控件调整锚点位置,也可以在 RectTransform 属性面板里调整锚点位置。

每个控件有 4 个顶点和 4 个锚点,它们之间一一对应,由于 4 个锚点围成的边框始终是矩形,所已只需记录左上角和右下角的 2 个锚点位置,锚点可能会重合,根据锚点的重合情况,有以下 4 种状态:

    左上和右下锚点在斜线上(无重合):当锚点位置随屏幕尺寸变化时,4 个顶点相对 4 个锚点的位置不变,控件会向四周拉伸;

    左上和右下锚点在水平线上(水平拉伸):当锚点位置随屏幕尺寸变化时,左边 2 个顶点相对左边锚点的位置不变,右边 2 个顶点相对右边锚点的位置不变,控件会水平拉伸;

    左上和右下锚点在竖直线上(垂直拉伸):当锚点位置随屏幕尺寸变化时,上边 2 个顶点相对上边锚点的位置不变,下边 2 个顶点相对下边锚点的位置不变,控件会垂直拉伸;

    左上和右下锚点重合(4合1):当锚点位置随屏幕尺寸变化时,4 个顶点随着锚点的位置一起移动,但相对锚点的位置不变,控件不会变形。

用户可以在 RectTransform 属性面板选择锚点的重合状态以及锚点在屏幕中的位置,如下图:

按住 Alt 键,同时调整控件在屏幕中的位置,如下图:

读者可以查看 Unity3D API 文档里关于 Anchor 介绍的动图,依次选择【Help→Scripting Reference→Manual】打开API 文档,再依次选择【UI→Basic Layout】即可查看。笔者路径:file:///D:/Program%20Files/Unity/Editor/Data/Documentation/en/Manual/UIBasicLayout.html。

以下是官方 API 解释锚点的动图:

4 个锚点在屏幕中心重合

4 个锚点在屏幕右下角重合

左边 2 个锚点在屏幕左下角重合,右边 2 个锚点在屏幕右下角重合

左边 2 个锚点在屏幕底部控件下方重合,右边 2 个锚点在屏幕底部控件下方重合

声明:本文转自【Unity3D】UGUI概述

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×
懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Unity开发者联盟 ( 粤ICP备20003399号 )

GMT+8, 2024-11-16 11:51 , Processed in 0.090983 second(s), 26 queries .

Powered by Discuz! X3.5 Licensed

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表