https://github.com/theatrejs/plugin-aseprite

🛠️ A Plugin for Aseprite exported files.
https://github.com/theatrejs/plugin-aseprite

2d aseprite canvas engine game game-engine html html5 javascript pixel-art plugin theatrejs theatrejs-plugin webgl webgl2

Last synced: 3 months ago
JSON representation

🛠️ A Plugin for Aseprite exported files.

• Host: GitHub
• URL: https://github.com/theatrejs/plugin-aseprite
• Owner: theatrejs
• License: mit
• Created: 2024-10-04T08:19:52.000Z (4 months ago)
• Default Branch: master
• Last Pushed: 2024-11-03T13:29:16.000Z (3 months ago)
• Last Synced: 2024-11-03T13:32:32.584Z (3 months ago)
• Topics: 2d, aseprite, canvas, engine, game, game-engine, html, html5, javascript, pixel-art, plugin, theatrejs, theatrejs-plugin, webgl, webgl2
• Language: JavaScript
• Homepage: https://theatrejs.github.io/plugin-aseprite/
• Size: 867 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![Copyright](https://img.shields.io/badge/©-deformhead-white.svg)](https://github.com/deformhead) [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/theatrejs/plugin-aseprite/blob/master/LICENSE) [![Bundle Size (Gzipped)](https://img.shields.io/bundlejs/size/@theatrejs/plugin-aseprite@latest)](https://www.npmjs.com/package/@theatrejs/plugin-aseprite/v/latest) [![NPM Version](https://img.shields.io/npm/v/@theatrejs/plugin-aseprite/latest)](https://www.npmjs.com/package/@theatrejs/plugin-aseprite/v/latest)

# Aseprite Plugin

> *🛠️ A Plugin for Aseprite exported files.*

## Installation

```shell

npm install @theatrejs/plugin-aseprite --save

```

## Quick Start

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

```javascript

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

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

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

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

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

class Level1 extends Stage {

    onCreate() {

        this.createActor(

            PLUGINASEPRITE.FACTORIES.ActorWithSpritesheet({

                $aseprite: asepriteHero,

                $loop: true,

                $tag: 'idle'

            })

        );

    }

}

```

## With Preloading

```javascript

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

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

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

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

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

class Level1 extends FACTORIES.StageWithPreloadables([PLUGINASEPRITE.FACTORIES.PreloadableAseprite(asepriteHero)]) {

    onCreate() {

        this.createActor(

            PLUGINASEPRITE.FACTORIES.ActorWithSpritesheet({

                $aseprite: asepriteHero,

                $loop: true,

                $tag: 'idle'

            })

        );

    }

}

```

## Actor With Text

```javascript

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

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

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

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

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

class Level1 extends FACTORIES.StageWithPreloadables([PLUGINASEPRITE.FACTORIES.PreloadableAseprite(asepriteFont)]) {

    onCreate() {

        this.createActor(

            PLUGINASEPRITE.FACTORIES.ActorWithText({

                $font: asepriteFont,

                $text:

                'First line of text.\n' +

                'Second line of text.'

            })

        );

    }

}

```

## Actor With Text (Advanced Options)

```javascript

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

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

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

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

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

class Level1 extends FACTORIES.StageWithPreloadables([PLUGINASEPRITE.FACTORIES.PreloadableAseprite(asepriteFont)]) {

    onCreate() {

        this.createActor(

            PLUGINASEPRITE.FACTORIES.ActorWithText({

                $align: 'left',

                $anchor: 'center',

                $font: asepriteFont,

                $heightLines: 16,

                $spacingCharacters: 1,

                $text:

                'First line of text.\n' +

                'Second line of text.'

            })

        );

    }

}

```

## [API](https://theatrejs.github.io/plugin-aseprite/index.html)