https://github.com/theatrejs/loader-aseprite
⚙️ A Webpack Loader for Aseprite files.
https://github.com/theatrejs/loader-aseprite
2d aseprite canvas engine game game-engine html html5 javascript loader pixel-art theatrejs theatrejs-loader webgl webgl2 webpack webpack-loader
Last synced: 20 days ago
JSON representation
⚙️ A Webpack Loader for Aseprite files.
- Host: GitHub
- URL: https://github.com/theatrejs/loader-aseprite
- Owner: theatrejs
- License: mit
- Created: 2024-10-04T08:20:12.000Z (7 months ago)
- Default Branch: master
- Last Pushed: 2025-03-10T22:10:49.000Z (about 2 months ago)
- Last Synced: 2025-04-07T09:08:41.549Z (26 days ago)
- Topics: 2d, aseprite, canvas, engine, game, game-engine, html, html5, javascript, loader, pixel-art, theatrejs, theatrejs-loader, webgl, webgl2, webpack, webpack-loader
- Language: JavaScript
- Homepage:
- Size: 74.2 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/deformhead) [](https://github.com/theatrejs/loader-aseprite/blob/master/LICENSE) [](https://www.npmjs.com/package/@theatrejs/loader-aseprite/v/latest) [](https://www.npmjs.com/package/@theatrejs/loader-aseprite/v/latest)
# Aseprite Webpack Loader
> *⚙️ A Webpack Loader for Aseprite files.*
## Installation
> *⚠️ This loader needs you to have [**Aseprite**](https://www.aseprite.org) installed.*
```shell
npm install @theatrejs/plugin-aseprite --save
```
```shell
npm install @theatrejs/loader-aseprite --save-dev
```
## Webpack Configuration
```javascript
{
'module': {
'rules': [
...
{
'test': /\.aseprite$/,
'use': [
{
'loader': '@theatrejs/loader-aseprite',
'options': {
'aseprite': '' // The path to the Aseprite executable.
}
}
]
}
...
]
}
}
```
## Webpack Configuration (Advanced Options)
```javascript
{
'module': {
'rules': [
...
{
'test': /\.aseprite$/,
'use': [
{
'loader': '@theatrejs/loader-aseprite',
'options': {
'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.*
```javascript
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
```javascript
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'
})
);
}
}
```