Package Exports

@theatrejs/loader-aseprite
@theatrejs/loader-aseprite/sources/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@theatrejs/loader-aseprite) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Aseprite Webpack Loader

⚙️ A Webpack Loader for Aseprite files.

Installation

⚠️ This loader needs you to have Aseprite installed.

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>' // The path to the Aseprite executable.
                        }
                    }
                ]
            }
            ...
        ]
    }
}

Webpack Configuration (Advanced Options)

{
    'module': {
        'rules': [
            ...
            {
                'test': /\.aseprite$/,
                'use': [
                    {
                        'loader': '@theatrejs/loader-aseprite',
                        'options': {
                            'aseprite': '<path-to-aseprite>', // The path to the Aseprite executable.
                            'prepare': {
                                'sheet': 'packed', // The Aseprite output 'sheet type' option ('colums' | 'horizontal' | 'packed' | 'rows' | 'vertical') ('rows' by default).
                                'trim': true // The Aseprite output 'trim cels' option (false by default).
                            },
                            'processing': {
                                'colorswap': [
                                    {
                                        'source': [255, 0, 255, 255], // A source color to swap from (in rgba).
                                        'target': [0, 0, 0, 0] // A target color to swap to (in rgba).
                                    }
                                ]
                            }
                        }
                    }
                ]
            }
            ...
        ]
    }
}

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