Resources

Resources

Async asset loading with progress tracking and event callbacks.

The Resources class handles asynchronous loading of all game assets. It supports GLTF models (with DRACO compression), textures, cube textures, audio, SVG, and fonts.

// Accessed via game.resources
const resources = game.resources

Defining assets

Provide an array of Asset objects before the game starts:

import type { Asset } from '@mavonengine/core'

const assets: Asset[] = [
  {
    name: 'character',
    type: 'gltfModel',
    path: '/models/character.glb',
  },
  {
    name: 'skybox',
    type: 'cubeTexture',
    path: [
      '/textures/sky/px.jpg',
      '/textures/sky/nx.jpg',
      '/textures/sky/py.jpg',
      '/textures/sky/ny.jpg',
      '/textures/sky/pz.jpg',
      '/textures/sky/nz.jpg',
    ],
  },
  {
    name: 'footstep',
    type: 'sound',
    path: '/audio/footstep.mp3',
  },
]

Asset paths are relative to your project's public/ folder, which is served at /. So a file at public/models/character.glb is referenced as /models/character.glb.

Pass assets to the Resources instance (usually at game init time).

Asset types

TypeDescription
gltfModelGLTF/GLB model (with DRACO compression support)
textureTHREE.Texture (PNG, JPG, etc.)
cubeTextureTHREE.CubeTexture (6 face paths)
soundAudio buffer
svgSVG file
fontFont file

Accessing loaded assets

Once loaded, access assets by name from resources.items:

const characterGltf = resources.items['character'] // GLTF
const skybox = resources.items['skybox'] // THREE.CubeTexture

Progress tracking

resources.on('progress', ({ loaded, total }) => {
  const percent = Math.round((loaded / total) * 100)
  console.log(`Loading: ${percent}%`)
})

resources.on('loaded', () => {
  console.log('All assets ready — starting game')
})

Properties

PropertyTypeDescription
sourcesAsset[]The asset definitions to load
itemsRecord<string, AssetType>Loaded assets keyed by name
loadednumberNumber of assets loaded so far
toLoadnumberTotal number of assets to load