devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Cocos Creator 通用框架设计——资源管理

作者：IT小白 | 2024-02-27 11:24:44

赞

踩

搭建cocoscreator游戏框架结构

Cocos

f18f7a442a110ef139df007660774109.png

编者按

本文来自 Cocos 中文社区，作者宝爷。

资/源/管/理

如果你想使用 Cocos Creator 制作一些规模稍大的游戏，那么资源管理是必须解决的问题。

随着游戏的进行，你可能会发现游戏的内存占用只升不降，哪怕你当前只用到了极少的资源，并且有使用 cc.loader.release 来释放之前加载的资源。

但之前使用过的大部分资源都会留在内存中！

为什么会这样呢？

 Cocos Creator 资源管理存在的问题

资源管理主要解决 3 个问题，资源加载，资源查找（使用），资源释放。

这里要讨论的主要是资源释放的问题，这个问题看上去非常简单，在 Cocos2d-x 中确实也很简单，但在 js 中变得复杂了起来，因为难以跟踪一个资源是否可以被释放。

在 Cocos2d-x 中我们使用引用计数，在引用计数为 0 的时候释放资源，维护好引用计数即可，而且在 Cocos2d-x 中我们对资源的管理是比较分散的，引擎层面只提供如 TextureCache 、 AudioManager 之类的单例来管理某种特定的资源，大多数的资源都需要我们自己去管理。

而在 Cocos Creator 中，我们的资源统一由 cc.loader 来管理，大量使用 prefab ， prefab 与各种资源复杂的引用关系增加了资源管理的难度。

01

资源依赖

资源 A 可能依赖资源 B 、 C 、 D ，而资源 D 又依赖资源 E ，这是非常常见的一种资源依赖情况。

如果我们使用  cc.loader.loadRes("A")  加载资源 A ， B ～ E 都会被加载进来，但如果我们调用  cc.loader.release("A")  则只有资源 A 被释放。

60a142c480b1eecbcf0fcc033c46e6ac.png

每一个加载的资源都会放到 cc.loader的_cache 中，但 cc.loader.release 只是将传入的资源进行释放，而没有考虑资源依赖的情况。

如果我们希望将依赖的资源也一起释放， Cocos Creator 提供了一个方法， cc.loader.getDependsRecursively;  ，递归获取指定资源依赖的所有资源，放入一个数组并返回，然后在 cc.loader.release 中传入该数组， cc.loader  会遍历它们，将其逐个释放。

这种方式虽然可以将资源释放，但却有可能释放了不应该释放的资源。

如果有一个资源 F 依赖 D ，这时候就会导致 F 资源无法正常工作。由于 Cocos Creator 引擎没有维护好资源的依赖，导致我们在释放 D 的时候并不知道还有 F 依赖我们。

即使没有 F 依赖，我们也不确定是否可以释放 D ，比如我们调用 cc.loader 加载 D ，而后又加载了 A ，此时 D 已经加载完成， A 可以直接使用。

但如果释放 A 的时候，将 D 也释放了，这就不符合我们的预期。

我们期望的是在我们没有显式地释放 D 时， D 不应该随着其它资源的释放而自动释放。

可以简单地进行测试：

打开 Chrome 的开发者模式，在 Console 面板中进行输入，如果是旧版本的 Cocos Creator ，可以在 cc.textureCache 中 dump 所有的纹理。

而新版本移除了 textureCache ，但我们可以输入 cc.loader.cache 来查看所有的资源。

如果资源太多，只关心数量，可以输入 Object.keys(cc.loader.cache).length 来查看资源总数。我们可以在资源加载前 dump 一次，加载后 dump 一次，释放后再 dump 一次，来对比 cc.loader 中的缓存状态。

当然，也可以写一些便捷的方法，如只 dump 图片，或者 dump 与上次 的差异项。

ea77b3b78c22c963d8521fd423426882.jpeg

02

资源使用

除了资源依赖的问题，我们还需要解决资源使用的问题。前者是 cc.loader 内部的资源组织问题，后者是应用层逻辑的资源使用问题。

比如我们需要在一个界面关闭的时候释放某资源，同样会面临一个该不该释放的问题，比如另外一个未关闭的界面是否使用了该资源？

如果有其他地方用到了该资源，那么就不应该释放它！

03

ResLoader

在这里我设计了一个 ResLoader ，来解决 cc.loader 没有解决好的问题。

关键是为每一个资源创建一个 CacheInfo 来记录资源的依赖和使用等信息，以此来判断资源是否可以释放。

