资源管理

      游戏中所用到的所有资源都会放在资源管理器中进行管理,在使用资源之前需要将资源添加到资源管理器中,并为资源设置一个资源名,在需要时直接使用资源名。这样做的好处:

      • 统一资源入口管理。
      • 在 Eva.js 加载资源时,资源管理器可以对资源进行预处理,减少运行时处理资源产生卡顿等问题

      添加资源

      1. import { RESOURCE_TYPE, resource } from ‘@eva/eva.js’

      下面列举了最常使用的几种资源

      图片

      1. {
      2. name: “image”,
      3. type: RESOURCE_TYPE.IMAGE,
      4. src: {
      5. image: {
      6. type: “png”,
      7. url: “//gw.alicdn.com/bao/uploaded/TB1lVHuaET1gK0jSZFhXXaAtVXa-200-200.png”
      8. }
      9. },
      10. }

      龙骨动画

      1. {
      2. name: “dragonBone”,
      3. type: RESOURCE_TYPE.DRAGONBONE,
      4. src: {
      5. ske: {
      6. type: “json”,
      7. url: “//gw.alicdn.com/bao/uploaded/TB1SFUHVAzoK1RjSZFlXXai4VXa.json”,
      8. },
      9. tex: {
      10. type: “json”,
      11. url: “//gw.alicdn.com/bao/uploaded/TB17n.IVrrpK1RjSZTEXXcWAVXa.json”,
      12. },
      13. image: {
      14. type: “png”,
      15. url: “//gw.alicdn.com/bao/uploaded/TB11W7FVyrpK1RjSZFhXXXSdXXa-489-886.png”
      16. },
      17. },
      18. }

      spine 动画

      1. {
      2. name: “spineAnimation”,
      3. type: RESOURCE_TYPE.SPINE,
      4. src: {
      5. ske: {
      6. type: “json”,
      7. url: “//gw.alicdn.com/bao/uploaded/TB1SFUHVAzoK1RjSZFlXXai4VXa.json”,
      8. },
      9. atlas: {
      10. type: “json”,
      11. url: “//gw.alicdn.com/bao/uploaded/TB17n.IVrrpK1RjSZTEXXcWAVXa.atlas”,
      12. },
      13. image: {
      14. type: “png”,
      15. url: “//gw.alicdn.com/bao/uploaded/TB11W7FVyrpK1RjSZFhXXXSdXXa-489-886.png”
      16. },
      17. },
      18. }

      实际项目中可能需要一次性添加很多资源,可以通过 addResource 实现这一目的

      1. import { RESOURCE_TYPE, resource } from ‘@eva/eva.js’
      2. resource.addResource([
      3. {
      4. name: ‘img1’,
      5. type: RESOURCE_TYPE.IMAGE,
      6. src: {
      7. image: {
      8. type: ‘png’,
      9. url: ‘//gw.alicdn.com/bao/uploaded/TB1lVHuaET1gK0jSZFhXXaAtVXa-200-200.png’
      10. }
      11. }
      12. }
      13. // other resources
      14. ])

      资源预加载

      使用 preload() 方法将资源列表中 preload 为 true 的资源进行加载,可以通过监听 resource 上的事件来获取当前加载进度,适合在游戏初始化展示 loading,切换场景时请求资源时使用。

      1. resource.on(LOAD_EVENT.START, () => {}) // 开始loader
      2. resource.on(LOAD_EVENT.PROGRESS, () => {}) // 加载进度更新
      3. resource.on(LOAD_EVENT.LOADED, () => {}) // 某文件加载成功
      4. resource.on(LOAD_EVENT.COMPLETE, () => {}) // 加载完成
      5. resource.on(LOAD_EVENT.ERROR, () => {}) // 某文件加载失败
      6. resource.preload()

      获取资源

      getResource(resourceName)

      使用 getResource 方法获取资源,该方法返回的是一个 promise。资源将会存在于 data 属性中,如果资源是 JSON 文件,则 data 的值是一个 js 对象;如果资源是图片,则 data 的值将会是 Image 实例。

      1. resource.getResource(‘img1’).then(res => {
      2. const name = res.name // 资源名称
      3. const data = res.data // 资源中文件对应的内容 json 或者 img 等
      4. const instance = res.instance // 处理后的实例
      5. })

      loadSingle(resource)

      使用 loadSingle 来加载单个资源,不需要将资源添加到 addResource 里面,该方法返回的是 promise。

      1. resource
      2. .loadSingle({
      3. name: ‘img1’,
      4. type: RESOURCE_TYPE.IMAGE,
      5. src: {
      6. image: {
      7. type: ‘png’,
      8. url: ‘//gw.alicdn.com/bao/uploaded/TB1lVHuaET1gK0jSZFhXXaAtVXa-200-200.png’
      9. }
      10. },
      11. preload: true
      12. })
      13. .then(res => {})

      资源处理

      通过为某种类型的资源注册方法,可以在资源请求回来时对资源进行处理,在使用时可以直接获取到资源实例。

      1. resource.registerInstance(RESOURCE_TYPE.SPRITE, async ({ name, data }) => {
      2. const instance = await instanceSth(data)
      3. return instance
      4. })

      资源销毁

      资源可以主动销毁,需要要注意的是,在销毁资源前要确保游戏中没有使用该资源。

      1. resource.destroy(‘img1’)

      如果为该类型资源注册了销毁方法,则会调用该方法销毁资源。

      1. resource.registerDestroy(RESOURCE_TYPE.SPRITE, async ({ instance }) => {
      2. await instance.destroy()
      3. })

      加载超时事件设置

      1. resource.timeout = 30000