game-asset-loader

An asset loader with graceful fallbacks, for use in browser games

Usage no npm install needed!

<script type="module">
  import gameAssetLoader from 'https://cdn.skypack.dev/game-asset-loader';
</script>

README

Game Asset Loader

Game asset loader for HTML5 games with gracefull fallbacks.

Install

npm install --save game-asset-loader

Usage

Load an image

    loadImage('myImage', 'myImageURL')
    .then(image => {
        // loaded image object { type: 'image', key: 'myImage', value: imgNode }
    })

Load a sound

    loadSound('mySound', 'mySoundURL')
    .then(sound => {
        // loaded sound object { type: 'sound', key: 'mySound', value: audioBuffer }
    })

Load a font

    loadFont('myFont', 'GoogleFontName')
    .then(font => {
        // loaded sound object { type: 'font', key: 'myFont', value: fontFamilyName }
    })

Load List

 loadList(
    [
        loadImage('myImage', 'myImageURL'),
        loadSound('mySound', 'mySoundURL'),
        loadFont('myFont', 'GoogleFontName')
    ],
    (progress) => {
        // progress { percent: number, loaded: { type: type, key: key } }
        console.log(`${progress}% Loading...`);
    })
    .then((assets) => {
        // loaded assets { image: [images], sound: [sounds], font: [fonts] }
    })
    .catch(err => console.error(err));

Fallbacks

Images (optional): transparent image placeholder (game code can remain unchanged)

Images (required): image not found image (visual feedback that an image is missing)

Sound: silent sound & console warning

Develop

Run npm start and open localhost:1234 in a browser.

tape + tape-dom are used for easy testing on various mobile devices.