UGUI
文章平均质量分 87
UGUI
夜槿笙歌
这个作者很懒,什么都没留下…
展开
-
UGUI性能优化学习笔记(三)图片和图集
虽然我们可以将JPG、PNG之类的格式导入Unity作为纹理的源文件,但实际上,在导入Unity后,会自动对其进行纹理压缩。为什么要进行纹理压缩?每像素位数 (bpp) 表示单个纹理像素所需的存储量。bpp 值越低的纹理在磁盘和内存中也越小。较低的 bpp 值也意味着 GPU 使用较少的内存带宽来读取纹理像素。GPU 内存带宽通常是帧率的瓶颈,因此纹理压缩有助于避免这一问题。既然要进行纹理压缩,JPG、PNG这类格式也拥有较高的压缩率,为什么不直接作为纹理呢?这是因为这类格式不支持。原创 2022-12-08 16:44:41 · 1176 阅读 · 0 评论 -
UGUI性能优化学习笔记(番外)一些零星的优化点
overdraw也就是过度绘制,是指在每个渲染周期内,屏幕上每个像素最理想只渲染一次,但是由于UI元素的重叠会导致像素会被渲染多次,每次渲染从CPU阶段到GPU阶段会消耗大量资源,如果这种情况比较严重,就会造成卡顿。在编译器窗口下,选择Overdraw模式,可以观察场景中UI的过度绘制情况。颜色越深说明绘制次数越多。降低Overdraw最有效的方法就是减少UI的重叠。对于多个元素构成的UI,尽量将元素整合进一张图中。对于下面这种中间透明的边框,其中间部分仍然会进行绘制。对于这种UI元素,可以采用九宫格原创 2022-12-03 16:52:39 · 1027 阅读 · 0 评论 -
UGUI性能优化学习笔记(二)合批
合批:把渲染时使用相同材质、相同贴图的网格合并在一起,成为一个大网格,然后再调用一次Draw Call,直接渲染这一个大网格。这样做可以降低Draw Call的数量,以优化性能。Unity是如何确定哪些网格可以进行合批的呢?下面我们通过一个具体的示例加深理解在上图中,白色Image位于所有UI元素的最底层,所以Depth = 0。接下来的文本位于白色Image的上层,所以Depth = 1。这里需要注意,UI元素进行深度判断是通过网格进行的,而不是通过rect。接下来对红色Image进行判断。原创 2022-12-02 17:22:11 · 2623 阅读 · 0 评论 -
UGUI性能优化学习笔记(一)网格重建
在UGUI中,Canvas负责将其下的子UI元素进行合批操作,也就是Batch。当子UI元素发生了变化时,Canvas就需要重新进行Batch操作。Batch操作具体到各个子元素上,就是执行它们各自的Rebuild操作,重新计算元素的布局和网格。Batch和Rebuild加起来构成了所谓的网格重建。原创 2022-11-29 17:21:38 · 1360 阅读 · 0 评论 -
UGUI学习笔记(一)Canvas
画布(Canvas)是容纳所有UI元素的区域。当我们创建UI元素时如果场景中没有Canvas,Unity会自动创建一个,并将UI元素作为Canvas的子项。原创 2022-08-31 20:02:04 · 628 阅读 · 0 评论 -
UGUI学习笔记(二)可视组件
UGUI学习笔记(二)可视组件原创 2022-09-01 17:35:53 · 963 阅读 · 0 评论 -
UGUI学习笔记(三)交互组件
UGUI学习笔记(三)交互组件原创 2022-09-02 21:30:45 · 557 阅读 · 0 评论 -
UGUI学习笔记(四)自动布局
UGUI学习笔记(四)自动布局原创 2022-09-03 17:47:15 · 671 阅读 · 0 评论 -
UGUI学习笔记(五)事件系统
事件系统就是根据输入(鼠标、键盘、触摸等)将消息发送给对象的系统。它的运作主要依靠「Event System」事件系统、「Input Module」输入模块、「Raycaster」射线发射器三个组件协同完成。原创 2022-09-05 17:38:52 · 482 阅读 · 0 评论 -
UGUI学习笔记(六)UI遮挡3D物体响应
当我们的UI与场景中的3D物体发生层叠时,可能会出现点击UI时,3D物体与UI同时响应的问题。例如给一个Cube和一个Image都挂载上“鼠标点击变色”的脚本此时运行游戏,点击Image。我们会发现Cube和Image的事件被同时触发了那么在点击UI时如何避免触发3D物体的事件呢?一种解决方案是让3D物体也通过实现事件系统接口来响应事件。首先需要给Camera挂载「Physics Raycaster」组件(否则3D物体无法接收到射线),然后修改Cube身上的脚本原创 2022-09-05 21:20:50 · 1028 阅读 · 2 评论 -
UGUI学习笔记(七)自己实现圆形图片组件
第一种实现方式是通过UGUI原生的「Mask」遮罩组件。实现起来非常简单,首先创建一个Image对象,并挂载「Mask」组件。然后将Image的Sprite设置为事先准备好的圆形图片然后再将这个Image对象设置为目标对象的父物体即可但是这种方式有个问题,Mask组件会增加额外的Draw Call调用(Shader中的概念),也就会增加额外的性能消耗。可以通过Game窗口中的Stats界面查看Draw Call调用情况。原创 2022-09-09 10:32:35 · 690 阅读 · 0 评论 -
UGUI学习笔记(八)UGUI不规则响应区域
在上一篇文章中我们了解到,UI的默认响应区域是UI元素所在的矩形框线内的区域。这也就意味着,当UI的图形为不规则形状时,点击图形的外部也可能会触发事件。但其实Unity自带了一种不规则区域点击策略。要想使用它,我们首先要将精灵的「Read/Write」属性设置为开启状态然后在代码中将「Image」组件中的「alphaHitTestMinimumThreshold」属性设置为0.1。原创 2022-09-09 12:10:04 · 1016 阅读 · 0 评论 -
UGUI学习笔记(九)自制3D轮播图
首先在Canvas下创建一个空物体,将其命名为「SlideShow」,并设置好其大小。它将作为轮播图的父容器。在「SlideShow」身上挂载一个脚本,命名为「SlideShow3D」。声明一个Vector2成员用来设定每张图片的大小,一个Sprite数组用来存储需要展示的图片新创建一个脚本命名为「SlideShowItem」,作为子物体身上挂载的脚本。原创 2022-09-10 18:31:16 · 922 阅读 · 0 评论 -
UGUI学习笔记(十)自制雷达图
首先导入一张雷达图的背景图,将其挂载到「Image」上添加到场景中,命名为「RadarBg」。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R10nIh9G-1662875993217)(https://lvwrpic-1259267089.cos.ap-shanghai.myqcloud.com/pictures/%E9%9B%B7%E8%BE%BE%E5%9B%BE.png)]在「RadarBg」下添加一个空的子物体,命名为「RadarChart」并挂载同名脚本。原创 2022-09-11 14:01:00 · 615 阅读 · 0 评论 -
UGUI学习笔记(十一)自制优化版滚动视图
为了让「Scroll View」组件实现内容框自适应大小,我们可以在「Content」上挂载「Vertical Layout Group」组件和「Content Size Fitter」组件。效果如下但这种实现方式有诸多问题。一方面,「Vertical Layout Group」这类排序组件可能会增加性能消耗;另一方面,「Content Size Fitter」必须靠子项才能撑开,当子项数量较多但又只需要展示少数几条时,会造成内存的浪费。因此我们需要自己实现一个优化版的滚动视图。原创 2022-09-12 16:38:46 · 408 阅读 · 0 评论 -
UGUI学习笔记(十二)自制血条控件
首先在场景中使用「Image」创建如下结构并命名为「LifeBar」。需要注意的是内部的「Image」都需要将锚点设置到最左侧,高度设置为自适应。在父元素上挂载同名脚本,将「LifeBar」制作为预制体。之所以创建了「OuterBar」和「InnerBar」两个血条,是为了做出多层血条的效果。然后在场景中随便创建一个敌人(需要有「MeshRenderer」),然后挂载一个控制脚本。我这里的脚本命名为「KeLiController」原创 2022-09-13 15:00:53 · 1551 阅读 · 0 评论