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 {Actor} from '@theatrejs/theatrejs';

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

class Hero extends Actor {
    onCreate() {
        this.$timeline = spritesheetHero.createTimeline({$actor: this, $framerate: 8, $loop: true, $tag: 'idle'});
    }
    onTick($timetick) {
        this.$timeline.tick($timetick);
    }
}

With Preloading

import {FACTORIES} from '@theatrejs/theatrejs';

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

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

class Hero extends FACTORIES.ActorWithPreloadables([PLUGINASEPRITE.FACTORIES.PreloadableAseprite(spritesheetHero)]) {
    onCreate() {
        this.$timeline = spritesheetHero.createTimeline({$actor: this, $framerate: 8, $loop: true, $tag: 'idle'});
    }
    onTick($timetick) {
        this.$timeline.tick($timetick);
    }
}