文本组件+Image组件+图集

Canvas部分知识补充

元素渲染顺序

        以Hierarchy参考

                下方物体在上方物体前显示

                子物体在父物体前显示

                下方物体永远在前显示，无论上方的层次结构

资源导入

绝对路径：C:\Windows\Fonts下的许多字体可以用做UIText的字体资源

图片导入：

        1.图片拷入项目

        2.图片类型转换为精灵（才能被UI使用）

        3.使用Image组件显示

UGUI的基础组件

panel组件

        一个完整界面，一个Panel

        Panel位于Canvas子物体，四锚点在四角，边距为零，所以Panel和Canvas一样大，Canvas和屏幕一样大，所以Panel和屏幕一样大，元素显示处理在Panel中正常，则屏幕中也正常。

Text组件

Text:文本内容

Font:字库选择

Font Style:字体样式（标准，粗体，斜体，粗斜体）

Font Size:字号

Line Spacing:行间距

Rich Text:是否开启富文本        

        加粗：<b>文字</b>

        斜体：<i>文字</i>

        大小：<size=字号>文字</size>

        修改颜色：<color=颜色名>文字</xolor>

                          <color=#颜色数（十六进制）>文字</color>

Alignment:对齐方式（上下对齐，左右对齐）

Align By Geometry:几何对齐（参考字占用的几何空间）

Horizontal Overflow:水平溢出（折行，溢出[出右边框]）

Vertical Overflow:（截断不显示，溢出[出下边框]）

Best Fit:字号自适应

        关闭：使用原始字号

        开启：字号会在最小值和最大值间自动调整

Color：字体颜色

Material:字体材质

Raycast Target:是否响应事件

阴影：

外发光（描边）：

Image组件

        Color:用于混色，美术有时提供白图和色号，程序员对图处理，染成想要的颜色，可以减少包体大小。

        四种类型

                普通模式（图标）

                        Preserve Aspect:保持图片的宽高比，高度或宽度自适应

                        Set Native Size:可以快速恢复美术提供的图片原始像素尺寸

        ·        裁剪模式（九宫格，三宫格）

                        将图片切分为九宫格或三宫格

                                1.找到图片资源

                                2.选择精灵编辑器

                                3.九宫格切图

                                

                                1，3，7，9区域不拉伸

                                2，8横向拉伸

                                4，6纵向拉伸

                                具体效果如下图：

                                4.Image选择裁剪模式

                 瓦片模式（无缝贴图）

                 填充模式（进度条）

                        Fill Method:填充方式

                        Fill Origin:填充起始点

                        Fill Amount:填充百分比

                        Clockwise:顺时针或逆时针

                        Preserve Aspect:保持图片的宽高比，高度或宽度自适应

                        Set Native Size:可以快速恢复美术提供的图片原始像素尺寸

Raw Image组件

        原始图片组件：可以显示精灵或纹理

        功能相对于Image少，所以性能更好

        可以控制UV的偏移，来显示精灵的一部分

DrawCall

        屏幕显示过程

                CPU->加载数据->内存->显存->显卡->显示器

Batchs:就是当前渲染屏幕所有内容所需要的绘制调用数

每一张独立的UI图，会产生一个DrawCall

优化DrawCall(UI切片)

        将多个UI切片，合并成一张UI图，UI界面只加载一张UI图片显示

创建精灵图集后，如出现以下提示，进行以下设置：

在Project Setting下的Editor窗口中，将Mode改为V2，此为新版精灵图集系统，将替代旧版系统

图集制作：

Objects for Packing:所有碎图

取消允许旋转和允许合并：

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