博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
慎用Outline ,UGUI Outline实现原理分析
阅读量:6480 次
发布时间:2019-06-23

本文共 3019 字,大约阅读时间需要 10 分钟。

使用 UGUI 制作背包的时候。同事发现假设背包中加入了大量的物品。比方两百个。Unity就会出错,提示 Canvas element contains more than 65535 vertices. This is not supported 。意思就是 Canvas以下的顶点数过多。

转自http://blog.csdn.net/huutu http://www.thisisgame.com.cn

例如以下图:

可是一个物品 的GameObject 难道有300个顶点不成?

不看不知道一看吓一跳,一个物品 竟然有 500个Verts。

在对 物品的 GameObject 以下的子 物体 一个一个 禁用然后查看顶点后发现,当把Text 禁用之后,Verts 会锐减几百个。

转自http://blog.csdn.net/huutu http://www.thisisgame.com.cn

没有禁用 Text 时的顶点数

禁用 Text 的顶点数

于是。继续,在Text 上发现挂了 Outline 组件,把Outline 禁用之后,发现Verts 锐减。才确定是 Outline的原因。

转自http://blog.csdn.net/huutu http://www.thisisgame.com.cn

禁用Outline 之前

禁用Outline 之后

Ok,就是 Outline的原因。

转自http://blog.csdn.net/huutu http://www.thisisgame.com.cn

那为什么Outline 会添加这么多顶点数呢?

查看UGUI的 Outline的源码,例如以下:

using System.Collections.Generic;namespace UnityEngine.UI{    [AddComponentMenu("UI/Effects/Outline", 15)]    public class Outline : Shadow    {        protected Outline()        {}        public override void ModifyVertices(List
verts) { if (!IsActive()) return; var start = 0; var end = verts.Count; ApplyShadow(verts, effectColor, start, verts.Count, effectDistance.x, effectDistance.y); start = end; end = verts.Count; ApplyShadow(verts, effectColor, start, verts.Count, effectDistance.x, -effectDistance.y); start = end; end = verts.Count; ApplyShadow(verts, effectColor, start, verts.Count, -effectDistance.x, effectDistance.y); start = end; end = verts.Count; ApplyShadow(verts, effectColor, start, verts.Count, -effectDistance.x, -effectDistance.y); } }}
代码中的意思是 运行 ApplyShadow 4次。并且传过去的參数各自是 (x,y) (x,-y) (-x,y) (-x,-y) 。

看到这四个值,好像感觉到了什么。

来看看 这个函数做了什么。

protected void ApplyShadow(List
verts, Color32 color, int start, int end, float x, float y) { UIVertex vt; var neededCpacity = verts.Count * 2; if (verts.Capacity < neededCpacity) verts.Capacity = neededCpacity; for (int i = start; i < end; ++i) { vt = verts[i]; verts.Add(vt); Vector3 v = vt.position; v.x += x; v.y += y; vt.position = v; var newColor = color; if (m_UseGraphicAlpha) newColor.a = (byte)((newColor.a * verts[i].color.a) / 255); vt.color = newColor; verts[i] = vt; } }

简单的就是说:

1、把原来的顶点 Copy出来一份。而且依据编辑器中设置的偏移量 来设置 Copy 出来的顶点的位置

2、依据编辑器中设置的 Shadow 颜色设置定点色

转自http://blog.csdn.net/huutu http://www.thisisgame.com.cn

运行了4次,每一次都Copy了一份顶点。

。这难道是 复制了4份 Text ?这和我们自己再另外加入 4个Text性质差点儿相同吧。。

想到一个非常好验证的方法。把偏移量设置的非常大,我们来看看。

我们知道 1个字 = 1张图片 = 2个三角形 =4 个顶点。

本来用 Text 。定点数量就会比較多,而 Outline 却在这个 值上 乘以 5 。

所以

慎用 Outline

转自http://blog.csdn.net/huutu http://www.thisisgame.com.cn

project下载:

http://pan.baidu.com/s/1c02KTfq
http://download.csdn.net/detail/cp790621656/8779193

你可能感兴趣的文章
基于react的滑动图片验证码组件
查看>>
java单例模式深度解析
查看>>
【学习笔记】阿里云Centos7.4下配置Nginx
查看>>
VuePress手把手一小時快速踩坑
查看>>
学习constructor和instanceof的区别
查看>>
Vijos P1881 闪烁的星星
查看>>
ABP理论学习之领域服务
查看>>
Qt 控制watchdog app hacking
查看>>
让所有IE支持HTML5的解决方案
查看>>
RDD之五:Key-Value型Transformation算子
查看>>
percona 5.7.11root初始密码设置
查看>>
Cognitive Security的异常检测技术
查看>>
Impress.js上手 - 抛开PPT、制作Web 3D幻灯片放映
查看>>
生活杂事--度过十一中秋
查看>>
Pyrex也许是一个好东西
查看>>
WINFORM WPF字体颜色相互转换
查看>>
能力不是仅靠原始积累(三)
查看>>
实战:使用终端服务网关访问终端服务
查看>>
彻底学会使用epoll(一)——ET模式实现分析
查看>>
【Android 基础】Android中全屏或者取消标题栏
查看>>