使用 ResLoader.getInstance().loadRes() 来替代 cc.loader.loadRes()，ResLoader.getInstance().releaseRes() 来替代 cc.loader.releaseRes() 。对于依赖，在资源加载的时候 ResLoader 会自动建立起映射，释放资源的时候会自动取消映射，并检测取消映射后的资源是否可以释放，是才走释放的逻辑。

对于使用，提供了一个 use 参数，通过该参数来区别是哪里使用了该资源，以及是否有其他地方使用了该资源。

当一个资源即没有被其他资源依赖，也没有被其它逻辑使用，那么这个资源就可以被释放。

  1. /**
  2.  * 资源加载类
  3.  * 1. 加载完成后自动记录引用关系，根据DependKeys记录反向依赖
  4.  * 2. 支持资源使用，如某打开的UI使用了A资源，其他地方释放资源B，资源B引用了资源A，如果没有其他引用资源A的资源，会触发资源A的释放，
  5.  * 3. 能够安全释放依赖资源（一个资源同时被多个资源引用，只有当其他资源都释放时，该资源才会被释放）
  6.  * 
  7.  * 2018-7-17 by 宝爷
  8.  */
  9.  
  10.  
  11. // 资源加载的处理回调
  12. export type ProcessCallback = (completedCount: number, totalCount: number, item: any) => void;
  13. // 资源加载的完成回调
  14. export type CompletedCallback = (error: Error, resource: any) => void;
  15.  
  16.  
  17. // 引用和使用的结构体
  18. interface CacheInfo {
  19.     refs: Set<string>,
  20.     uses: Set<string>
  21. }
  22.  
  23.  
  24. // LoadRes方法的参数结构
  25. interface LoadResArgs {
  26.     url: string,
  27.     type?: typeof cc.Asset,
  28.     onCompleted?: CompletedCallback,
  29.     onProgess?: ProcessCallback,
  30.     use?: string,
  31. }
  32.  
  33.  
  34. // ReleaseRes方法的参数结构
  35. interface ReleaseResArgs {
  36.     url: string,
  37.     type?: typeof cc.Asset,
  38.     use?: string,
  39. }
  40.  
  41.  
  42. // 兼容性处理
  43. let isChildClassOf = cc.js["isChildClassOf"]
  44. if (!isChildClassOf) {
  45.     isChildClassOf = cc["isChildClassOf"];
  46. }
  47.  
  48.  
  49. export default class ResLoader {
  50.  
  51.  
  52.     private _resMap: Map<string, CacheInfo> = new Map<string, CacheInfo>();
  53.     private static _resLoader: ResLoader = null;
  54.     public static getInstance(): ResLoader {
  55.         if (!this._resLoader) {
  56.             this._resLoader = new ResLoader();
  57.         }
  58.         return this._resLoader;
  59.     }
  60.  
  61.  
  62.     public static destroy(): void {
  63.         if (this._resLoader) {
  64.             this._resLoader = null;
  65.         }
  66.     }
  67.  
  68.  
  69.     private constructor() {
  70.  
  71.  
  72.     }
  73.  
  74.  
  75.     /**
  76.      * 从cc.loader中获取一个资源的item
  77.      * @param url 查询的url
  78.      * @param type 查询的资源类型
  79.      */
  80.     private _getResItem(url: string, type: typeof cc.Asset): any {
  81.         let ccloader: any = cc.loader;
  82.         let item = ccloader._cache[url];
  83.         if (!item) {
  84.             let uuid = ccloader._getResUuid(url, type, false);
  85.             if (uuid) {
  86.                 let ref = ccloader._getReferenceKey(uuid);
  87.                 item = ccloader._cache[ref];
  88.             }
  89.         }
  90.         return item;
  91.     }
  92.  
  93.  
  94.     /**
  95.      * loadRes方法的参数预处理
  96.      */
  97.     private _makeLoadResArgs(): LoadResArgs {
  98.         if (arguments.length < 1 || typeof arguments[0] != "string") {
  99.             console.error(`_makeLoadResArgs error ${arguments}`);
  100.             return null;
  101.         }
  102.         let ret: LoadResArgs = { url: arguments[0] };
  103.         for (let i = 1; i < arguments.length; ++i) {
  104.             if (i == 1 && isChildClassOf(arguments[i], cc.RawAsset)) {
  105.                 // 判断是不是第一个参数type
  106.                 ret.type = arguments[i];
  107.             } else if (i == arguments.length - 1 && typeof arguments[i] == "string") {
  108.                 // 判断是不是最后一个参数use
  109.                 ret.use = arguments[i];
  110.             } else if (typeof arguments[i] == "function") {
  111.                 // 其他情况为函数
  112.                 if (arguments.length > i + 1 && typeof arguments[i + 1] == "function") {
  113.                     ret.onProgess = arguments[i];
  114.                 } else {
  115.                     ret.onCompleted = arguments[i];
  116.                 }
  117.             }
  118.         }
  119.         return ret;
  120.     }
  121.  
  122.  
  123.     /**
  124.      * releaseRes方法的参数预处理
  125.      */
  126.     private _makeReleaseResArgs(): ReleaseResArgs {
  127.         if (arguments.length < 1 || typeof arguments[0] != "string") {
  128.             console.error(`_makeReleaseResArgs error ${arguments}`);
  129.             return null;
  130.         }
  131.         let ret: ReleaseResArgs = { url: arguments[0] };
  132.         for (let i = 1; i < arguments.length; ++i) {
  133.             if (typeof arguments[i] == "string") {
  134.                 ret.use = arguments[i];
  135.             } else {
  136.                 ret.type = arguments[i];
  137.             }
  138.         }
  139.         return ret;
  140.     }
  141.  
  142.  
  143.     /**
  144.      * 生成一个资源使用Key
  145.      * @param where 在哪里使用，如Scene、UI、Pool
  146.      * @param who 使用者，如Login、UIHelp...
  147.      * @param why 使用原因，自定义...
  148.      */
  149.     public static makeUseKey(where: string, who: string = "none", why: string = ""): string {
  150.         return `use_${where}_by_${who}_for_${why}`;
  151.     }
  152.  
  153.  
  154.     /**
  155.      * 获取资源缓存信息
  156.      * @param key 要获取的资源url
  157.      */
  158.     public getCacheInfo(key: string): CacheInfo {
  159.         if (!this._resMap.has(key)) {
  160.             this._resMap.set(key, {
  161.                 refs: new Set<string>(),
  162.                 uses: new Set<string>()
  163.             });
  164.         }
  165.         return this._resMap.get(key);
  166.     }
  167.  
  168.  
  169.     /**
  170.      * 开始加载资源
  171.      * @param url           资源url
  172.      * @param type          资源类型，默认为null
  173.      * @param onProgess     加载进度回调
  174.      * @param onCompleted   加载完成回调
  175.      * @param use           资源使用key，根据makeUseKey方法生成
  176.      */
  177.     public loadRes(url: string, use?: string);
  178.     public loadRes(url: string, onCompleted: CompletedCallback, use?: string);
  179.     public loadRes(url: string, onProgess: ProcessCallback, onCompleted: CompletedCallback, use?: string);
  180.     public loadRes(url: string, type: typeof cc.Asset, use?: string);
  181.     public loadRes(url: string, type: typeof cc.Asset, onCompleted: CompletedCallback, use?: string);
  182.     public loadRes(url: string, type: typeof cc.Asset, onProgess: ProcessCallback, onCompleted: CompletedCallback, use?: string);
  183.     public loadRes() {
  184.         let resArgs: LoadResArgs = this._makeLoadResArgs.apply(this, arguments);
  185.         console.time("loadRes|"+resArgs.url);
  186.         let finishCallback = (error: Error, resource: any) => {
  187.             // 反向关联引用（为所有引用到的资源打上本资源引用到的标记）
  188.             let addDependKey = (item, refKey) => {
  189.                 if (item && item.dependKeys && Array.isArray(item.dependKeys)) {
  190.                     for (let depKey of item.dependKeys) {
  191.                         // 记录该资源被我引用
  192.                         this.getCacheInfo(depKey).refs.add(refKey);
  193.                         // cc.log(`${depKey} ref by ${refKey}`);
  194.                         let ccloader: any = cc.loader;
  195.                         let depItem = ccloader._cache[depKey]
  196.                         addDependKey(depItem, refKey)
  197.                     }
  198.                 }
  199.             }
  200.  
  201.  
  202.             let item = this._getResItem(resArgs.url, resArgs.type);
  203.             if (item && item.url) {
  204.                 addDependKey(item, item.url);
  205.             } else {
  206.                 cc.warn(`addDependKey item error1! for ${resArgs.url}`);
  207.             }
  208.  
  209.  
  210.             // 给自己加一个自身的引用
  211.             if (item) {
  212.                 let info = this.getCacheInfo(item.url);
  213.                 info.refs.add(item.url);
  214.                 // 更新资源使用
  215.                 if (resArgs.use) {
  216.                     info.uses.add(resArgs.use);
  217.                 }
  218.             }
  219.  
  220.  
  221.             // 执行完成回调
  222.             if (resArgs.onCompleted) {
  223.                 resArgs.onCompleted(error, resource);
  224.             }
  225.             console.timeEnd("loadRes|"+resArgs.url);
  226.         };
  227.  
  228.  
  229.         // 预判是否资源已加载
  230.         let res = cc.loader.getRes(resArgs.url, resArgs.type);
  231.         if (res) {
  232.             finishCallback(null, res);
  233.         } else {
  234.             cc.loader.loadRes(resArgs.url, resArgs.type, resArgs.onProgess, finishCallback);
  235.         }
  236.     }
  237.  
  238.  
  239.     /**
  240.      * 释放资源
  241.      * @param url   要释放的url
  242.      * @param type  资源类型
  243.      * @param use   要解除的资源使用key，根据makeUseKey方法生成
  244.      */
  245.     public releaseRes(url: string, use?: string);
  246.     public releaseRes(url: string, type: typeof cc.Asset, use?: string)
  247.     public releaseRes() {
  248.         /**暂时不释放资源 */
  249.         // return;
  250.  
  251.  
  252.         let resArgs: ReleaseResArgs = this._makeReleaseResArgs.apply(this, arguments);
  253.         let item = this._getResItem(resArgs.url, resArgs.type);
  254.         if (!item) {
  255.             console.warn(`releaseRes item is null ${resArgs.url} ${resArgs.type}`);
  256.             return;
  257.         }
  258.         cc.log("resloader release item");
  259.         // cc.log(arguments);
  260.         let cacheInfo = this.getCacheInfo(item.url);
  261.         if (resArgs.use) {
  262.             cacheInfo.uses.delete(resArgs.use)
  263.         }
  264.         this._release(item, item.url);
  265.     }
  266.  
  267.  
  268.     // 释放一个资源
  269.     private _release(item, itemUrl) {
  270.         if (!item) {
  271.             return;
  272.         }
  273.         let cacheInfo = this.getCacheInfo(item.url);
  274.         // 解除自身对自己的引用
  275.         cacheInfo.refs.delete(itemUrl);
  276.  
  277.  
  278.         if (cacheInfo.uses.size == 0 && cacheInfo.refs.size == 0) {
  279.             // 解除引用
  280.             let delDependKey = (item, refKey) => {
  281.                 if (item && item.dependKeys && Array.isArray(item.dependKeys)) {
  282.                     for (let depKey of item.dependKeys) {
  283.                         let ccloader: any = cc.loader;
  284.                         let depItem = ccloader._cache[depKey]
  285.                         this._release(depItem, refKey);
  286.                     }
  287.                 }
  288.             }
  289.             delDependKey(item, itemUrl);
  290.             //如果没有uuid,就直接释放url
  291.             if (item.uuid) {
  292.                 cc.loader.release(item.uuid);
  293.                 cc.log("resloader release item by uuid :" + item.url);
  294.             } else {
  295.                 cc.loader.release(item.url);
  296.                 cc.log("resloader release item by url:" + item.url);
  297.             }
  298.         }
  299.     }
  300.  
  301.  
  302.     /**
  303.      * 判断一个资源能否被释放
  304.      * @param url 资源url
  305.      * @param type  资源类型
  306.      * @param use   要解除的资源使用key，根据makeUseKey方法生成
  307.      */
  308.     public checkReleaseUse(url: string, use?: string): boolean;
  309.     public checkReleaseUse(url: string, type: typeof cc.Asset, use?: string): boolean
  310.     public checkReleaseUse() {
  311.         let resArgs: ReleaseResArgs = this._makeReleaseResArgs.apply(this, arguments);
  312.         let item = this._getResItem(resArgs.url, resArgs.type);
  313.         if (!item) {
  314.             console.log(`cant release,item is null ${resArgs.url} ${resArgs.type}`);
  315.             return true;
  316.         }
  317.  
  318.  
  319.         let cacheInfo = this.getCacheInfo(item.url);
  320.         let checkUse = false;
  321.         let checkRef = false;
  322.  
  323.  
  324.         if (resArgs.use && cacheInfo.uses.size > 0) {
  325.             if (cacheInfo.uses.size == 1 && cacheInfo.uses.has(resArgs.use)) {
  326.                 checkUse = true;
  327.             } else {
  328.                 checkUse = false;
  329.             }
  330.         } else {
  331.             checkUse = true;
  332.         }
  333.  
  334.  
  335.         if ((cacheInfo.refs.size == 1 && cacheInfo.refs.has(item.url)) || cacheInfo.refs.size == 0) {
  336.             checkRef = true;
  337.         } else {
  338.             checkRef = false;
  339.         }
  340.  
  341.  
  342.         return checkUse && checkRef;
  343.     }
  344. }

