开源 UILoader TS版本 以及 使用 UILoader UI 制作规范和指导方法

UILoader 的 TS 版本和JS 版本已经提审到插件商城。审核通过就可以在插件商城下载

第一篇的地址:
http://forum.cocos.com/t/cocoscreator-uiloader-0-0-1/54894

第二篇的地址:
http://forum.cocos.com/t/cocoscreator-uiloader/54914

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

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

博客地址:
http://www.wazhlh.com/

使用 UILoader UI 制作规范和指导方法

1. 合理的分配图集

合理的分配图集可以降低drawcall和资源加载速度;具体细节如下:
同一个UI界面的图片尽可能放到一个图集中,这样可以尽可能的降低drawcall。
共用的图片放到一个或几共享的图集中,例如通用的弹框和按钮等;相同功能的图片放到一个图集中。
不同格式的图片分别放到不同的图集中,例如透明(带Alpha)和不透明(不带Alpha)的图片,这样可以减少图片的存储空间和占用内存。

2. 避免通过场景来加载资源。

这个很简单如果通过场景加载资源,可能你会方便,但是加载这个场景所需要的时间就会增加。给用户的体验效果就很差。例如市场上开源的 达达麻将,麒麟麻将都是通过界面来加载界面的,这个方式会造成场景加载速度慢。

3. 功能UI资源不要与其他功能UI资源混用,尽量做到资源模块化管理。

资源管理模块化。这样处理加载和管理资源非常便利。 例如:一个图集中有一张和多张正在使用的资源,而有一部分没有使用的资源。那么肯定不能释放这个资源。如果释放那么纹理就会丢失。

4. 适当的降低图片的尺寸

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

5. 在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采样。

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

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

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

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

结语

欢迎大家积极讨论资源Creator资源加载的正确姿势,本人遇到的情景毕竟也是有限的,

14赞

赞 

手动赞

说实话 没看懂~~感觉好像是手动做了资源的引用计数,但是资源引用这块作者推荐是不通过节点关联,而是手动加载,那么这么多节点,在首次加载的时候怎么处理呢?一个个手动添加节点组件的引用么?还是代买会自动添加?

UILoader.retainScene(scene); 可以处理你说的首次加载的情况。目前主流的 垃圾回收 和 引用计数 两种常用内存管理。本文采用的是引用计数。

谢谢解答哈,我试试去。

手动赞

看不懂 也点赞

问一下这个UILoader可以每个场景都挂载吗?

很有用的工具

2.0已经失效 希望作者更新

666,学习下

楼主,ts的链接失效了,能重新发一个嘛?

问个问题,为什么 cc.SpriteAtlas 没有做引用计数?

已占位

传送门

mark,规范总结得很好。

第2点,避免通过场景来加载资源。这个是可以通过勾选场景异步加载资源来优化的吧

点赞,支持支持支持

mark一下.

1赞