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:所有碎图
取消允许旋转和允许合并:
该系列专栏为网课课程笔记,仅用于学习参考。