同步操作将从 Nomat/lcc-ui-sorting-group-demo 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
相信大部分人都做过UI渲染优化,其重点也就是合批。但是在当前cocos使用节点树深度遍历的方式中,想要把相同类型的组件放在一起,势必会修改节点树,很可能破坏掉优雅合理的节点组织结构;还有可能因为节点树的改动,需要添加一些冗余糟糕的代码。 最近刚好有时间,逛论坛的时候看到有同学提这类问题,各位大哥也给出了解决方案,就是在渲染的时候给节点重新排序。于是心血来潮去看了下3.6.3的源码,好像要实现其实挺简单的。
为需要排序的UI渲染器(Sprite或者Label等)设置排序优先级; 在UI渲染遍历节点树阶段,不立即执行各种UI渲染器,而是把UI渲染器缓存起来;在UI渲染遍历完节点树后,对UI渲染器缓存通过排序优先级进行排序后执行。然而,遮罩会打断这一过程,所以如果项目中大量使用了遮罩,优化效果可能会不太明显。
在ScrollView下生成200个项目测试对比。
测试设备:HUAWEI P30 Pro
项目预制体结构:
项目越多,差距越明显。
看到标题的时候,相信使用过Unity的同学就差不多知道使用方式了。API设计其实就是照搬的Unity的SortingGroup。使用步骤如下;
导入扩展包lcc-ui-sorting-group
到项目assets目录内
如果是原生项目,需要进行以下步骤;
lcc-ui-sorting-group-native
的readme.txt
文件,以确保匹配creator版本native
目录native/engine
目录下lcc-ui-sorting-group-native/backup/CMakeLists.txt
文件到引擎Native目录替换。主要是引擎的CMakeLists.txt
文件没有提供自定义接口。扩展包的CMakeLists.txt
只是添加了部分自定义接口,在删除此插件的时候可以选择保留,不会有其他影响。native/engine/common/CMakeLists.txt
文件,在代码include(${COCOS_X_PATH}/CMakeLists.txt)
上面添加插件配置,具体如下;...
# 插件配置 引入lcc-ui-sorting-group native部分
include(${CMAKE_CURRENT_LIST_DIR}/../lcc-ui-sorting-group-native/CMakeLists.txt)
include(${COCOS_X_PATH}/CMakeLists.txt) #在这一行上面插入插件配置
...
lcc-ui-sorting-group-native
的readme.txt
文件,以确保匹配creator版本build/jsb-default
目录lcc-ui-sorting-group-native/cocos2d-x
下的所有文件到build/jsb-default/frameworks/cocos2d-x
目录以覆盖引擎原始文件定义排序层枚举,扩展包目录如下 ,打开sorting-define.ts文件,添加或修改SortingLayer枚举
/**
* 排序层级
*/
export enum SortingLayer {
//-- 自定义,在此之上,小于 DEFAULT 的层级
/**
* 默认层级,在没有应用排序的UI渲染上的默认层级
*/
DEFAULT = 0,
//-- 自定义,在此之下,大于 DEFAULT 的层级
// 测试定义,可以直接移除
TEST_LIST_ITEM = 1,
}
/**
* 在层级中最大排序值
*/
export const ORDER_IN_LAYER_MAX = 100000;
在需要排序的UI节点上,添加SortingGroup
组件,并设置排序层和排序值,其配置会应用于当前节点和子孙节点上的UI渲染器;
UI渲染器的优先级以当前节点或者最近的祖先节点上的SortingGroup
组件配置为准,如果没有则默认为0
。
并且优化操作只针对排序节点和其子节点,其他节点仍然使用节点树遍历。
和Unity不同的是Order In Layer
不必是整数,这里可以使用小数。
不同Sorting Layer
的情况下,Sorting Layer
枚举越小越先渲染;相同Sorting Layer
的情况下,Order In Layer
的值越小越先渲染。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。