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
| Type | Description |
|---|---|
gltfModel | GLTF/GLB model (with DRACO compression support) |
texture | THREE.Texture (PNG, JPG, etc.) |
cubeTexture | THREE.CubeTexture (6 face paths) |
sound | Audio buffer |
svg | SVG file |
font | Font 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
| Property | Type | Description |
|---|---|---|
sources | Asset[] | The asset definitions to load |
items | Record<string, AssetType> | Loaded assets keyed by name |
loaded | number | Number of assets loaded so far |
toLoad | number | Total number of assets to load |