@theatrejs/plugin-aseprite v1.7.1

Aseprite Plugin

🛠️ A Plugin for Aseprite exported files.

Installation

npm install @theatrejs/plugin-aseprite --save

Quick Start

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

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

import asepriteDataHero from './hero-16x16.json';
import asepriteTextureHero from './hero-16x16.png';

const asepriteHero = new PLUGIN_ASEPRITE.Aseprite(asepriteTextureHero, asepriteDataHero);

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

With Preloading

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

import asepriteDataHero from './hero-16x16.json';
import asepriteTextureHero from './hero-16x16.png';

const asepriteHero = new PLUGIN_ASEPRITE.Aseprite(asepriteTextureHero, asepriteDataHero);

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

Actor With Text

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

import asepriteDataFont from './font-16.json';
import asepriteTextureFont from './font-16.png';

const asepriteFont = new PLUGIN_ASEPRITE.Aseprite(asepriteTextureFont, asepriteDataFont);

class Level1 extends FACTORIES.StageWithPreloadables([PLUGIN_ASEPRITE.FACTORIES.PreloadableAseprite(asepriteFont)]) {
    onCreate() {
        this.createActor(
            PLUGIN_ASEPRITE.FACTORIES.ActorWithText({
                $font: asepriteFont,
                $text:
                'First line of text.\n' +
                'Second line of text.'
            })
        );
    }
}

Actor With Text (Advanced Options)

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

import asepriteDataFont from './font-16.json';
import asepriteTextureFont from './font-16.png';

const asepriteFont = new PLUGIN_ASEPRITE.Aseprite(asepriteTextureFont, asepriteDataFont);

class Level1 extends FACTORIES.StageWithPreloadables([PLUGIN_ASEPRITE.FACTORIES.PreloadableAseprite(asepriteFont)]) {
    onCreate() {
        this.createActor(
            PLUGIN_ASEPRITE.FACTORIES.ActorWithText({
                $align: 'left',
                $anchor: 'center',
                $font: asepriteFont,
                $heightLines: 16,
                $spacingCharacters: 1,
                $text:
                'First line of text.\n' +
                'Second line of text.'
            })
        );
    }
}

API