微信分享 淘宝网站 怎么做如何自己开发手机app

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:轴点（篮圈），以当前物体参考

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

                        

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