资源管理

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

  • 统一资源入口管理。
  • 在 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.destory('img1')

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

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

加载超时事件设置

  1. resource.timeout = 30000