This is a webpack loader that loads Aseprite .ase
and .aseprite
files via ase-parser.
It sets module.exports
of the file you're importing to an object of the type AsepriteLoader.Data
as defined below:
declare namespace AsepriteLoader {
interface Data {
frames: Array<AsepriteLoader.Frame>;
layers: Array<AsepriteLoader.Layer>;
tags: Array<AsepriteLoader.Tag>;
palette?: AsepriteLoader.Palette;
fileSize: number;
width: number;
height: number;
numFrames: number;
colorDepth: number;
numColors: number;
pixelRatio: string;
colorProfile: {
type: string;
flag: number;
fGamma: number;
};
}
interface Palette {
paletteSize: number;
firstColor: number;
lastColor: number;
colors: Array<Color>;
}
interface Color {
red: number;
green: number;
blue: number;
alpha: number;
name: string;
}
interface Cel {
layerIndex: number;
xpos: number;
ypos: number;
opacity: number;
celType: number;
w: number;
h: number;
rawCelData: Uint8Array;
}
interface Tag {
name: string;
from: number;
to: number;
animDirection: string;
color: string;
}
interface Layer {
flags: number;
type: number;
layerChildLevel: number;
blendMode: number;
opacity: number;
name: string;
}
interface Frame {
bytesInFrame: number;
frameDuration: number;
numChunks: number;
cels: Array<Cel>;
}
}
NOTE: Even if a Cel is of type 2 (zlib compressed), the
rawCelData
will always be inflated, as if it was type 0. See the Aseprite File Format Specification for more info.
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.ase(prite)?$/i,
use: ["aseprite-loader"],
},
],
},
};
const blueSlime = require("./blue-slime.aseprite");
console.log(blueSlime);
// Object { frames: [...], layers: [...], ... };
MIT