@basementuniverse/content-manager
v1.0.3
Published
A component for loading content assets and providing access to them
Downloads
5
Readme
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'],
},
]);