@theatrejs/loader-aseprite

Aseprite Webpack Loader

⚙️ A Webpack Loader for Aseprite files.

Installation

dependencies

npm install @theatrejs/plugin-aseprite --save

npm install @theatrejs/loader-aseprite --save-dev

webpack configuration

{
    'module': {
        'rules': [
            ...
            {
                'test': /\.aseprite$/,
                'use': [
                    {
                        'loader': '@theatrejs/loader-aseprite',
                        'options': {
                            'aseprite': <path-to-aseprite-executable>
                        }
                    }
                ]
            }
            ...
        ]
    }
}

Quick Start

⚠️ This example does not include the preloading of assets.

import {Stage} from '@theatrejs/theatrejs';
import * as PLUGINASEPRITE from '@theatrejs/plugin-aseprite';

import asepriteHero from './hero-16x16.aseprite';

class Level1 extends Stage {
    onCreate() {
        this.createActor(
            PLUGINASEPRITE.FACTORIES.ActorWithSpritesheet({
                $aseprite: asepriteHero,
                $loop: true,
                $tag: 'idle'
            })
        );
    }
}

With Preloading

import {FACTORIES} from '@theatrejs/theatrejs';
import * as PLUGINASEPRITE from '@theatrejs/plugin-aseprite';

import asepriteHero from './hero-16x16.aseprite';

class Level1 extends FACTORIES.StageWithPreloadables([PLUGINASEPRITE.FACTORIES.PreloadableAseprite(asepriteHero)]) {
    onCreate() {
        this.createActor(
            PLUGINASEPRITE.FACTORIES.ActorWithSpritesheet({
                $aseprite: asepriteHero,
                $loop: true,
                $tag: 'idle'
            })
        );
    }
}