aseprite-parser
is an simple npm package that allows users to pass the _.ase or _.aseprite file, and can pull images, animations, and spritesheets out
aseprite-parser
comes with a bundle of features already. You can do the followings with it:
- Gives flexibility in its usage
- Spritesheets can be configured by rows/columns, or it can be split into an array of individual images
๐ข If animation tags are used in aseprite, the animation frames tied to that tag can be pulled out
- this can be extracted as a spritesheet, or as an array of images
-
Navigate to your current project where you need Aseprite files parsed
-
npm -i aseprite-parser
import { AsepriteParser } from "./components/Aseprite";
const myAsepriteParser = new AsepriteParser("./src/myAsepriteFile.aseprite");
myAsepriteParser.initialize();
const mySprite = myAsepriteParser.getImage(0);
or some of the other methods to extract images...
export interface AsepriteHeader {
fileSize: number;
imageWidth: number;
imageHeight: number;
frameCount: number;
colorDepth: number;
}
export interface AsepriteFrame {
layers: Array<FrameLayer>;
duration: number;
image: HTMLImageElement;
}
export interface AsepriteLayer {
layerID: number;
layerName: string;
}
export interface AsepriteTag {
startIndex: number;
endIndex: number;
tagName: string;
}
export interface SpriteSheetOptions {
frames: Array<number> | "all"; // 'all' has been added to imrove dev experience
rows: number;
cols: number;
}
- AsepriteHeader containing properties that are tied to the overall file in accordance with the AsepriteHeader interface above.
- Array of AsepriteFrames
- Array of AsepriteTags
- Array of AsepriteLayers
- Array of strings, all of which are color codes i.e.
#000000ff
- Boolean flag that becomes set once the Aseprite file is properly parsed
params - none
returns - Array of AsepriteTag Objects
This returns that array of 'tags' or animation sequences from Aseprite, and in the object is the frame indexes associated with them.
params - none
returns - Array of color string
This returns that array of color strings i.e. `#000000ff` that are included in the Aseprite file that's parsed
params
- `tag` : string, this is the Aseprite tag that's used to indicate an animation sequence
- `split`: boolean, this flag determines how the images are returned, defaults true
returns - Promise<Array<HTMLImageElement | HTMLImageElement>
- if split is true, the promise returns and array of Images,
- if split is false, the promise returns on spritesheet image
params
- `from` : number, this is the starting index for retrieving image frames
- `to` : number, this is the ending index for retrieving image frames
- `split`: boolean, this flag determines how the images are returned defaults true
returns - Promise<Array<HTMLImageElement | HTMLImageElement>
- if split is true, the promise returns and array of Images,
- if split is false, the promise returns on spritesheet image
params
- `options` : SpriteSheetOptions
returns - Promise<HTMLImageElement>
- when resolved, returns the spritesheet