「开源 UILoader TS 版本」使用 UILoader 的制作规范和指导方法

UILoader JS 和 TS 已经开源。...



内存管理对于项目开发过程非常重要，目前开发过程中两种最常用内存管理方法分别是「垃圾回收」和「引用计数」。社区水友虣虣通过引用计数方式开源了 UILoader TS 和 JS 版本。

上周五我刚在公众号推「开源UILoader JS版本」如何优雅的加载和释放资源，很多同学后台留言呼吁需要 TS 版本。别着急，我会使出浑身解数满足大家的！今天发放的福利就是开源 UILoader TS 版本，文末 GitHub 自取。

合理分配图集

合理的分配图集可以降低 drawcall 和资源加载速度。

具体细节如下： 

同一个 UI 界面的图片尽可能放到一个图集中，尽可能降低 drawcall；

共用的图片放到一个或几个共享图集中，例如通用的弹框和按钮等；相同功能的图片放到一个图集中。 

不同格式的图片分别放到不同的图集中，例如透明(带 Alpha)和不透明（不带 Alpha)的图片，这样可以减少图片的存储空间和占用内存。

避免通过场景来加载资源

如果通过场景加载资源会更方便，但加载这个场景所需要的时间就会增加。给用户的体验效果就很差。例如市场上开源的达达麻将、麒麟麻将都是通过界面来加载界面的，这个方式会造成场景加载速度慢。资源模块化管理

资源管理模块化，这样处理加载和管理资源非常便利。 例如：一个图集中有一张和多张正在使用的资源，而有一部分没有使用的资源，那么肯定不能释放这个资源，因为容易引起纹理丢失。

适当的降低图片尺寸

有时 UI 系统的背景可能会使用全屏大小的图片，比如在 Iphone 上使用 1136*640 大小的图片，使用这样尺寸的图片代价是很昂贵的，可以和美术同学商量适当的降低图片的精度，使用低尺寸图片。 例如：游戏里面的座子可以采用一半的资源。

在 Android 设备上使用 etc 格式的图片

目前，几乎所有 Android 设备都支持 etc1 格式的图片。etc1 的好处是第一个像素点只占用 0.5 个字节，而普通 rgba32 的图片每个像素点占 4 个字节。也就说一张 1024*1024 图片如果使用 rgba32 格式所占用的内存为 4M 而 etc1 格式所占用的内存仅为 0.5M。但是使用 etc1 格式的图片有两个限制——长和宽必须是 POT 的（2 的 N 次方）并且不支持 Alpha 通道，因此使用 etc1 时需额外的一张图来存储 Alpha 通道，并且使用特殊的 shader 来对 Alpha 采样。

删除不必要的 UI 节点、动画组件及资源

随着项目的迭代，可能有部分 UI 节点及动画已经失效。对于失效的节点及动画一定要删除！在很多项目中，有部分同学为了方便省事，只是将失效的节点及动画 disable 了。这样做虽然在运行时不会对 CPU 造成太多负担，但是在加载时会增加不必要的时间以及内存占用。

非 prefab 文件应放到 resource 目录外

resources 目录中应该只保存 prefab 文件和动态使用的纹理等，其它非 prefab 文件（例如不需要动态使用的动画、纹理、粒子等）应放到 resource 目录之外

这样打出来的包有几个文件( setting.jsc, project.jsc, jsb_polyfill.jsc )比较小一些。那么第一个场景启动就会快一些，对资源的处理个人觉得应该模块化。

结语

欢迎大家积极讨论 Cocos Creator 资源加载的正确姿势。关于 UILoader 的 TS 版本和 JS 版本已经提交 Cocos Store 审核，上线后就能直接从插件商店一键下载。当前需要的同学请先自行从 Github 下载。

UILoader JS 版本开源地址：
github.com/1083921307/UILoader

UILoader TS 版本开源地址：
github.com/1083921307/UILoader/tree/ts

    关注 COCOS