UI基础概念+Canvas相关知识

发布于:2025-03-15 ⋅ 阅读:(13) ⋅ 点赞:(0)
UI基础概念

UI(User Interface):与用户进行交互

UE(User Experience):用户体验

常见的UI类型:

环抱式;弹框;全屏覆盖;超全屏;3D

环抱式:游戏中UI的交互按钮环绕在屏幕的周围。

弹框:当前查看UI居于屏幕中央,游戏主体场景仍可从未遮盖处可见。

全屏覆盖:当前UI遮挡全部游戏屏幕,引导用户沉浸体验当前UI系统。

超全屏:当前UI比实际游戏屏幕大,例如一部分游戏中的大地图。

3D:3D效果的UI,往往需要和模型对接合作。

Unity的UI系统

OnGUI:最早的UI系统,纯代码实现,写法类似Update

        优点:出现很早,纯代码可控制;

        缺点:只能程序开发。

NGUI:Unity著名插件,可实现2D和3D的界面,出现在老项目

        优点:功能完整,集成了动态效果

        缺点:性能较弱,交互使用物理引擎实现,需要付费

UGUI:官方制作的UI系统,NGUI作者开发

        优点:性能优秀,功能较完整

        缺点:功能需要再完善,动画需要配合DoTween

常见设备的分辨率

比例

4:3:iPad,安卓Pad

16:9:非全面屏的手机,PC的显示器

18:9:全面屏

异形屏:向标准分辨率靠近

配置常见设备分辨率

Canvas组件

简答理解:UI绘制在Canvas上,可以理解为画画的纸

Canvas在两个模式下(Overlay和Camera)会覆盖整个屏幕,所做屏幕UI显示时,只需要处理好Canvas中的显示即可。

所有UI元素必须建立在Canvas下,否则会出现不显示的问题。

创建Canvas:在层级面板下右键,选择UI->Canvas即可成功创建

Canvas在默认状态下和屏幕一样大。

三种渲染模式

Overlay:Canvas贴在相机镜头上,所有UI元素在场景物体前方显示

        Pixel Perfect:高像素清晰度渲染

        Sort Order:多Canvas时,控制Canvas显示顺序,越大越在前方显示

Camera:使用相机显示Canvas

        修改Canvas下Canvas组件Render Mode属性:Camera,将相机拖给Canvas下Canvas组件Render Camera属性,将Cube位置调整到Canvas前

        调整Canvas中Plane Distance,控制Canvas到渲染相机的距离

        Plane Distance:Canvas到相机的距离

        当SortingLayer和Order in Layer相同时,距离相机越近,显示越靠前(满足相机渲染关系)

        排序层一致时,Order in layer越大越靠前

        Sorting Layer:配置的排序层顺序,越靠下,显示越靠前

在UI系统中常见的SortingLayer层:

若想要实现在两个画布中播放特效的效果,特效相关设置如下:

World Space:Canvas以3D物体的形式显示在场景中,将Canvas模式调整为World Space,再将Canvas放入相机可视范围内;符合的UI效果如图:

Canvas缩放

该组件会拉伸所有Canvas下的子元素

        UI Scale Mode:拉伸类型

        

                Constant Pixel Size:静态模式

                Scale With Screen Size:根据屏幕尺寸进行拉伸

                

                        Reference Resolution:该属性的x和y值建议填入UI元素给定的参考UI值

                        Screen Match Mode:UI适配方式

                                宽度或高度自适应

                                完全自适应(自动计算宽高变化量作为缩放倍率)

                                世界模式中一米对应UI多少元素(默认即可)

                Constant Physical Size:根据屏幕的物理英寸进行拉伸

项目中在Canvas缩放组件中的对应值设置

        使用根据屏幕尺寸进行拉伸

        设计分辨率,填写美术的效果图像素值(覆盖整个屏幕)

        选择Expand:自动计算高度自适应拉伸还是宽度自适应拉伸

        覆盖满整个屏幕的背景图计算

                默认拿到1280*720的背景图

                计算方法:

                        18:9下:缺失两边,(设计分辨率高度/9)*18;

                        16:9下:美术一般都会按照16:9出图;

                         4:3下:缺失上下,(设计分辨率宽度/4)*3

RectTransform组件

        出现位置:出现在所有Canvas子元素中,所有UI元素都应该有RectTransform组件

Pos(XYZ):位置(X,Y,Z),单位(像素)

Width,Height:宽和高,单位(像素)

Anchors:描点(四叶草),以父物体参考

        三种情况

                单锚点:距离计算是锚点到轴点的xyz偏移

                双锚点:元素边界到锚点线的距离,轴点到锚线的距离        

                四锚点:元素的四个边界到锚线的距离

        锚点快速选择工具(十字符号)

                默认:移动锚点

                Alt:移动锚点+快速停靠位置

                Shift:移动锚点+移动锚点+快速停靠位置

Pivot:轴点(篮圈),以当前物体参考

        调整轴点后,位置计算,旋转,缩放都会受到影响,一般轴点都保留在中心点。

                        

该系列专栏为网课课程笔记,仅用于学习参考。 


网站公告

今日签到

点亮在社区的每一天
去签到