Resource Management

All resources used in the game will be managed by the resource manager. Before using the resource, you need to add the resource to the resource manager, and set a resource name for the resource, and use the resource name directly when needed. The benefits of this:

  • Unified resource entry management.
  • When Eva.js loads resources, the resource manager can preprocess the resources to reduce the problem of lag in the processing of resources during runtime

Add resource

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

Listed below are the most commonly used resources

image

  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. }

Keel Animation

  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 animation

  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. }

In actual projects, you may need to add a lot of resources at one time, which can be achieved through the addResource method.

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

Resource preload

Use the preload() method to load the resources whose preload is true in the resource list. You can obtain the current loading progress by listening to events on the resource, which is suitable for the initial display of the game, loading and requesting resources when switching scenes.

  1. resource.on(LOAD_EVENT.START, () => ()) // start loader
  2. resource.on(LOAD_EVENT.PROGRESS, () => ()) // Load progress update
  3. resource.on(LOAD_EVENT.LOADED, () => ()) // A file is successfully loaded
  4. resource.on(LOAD_EVENT.COMPLETE, () => ()) // Load completed
  5. resource.on(LOAD_EVENT.ERROR, () => ()) // A file failed to load
  6. resource.preload()

Access to resources

getResource(resourceName)

Use the getResource method to get the resource, which returns a promise. The resource will exist in the data attribute. If the resource is a JSON file, the value of data is a js object; if the resource is an image, the value of data will be an Image instance.

  1. resource.getResource('img1').then(res => {
  2.   const name = res.name // resource name
  3.   const data = res.data // The corresponding content of the file in the resource json or img, etc.
  4.   const instance = res.instance // processed instance
  5. })

loadSingle(resource)

Use loadSingle to load a single resource, you don’t need to add the resource to the addResource method, this method returns a 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 => {})

Resource processing

By registering a method for a certain type of resource, the resource can be processed when the resource request comes back, and the resource instance can be directly obtained when it is used.

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

Resource destruction

Resources can be actively destroyed. It should be noted that before destroying resources, make sure that the resources are not used in the game.

  1. resource.destroy('img1')

If a destruction method is registered for this type of resource, this method will be called to destroy the resource.

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

Load timeout event settings

  1. resource.timeout = 30000