04

使用ResLoader

ResLoader 的使用非常简单，下面是一个简单的例子。

我们可以点击 dump 按钮来查看当前的资源总数，点击 cc.load、cc.release 之后分别 dump 一次。

可以发现，开始有 36 个资源，加载之后有 40 个资源，而执行释放之后，还有 39 个资源，只释放了一个资源。如果使用 ResLoader 进行测试，发现释放之后只有 34 个资源。

这是因为前面加载场景的资源也被该测试资源依赖，所以这些资源也被释放掉了。只要我们都使用 ResLoader 来加载和卸载资源，就不会出现资源泄露的问题。

e55e203c0b088d5a2d7b5c25f465b2aa.jpeg

示例代码：

  1. @ccclass
  2. export default class NetExample extends cc.Component {
  3.     @property(cc.Node)
  4.     attachNode: cc.Node = null;
  5.     @property(cc.Label)
  6.     dumpLabel: cc.Label = null;
  7.  
  8.  
  9.     onLoadRes() {
  10.         cc.loader.loadRes("Prefab/HelloWorld", cc.Prefab, (error: Error, prefab: cc.Prefab) => {
  11.             if (!error) {
  12.                 cc.instantiate(prefab).parent = this.attachNode;
  13.             }
  14.         });
  15.     }
  16.  
  17.  
  18.     onUnloadRes() {
  19.         this.attachNode.removeAllChildren(true);
  20.         cc.loader.releaseRes("Prefab/HelloWorld");
  21.     }
  22.  
  23.  
  24.     onMyLoadRes() {
  25.         ResLoader.getInstance().loadRes("Prefab/HelloWorld", cc.Prefab, (error: Error, prefab: cc.Prefab) => {
  26.             if (!error) {
  27.                 cc.instantiate(prefab).parent = this.attachNode;
  28.             }
  29.         });
  30.     }
  31.  
  32.  
  33.     onMyUnloadRes() {
  34.         this.attachNode.removeAllChildren(true);
  35.         ResLoader.getInstance().releaseRes("Prefab/HelloWorld");
  36.     }
  37.  
  38.  
  39.     onDump() {
  40.         let Loader:any = cc.loader;
  41.         this.dumpLabel.string = `当前资源总数:${Object.keys(Loader._cache).length}`;
  42.     }
  43. }

