diff --git a/docs/images/QQ截图20230205173234.png b/docs/images/QQ截图20230205173234.png new file mode 100644 index 0000000..98cebe7 Binary files /dev/null and b/docs/images/QQ截图20230205173234.png differ diff --git a/docs/images/QQ截图20230205173334.png b/docs/images/QQ截图20230205173334.png new file mode 100644 index 0000000..e8da050 Binary files /dev/null and b/docs/images/QQ截图20230205173334.png differ diff --git a/docs/images/QQ截图20230205190757.png b/docs/images/QQ截图20230205190757.png new file mode 100644 index 0000000..aed09a6 Binary files /dev/null and b/docs/images/QQ截图20230205190757.png differ diff --git a/docs/images/Screenshot_20230205_172320.jpg b/docs/images/Screenshot_20230205_172320.jpg new file mode 100644 index 0000000..7048391 Binary files /dev/null and b/docs/images/Screenshot_20230205_172320.jpg differ diff --git a/docs/images/Screenshot_20230205_172414.jpg b/docs/images/Screenshot_20230205_172414.jpg new file mode 100644 index 0000000..4c2c221 Binary files /dev/null and b/docs/images/Screenshot_20230205_172414.jpg differ diff --git a/readme.md b/readme.md index e69de29..3bcb6e4 100644 --- a/readme.md +++ b/readme.md @@ -0,0 +1,50 @@ +# 前言 +相信大部分人都做过UI渲染优化，其重点也就是合批。但是在当前cocos使用节点树深度遍历的方式中，想要把相同类型的组件放在一起，势必会修改节点树，很可能破坏掉优雅合理的节点组织结构；还有可能因为节点树的改动，需要添加一些冗余糟糕的代码。 +最近刚好有时间，逛论坛的时候看到有同学提这类问题，各位大哥也给出了解决方案，就是在渲染的时候给节点重新排序。于是心血来潮去看了下3.6.3的源码，好像要实现其实挺简单的。 +# 原理 +为需要排序的UI渲染器设置排序优先级； 在UI渲染遍历节点树阶段，不立即执行各种UI渲染器，而是把UI渲染器缓存起来；在UI渲染遍历完节点树后，对UI渲染器缓存通过排序优先级进行排序后执行。然而，遮罩会打断这一过程，所以如果项目中大量使用了遮罩，优化效果可能会不太明显。 +# 效果对比 +在ScrollView下生成200个项目测试对比。 +测试平台：web-mobile +测试设备：HUAWEI P30 Pro +项目预制体结构：![QQ截图20230205190757|225x258](./docs/images/QQ截图20230205190757.png) + +* 未使用UI渲染优化：![Screenshot_20230205_172414|230x500](./docs/images/Screenshot_20230205_172414.jpg) +* 使用UI渲染优化：![Screenshot_20230205_172320|230x500](./docs/images/Screenshot_20230205_172320.jpg) + +项目越多，差距越明显。 + +# 使用方式 (当前不支持原生平台) +看到标题的时候，相信使用过Unity的同学就差不多知道使用方式了。API设计其实就是照搬的Unity的SortingGroup。使用步骤如下； +1. 导入扩展包到项目assets目录内，扩展包其实就是包含了几个ts文件的文件夹(下面会上传示例工程，直接可以在工程里面获得) +2. 定义排序层枚举，扩展包目录如下 ![QQ截图20230205173234|277x153](./docs/images/QQ截图20230205173234.png) ，打开sorting-define.ts文件，添加或修改SortingLayer枚举 +``` +/** + * 排序层级 + */ +export enum SortingLayer { + + //-- 自定义，在此之上，小于 DEFAULT 的层级 + + /** + * 默认层级，在没有应用排序的UI渲染上的默认层级 + */ + DEFAULT = 0, + + //-- 自定义，在此之下，大于 DEFAULT 的层级 + + // 测试定义，可以直接移除 + TEST_LIST_ITEM = 1, +} + +/** + * 在层级中最大排序值 + */ +export const ORDER_IN_LAYER_MAX = 100000; +``` +3. 在需要排序的UI渲染器上(Sprite或者Label等)，添加SortingGroup组件，并设置排序层和排序值 ![QQ截图20230205173334|524x176](./docs/images/QQ截图20230205173334.png) +和Unity不同的是`Order In Layer`不必是整数，这里可以使用小数。 + +# 注意 +1. 该扩展包对引擎进行过小改，如果想移除这个功能，在删除扩展包目录后需要重启编辑器。 +2. 该扩展包应该很长一段时间不会支持原生平台。 看源码的时候感觉3.6的UI渲染系统是临时的，可能官方什么时候是要重构，而且原生平台修改麻烦。