oops-framework框架 之 资源管理(四)

引擎： CocosCreator 3.8.0

环境： Mac

Gitee: oops-game-kit

注： 作者dgflash的oops-framework框架QQ群： 628575875

简介

---

在CocosCreator中，资源可以分为两大类：

1. 静态引用资源
2. 动态引用资源，包含动态加载和远程下载

放置在 assets 目录下的所有资源，均继承于Asset，而这些资源的动态加载主要是通过 Bundle。

Bundle 存在多个，主要有两类：

• 内置Bundle， 主要是resources、start-scene、main等
• 自定义Bundle， 由开发者设定文件夹自定义的，用于对资源进行更好的管理和使用

Bundle 的使用主要通过CocosCreator引擎封装的AssetManager进行资源的远程下载、加载和释放等。

更多关于CocosCreator资源管理的详情可参考博客：

CocosCreator 之 resources动态加载

CocosCreator 之 Bundle的使用

CocosCreator 之 AssetManager资源管理和释放

了解这些，对了解dgflash作者分享的oops-framework框架下的资源管理是有帮助的。

ResLoader

oops-framework 中的资源管理主要被 ResLoader管理，用于管理各种不同类型资源的加载和释放。

在 Oops.ts中的定义如下：

// ../oops-plugin-framework/assets/core/Oop.ts
export class oops {
    /** 资源管理 */
    static res = new ResLoader();
}

使用的简单方式是：

let url = `game/textures/image/spriteFrame`;
oops.res.load(url, SpriteFrame, (err, spriteframe) => {
  if (err) {
    return console.error("load spriteframe failed:" + err.message);
  }
  this._blockSprite.spriteFrame = spriteframe;
});

这种方式同resources.load的方式很是相像。在框架中使用ResLoader对于资源的管理特点是：

• 加载默认 resources 文件夹中资源
• 加载默认 bundle 远程资源
• 主动传递 bundle 名时，优先加载传递 bundle 名资源包中的资源

主要接口有：

参数或接口	说明
defaultBundleName	全局默认加载的资源包名，默认resources
load()	加载单一任意类型资源
loadAsync()	异步加载单一任意类型资源
loadDir()	加载文件夹中资源
loadRemote()	加载远程资源
loadBundle()	加载资源包
get()	根据路径，资源类型获取资源
dump()	打印缓存中所有资源信息
release()	通过相对路径释放资源
releaseDir()	通过文件夹路径释放所有文件夹中资源

在项目启动InitRes.ts中加载必备资源或可选资源时，就能够看到资源管理的使用。

// 加载远程资源，使用loadBundle进行加载
private loadBundle(queue: AsyncQueue) {
  queue.push(async (next: NextFunction, params: any, args: any) => {
    // 设置默认加载的外部资源包名
    oops.res.defaultBundleName = oops.config.game.bundleName;
    if (oops.config.game.bundleEnable) {
      await oops.res.loadBundle(oops.config.game.bundleServer, oops.config.game.bundleVersion);
    }
    else {
      await oops.res.loadBundle(oops.config.game.bundleName);
    }
    next();
  });
}

// 加载自定义内容 使用load进行单一资源加载
private loadCustom(queue: AsyncQueue) {
  queue.push(async (next: NextFunction, params: any, args: any) => {
    // 加载多语言对应字体
    oops.res.load("language/font/" + oops.language.current, next);
  });
}

// 加载公共资源, 使用loadDir进行目录加载
private loadCommon(queue: AsyncQueue) {
  queue.push((next: NextFunction, params: any, args: any) => {
    oops.res.loadDir("common", next);
  });
}

示例

---

图片动态加载、图片远程加载、Spine动态加载的示例：

export class UIResLoadLayer extends Component {
  @property(Sprite) sprite: Sprite = null; 
  @property(sp.Skeleton) spine: sp.Skeleton = null; 

  // 图片动态加载
  public clickImgLoad() {
    let url = "game/texture/game1/spriteFrame"
    oops.res.load(url, (err, spriteframe) => {
      if (err) {
        console.log("资源加载失败", err);
        return;
      }
      this.sprite.spriteFrame = spriteframe;
    })
  }

  // 图片远程加载
  public clickRemoteLoad() {
    let url = "https://oops-1255342636.cos-website.ap-shanghai.myqcloud.com/img/bg.png";
    var opt = { ext: ".png" };
    var onComplete = (err: Error | null, data: ImageAsset) => {
      const spriteFrame = new SpriteFrame();
      const texture = new Texture2D();
      texture.image = data;
      spriteFrame.texture = texture;
      this.sprite.spriteFrame = spriteFrame;
    }
    oops.res.loadRemote<ImageAsset>(url, opt, onComplete);
  }

  // spine动态加载
  public clickSpineLoad() {
    let url = "game/spine/model1"
    oops.res.load(url, sp.SkeletonData, (err, sd: sp.SkeletonData) => {
      if (err) {
        return console.error(err.message);
      }
      this.spine.skeletonData = sd;
      this.spine.setAnimation(0, "AttackCritical_Arch", true);
    });
  }
}

注：在ResLoader.ts提供的接口中，有着相关的代码示例，这里就不复制粘贴了。

有一点需要注意，如果存在 Bundle ，在项目启动的时候会优先加载

// InitRes.ts
entityEnter(e: Initialize): void {
   var queue: AsyncQueue = new AsyncQueue();

   /** 加载远程资源配置 */
   this.loadBundle(queue);
   // ...
   queue.play();
}

private loadBundle(queue: AsyncQueue) {
  queue.push(async (next: NextFunction, params: any, args: any) => {
      // 设置默认加载的外部资源包名
      oops.res.defaultBundleName = oops.config.game.bundleName;

      // 加载外部资源包
      // ...
      next();
  });
}

这里会默认将defaultBundleName修改为指定的BundleName, 如果需要动态加载 resources 目录中的资源，就需要设置下名字：

let bundleName = "resources";
let path = "common/texture/img/spriteFrame";
oops.res.load(bundleName, path, spriteFrame, (err, spriteFrame) => {});

感谢作者dgflash的分享，作者CSDN博客： dgflash CSDN

最后，祝大家学习和生活愉快!