@basementuniverse/content-manager v1.0.3

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);

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'],
  },
]);

Other components

• Camera
• Content Manager
• Debug
• Input Manager
• Scene Manager