可以看到上面的例子是先移除节点，再进行释放，这是正确的使用方式。如果我没有移除直接释放呢？

因为释放了纹理，所以 Cocos Creator 在接下来的渲染中会不断报错。

ResLoader 只是一个基础。直接使用 ResLoader 我们不需要关心资源的依赖问题，但资源的使用问题我们还需要关心。

在实际的使用中，我们可能希望资源的生命周期是以下几种情况：

  1. 跟随某对象的生命周期，对象销毁时资源释放

  2. 跟随某界面的生命周期，界面关闭时资源释放

  3. 跟随某场景的生命周期，场景切换时资源释放

我们可以实现一个组件挂在到对象身上，当我们在该对象或该对象的其它组件中编写逻辑，加载资源时，使用这个资源管理组件进行加载，由该组件来维护资源的释放。

界面和场景也类似。项目代码位于：https://github.com/wyb10a10/cocos_creator_framework  ，打开 Scene 目录的 ResExample 场景即可查看。

 b6ad9ad0fa9db5a8c47fc2a610f50f6b.gif

以上就是本次的分享，

如有问题或新的想法欢迎留言嗷~

如果您在使用 Cocos Creator 2D/3D 的过程中

 get 了独到的开发心得、见解或是方法

欢迎分享出来

帮助更多开发者们解决技术问题

让游戏开发更简单~

期待您与我们联系~

d3981365a3cc68682a4f340d77ef1712.jpeg

更多精彩

年创数十款新游的大佬竟呼吁：想赚钱就不要做游戏？

Cocos Creator v2.2.2 正式发布

来啊，斗图啊！Cocos 官方定制表情包来啦~

Creator 3D 材质系统：曲面效果如何实现？

最贵的游戏机来了！特斯拉在线发牌

点击下方“阅读原文”

前往社区参与讨论~

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/152514
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号