Cocos Creator3.8 项目实战(九)2D UI DrawCall优化详解(下)

简介: Cocos Creator3.8 项目实战(九)2D UI DrawCall优化详解(下)

上一篇文章中,我们详细介绍了: 什么是Draw call ? Draw Call 中造成性能问题的原因是什么?以及在 Cocos Creator 项目中如何减少DrawCall ?感兴趣的朋友可以前往阅读:Cocos Creator3.8 项目实战(八)2D UI DrawCall优化详解(上)


今天主要介绍一下,DrawCall 优化案例,以及实践过程中对DrawCall优化的经验总结,希望帮助到有需要的朋友,进一步加深对DrawCall 优化的理解。


一、DrawCall优化案例


假如这里需要做一个弹窗, 由 10 张碎图和 1 个文本所组成:

  1. 不做任何优化且未开启动态合图的情况下,渲染这个弹窗需要 11 个 DrawCall
  2. 将所有碎图打成一个图集,文本节点夹在精灵节点之间的情况下,需要 3 个 DrawCall。在顶部最外层或者底部最外层的情况下,需要 2 个 DrawCall。
  3. 文本使用 BMFont,将所有碎图和 BMFont 打成一个图集的话只需要 1 个 DrawCall,如果碎图不和 BMFont 打成一个图集的情况,则参考第 2 项。
  4. 碎图不打包图集,开启动态合图,在理想情况下,文本使用 BMFont 最少只需要 1 个 DrawCall,不使用 BMFont 的情况同样参考第 2 项。


二、关于DrawCall优化的建议


1、静态合图方式选择建议


对于自动资源合图和手动资源合图的方式选择上, 可根据实际 Draw Call需要优化的程度来进行合理选择。

  • 如果为了简单方便,可优先使用自动图集资源的方式。
  • 如果对Draw Call性能优化要求较高,可选择手动图集资源的方式。

但是无论选择哪种方式,请别忘了,遵循 尽量将处于同一界面(UI)下的相邻且渲染状态相同的碎图的原则。


2、动态合图使用建议


  • 尽量防止不同图集的UI元素互相的打乱
  • 尽量防止Label的打断
  • 组织UI组件尽可能的是下面的方式
    Label1 Label2 Label3 Label4 Label5
    Sprite1 Sprite2 Sprite3 Sprite4 Sprite5
    组织UI图集资源尽可能的是下面的方式:
    A1 A2 A3 A4 A5
    B1 B2 B3 B4 B5
    不同的图集在一起
    不要这样组织UI组件图集资源:
    A1B1 A2 B2 A3 B3 …


3、关于自动图集的几点建议


  • 合理控制图集最大尺寸,避免单个图像加载时间过长
  • 尺寸太大的图像没有必要打进图集(如背景图)
  • 善用九宫格(Sliced)可以节省很多空间
  • 间距保持默认的 2 并保持勾选扩边选项,避免图像裁剪错误和出现黑边的情况
  • 勾选不包含未被引用资源选项,自动排除没有用到的图像以节省空间(该选项预览时无效)
  • 开发时预览图集,根据结果进行调整,以达到最好的优化效果
  • 不建议任何图像资源的尺寸超过 2048 * 2048,否则在小游戏和原生平台可能会出现问题
    而且图像尺寸越大,加载的时间也越长,而且是非线性的那种增长,例如加载一张图像比加载两张图像所消耗的时间还长,得不偿失。


相关文章
|
3月前
|
存储 分布式计算 供应链
Spark在供应链核算中应用问题之通过Spark UI进行任务优化如何解决
Spark在供应链核算中应用问题之通过Spark UI进行任务优化如何解决
|
3月前
|
小程序 UED 开发者
揭秘支付宝小程序成功之道:UI/UX设计原则与用户体验优化秘籍大公开!
【8月更文挑战第27天】支付宝小程序在移动互联网中扮演着重要角色,优秀的UI/UX设计能显著提升用户满意度。本文首先强调了设计的一致性、简洁性、易用性和响应性原则,确保用户获得顺畅体验。接着,介绍了最佳实践,包括利用支付宝设计组件库保持界面统一、优化加载速度、适应多设备显示、设置清晰导航以及重视用户反馈。最后,提供了一个简单示例展示如何应用支付宝设计组件。遵循这些指导原则,开发者能够构建既美观又实用的小程序。
78 0
|
6月前
|
XML 开发工具 Android开发
构建高效的安卓应用:使用Jetpack Compose优化UI开发
【4月更文挑战第7天】 随着Android开发不断进化,开发者面临着提高应用性能与简化UI构建流程的双重挑战。本文将探讨如何使用Jetpack Compose这一现代UI工具包来优化安卓应用的开发流程,并提升用户界面的流畅性与一致性。通过介绍Jetpack Compose的核心概念、与传统方法的区别以及实际集成步骤,我们旨在提供一种高效且可靠的解决方案,以帮助开发者构建响应迅速且用户体验优良的安卓应用。
|
前端开发 数据库
前端项目实战伍拾壹​react-admin+material ui-踩坑-创建数据库完数据库表需要重启
前端项目实战伍拾壹​react-admin+material ui-踩坑-创建数据库完数据库表需要重启
83 0
|
6月前
|
物联网 Android开发
Android Ble蓝牙App(四)UI优化和描述符
Android Ble蓝牙App(四)UI优化和描述符
152 0
|
缓存 中间件 atlas
Cocos Creator3.8 项目实战(八)2D UI DrawCall优化详解(上)
Cocos Creator3.8 项目实战(八)2D UI DrawCall优化详解(上)
434 0
vue.config.js的优化配置(element-ui, echarts, lodash按需加载 )(二)
vue.config.js的优化配置(element-ui, echarts, lodash按需加载 )(二)
|
前端开发 JavaScript
vue.config.js的优化配置(element-ui, echarts, lodash按需加载 )(一)
vue.config.js的优化配置(element-ui, echarts, lodash按需加载 )(一)
|
前端开发
前端项目实战壹佰零肆react-admin+material ui-踩坑-List的用法之queryOptions
前端项目实战壹佰零肆react-admin+material ui-踩坑-List的用法之queryOptions
72 0
|
前端开发
前端项目实战壹佰零捌react-admin+material ui-踩坑-react-admin之sort
前端项目实战壹佰零捌react-admin+material ui-踩坑-react-admin之sort
81 0