Game Component: Content Manager
A component for loading content assets and providing access to them.
How to use
Initialise the content manager before use:
import ContentManager from '@basementuniverse/content-manager';
ContentManager.initialise();
Load content assets:
ContentManager.load([
{
name: 'my-item-1',
type: 'json',
args: ['https://some-url.com/test.json'],
},
]);
Check content manager progress and status:
console.log(ContentManager.progress); // a number between 0 (nothing loaded yet) and 1 (finished loading)
console.log(ContentManager.status); // 0: Idle, 1: Loading, 2: Loaded
Fetch a content asset:
const item = ContentManager.get('my-item-1');
Options
const options = { ... };
ContentManager.initialise(options);
Option | Type | Default | Description |
---|---|---|---|
loaders |
ContentLoaderMap |
(see below) | A dictionary of content loader functions |
simulateSlowLoading |
boolean |
false |
If true, simulate long loading times |
slowLoadingTimeMin |
number |
1000 |
Minimum simulated loading time in ms |
slowLoadingTimeMax |
number |
3000 |
Maximum simulated loading time in ms |
throwOnNotFound |
boolean |
false |
Throw an error when an unknown content item is fetched with get()
|
Default loaders
The following loaders are registered by default:
{
"json": JSONLoader,
"font": FontLoader,
"image": ImageLoader,
"audio": AudioLoader,
}
Implementing a custom content loader
Define a function with a signature that matches ContentLoader
:
import { ContentLoader } from '@basementuniverse/content-manager';
export const MyCustomLoader: ContentLoader = async <HTMLImageElement>(
url: string
): Promise<HTMLImageElement> => {
return new Promise<HTMLImageElement>((resolve, reject) => {
const image = new Image();
image.src = url;
image.addEventListener('load', () => {
resolve(image as any);
});
image.addEventListener('error', () => {
reject(`Error loading image "${url}"`);
});
});
};
Register the loader when initialising the content manager:
ContentManager.initialise({
loaders: {
custom: MyCustomLoader,
},
});
Load content assets using the custom loader:
ContentManager.load([
{
name: 'my-custom-item-1',
type: 'custom',
args: ['./test.png'],
},
]);