UNPKG

9.55 kBMarkdownView Raw
1# ase-parser
2Parse Aseprite files with Node.js, no external dependencies.
3
4### Install
5To install for use:
6```
7npm i ase-parse
8```
9
10## Instructions
11You'll probably want to get the Buffer of the Aseprite file in whatever way you feel like. For the example, we'll just use `fs.readFileSync()`. But you can get it from a network request, etc.
12
13```js
14const Aseprite = require('ase-parser');
15const fs = require('fs');
16
17const buff = fs.readFileSync('./somefile.aseprite');
18const aseFile = new Aseprite(buff, 'somefile.aseprite');
19
20aseFile.parse();
21console.log(aseFile.numFrames);
22```
23
24After parsing, you can get the data and do something like generate an image with the [`sharp`](https://www.npmjs.com/package/sharp) npm lib, which accepts raw pixel data and supports image composition.
25
26Here is a more advanced example generating a `png` image of the first frame using the [`sharp`](https://www.npmjs.com/package/sharp) lib.
27
28```js
29const Aseprite = require('ase-parser');
30const fs = require('fs');
31const sharp = require('sharp');
32
33async function makePNG() {
34 const buff = fs.readFileSync('./my_chocobo.aseprite');
35 const ase = new Aseprite(buff, 'my_chocobo.aseprite');
36
37 ase.parse();
38 // Create a blank png image buffer that's the same size as the Aseprite sprite (only make the promise because we'll use Promise.all a little later)
39 const bgPromise = sharp({create: {
40 width: ase.width,
41 height: ase.height,
42 channels: 4,
43 background: {r: 0, g: 0, b: 0, alpha: 0}
44 }}).png().toBuffer();
45
46 // Get the cels for the first frame
47 const cels = ase.frames[0].cels;
48
49 // Create png image buffers per cel to create an image of the first frame (creating the Promises to be used)
50 const otherPromises = cels.map(cel => {
51 return sharp(cel.rawCelData, {raw: {width: cel.w, height: cel.h, channels: 4}}).png().toBuffer();
52 });
53
54 // Run the promises all at once to get the buffers for the base image and the cels to combine
55 const [ bg, ...others ] = await Promise.all([bgPromise, ...otherPromises]).catch(console.log);
56
57 // take the first image and add on the png buffers on top of it (the cels should be in order from bottom to top from the parse)
58 const finalBuff = await sharp(bg)
59 .composite(others.map((img, index) => ({
60 input: img,
61 top: cels[index].ypos,
62 left: cels[index].xpos
63 })))
64 .png()
65 .toBuffer();
66 // saves the file as a png with the buffer from sharp.composite
67 fs.writeFileSync(ase.name.replace('.aseprite', '.png'), finalBuff);
68}
69
70makePNG();
71
72```
73
74## Aseprite Functions
75
76### `constructor`
77Parameters:
78 * `buffer`: Expects a Node.js Buffer of the `Aseprite` file.
79 * `name`: Expects a string that's the name of the `Aseprite` file, including the extension.
80
81 Returns:
82 * `Aseprite`: Returns [Aseprite](#aseprite-object).
83
84 Example:
85 ```js
86 const Aseprite = require('ase-parser');
87 const fs = require('fs');
88
89const buff = fs.readFileSync('./somefile.aseprite');
90const aseFile = new Aseprite(buff, 'somefile.aseprite');
91```
92
93### `parse`
94Description:
95Parses the Aseprite file and populates the `Aseprite` class with the information from the file.
96
97Parameters:
98 * none
99
100 Returns:
101 * none
102
103Example:
104 ```js
105const Aseprite = require('ase-parser');
106const fs = require('fs');
107
108const buff = fs.readFileSync('./somefile.aseprite');
109const aseFile = new Aseprite(buff, 'somefile.aseprite');
110
111aseFile.parse();
112```
113
114
115
116## Aseprite Object
117| Field | Type | Description |
118|--------------|------------------------|----------------------------------------|
119| frames | array of [frame](#frame-object) objects | frames |
120| layers | array of [layer](#layer-object) objects | layers |
121| fileSize | integer | size of the file (in bytes) |
122| numFrames | integer | number of frames the Aseprite file has |
123| width | integer | width (in pixels) |
124| height | integer | height (in pixels) |
125| colorDepth | integer | color depth (in bits per pixel) |
126| paletteIndex | integer | position of the indexed color based on the palette |
127| numColors | integer | number of colors |
128| pixelRatio | string | width:height |
129| name | string | name of the file |
130| tags | arry of [tag](#tag-object) objects | tags |
131| colorProfile | [colorProfile](#color-profile-object) object | Color profile |
132| palette | [palette](#palette-object) object | Palette |
133| slices | array of [slice](#slice-object) objects | Info on slices |
134
135## Frame Object
136| Field | Type | Description |
137|---------------|-----------------------|------------------|
138| bytesInFrame | integer | size (in bytes) |
139| frameDuration | integer | duration (in ms) |
140| cels | array of [cel](#cel-object) objects | cels |
141
142## Layer Object
143| Field | Type | Description |
144|-----------------|---------|---------------------|
145| flags | integer | flags for the layer |
146| type | integer | type |
147| layerChildLevel | integer | layer child level |
148| opacity | integer | opacity (0-255) |
149| name | string | name of layer |
150
151
152## Tag Object
153| Field | Type | Description |
154|---------------|---------|----------------------------------------|
155| from | integer | first frame index |
156| to | integer | last frame index |
157| animDirection | string | `Forward`, `Reverse` or `Ping-pong` |
158| color | string | hex color of the tag (no `#` included) |
159| name | string | name |
160
161## Color Profile Object
162| Field | Type | Description |
163|--------|---------|-------------------------|
164| type | string | `None`, `sRGB` or `ICC` |
165| flag | integer | fixed gamma flag |
166| fGamma | integer | fixed gamma |
167| icc? | buffer | ICC profile data |
168
169## Palette Object
170| Field | Type | Description |
171|-------------|------------------------|--------------------------|
172| paletteSize | integer | number of colors |
173| firstColor | integer | index of the first color |
174| lastColor | integer | index of the last color |
175| colors | array of [color](#color-object) objects | colors |
176| index? | integer | position of the indexed color based on the palette |
177
178## Cel Object
179| Field | Type | Description |
180|------------|---------|----------------------------------------------|
181| layerIndex | integer | index of the layer associated |
182| xpos | integer | x position of the cel compared to the sprite |
183| ypos | integer | y position of the cel compared to the sprite |
184| opacity | integer | opacity (0-255) |
185| celType | integer | internally used |
186| w | integer | width (in pixels) |
187| h | integer | height (in pixels) |
188| rawCelData | Buffer | raw cel pixel data |
189
190## Color Object
191| Field | Type | Description |
192|-------|---------|-----------------------------------------------|
193| red | integer | red value (0-255) |
194| green | integer | green value (0-255) |
195| blue | integer | blue value (0-255) |
196| alpha | integer | alpha value (0-255) |
197| name | string | 'none' or the actual color name if it has one |
198
199## Slice Object
200| Field | Type | Description |
201|-------|---------|-----------------------|
202| flags | integer | Flags set |
203| keys | array of [SliceKey](#slicekey-object) objects | Array of keys and their values |
204| name | string | Name of the slice |
205
206## SliceKey Object
207| Field | Type | Description |
208|-------|---------|-------------------|
209| frameNumber | integer | Frame number that the slice is from |
210| x | integer | X position of the slice |
211| y | integer | Y position of the slice |
212| width | integer | Width of the slice |
213| height | integer | Height of the slice |
214| patch? | [patch](#patch-object) object | Patch info on the slice |
215| pivot? | [pivot](#pivot-object) object | Pivot info on the slice |
216
217## Patch Object
218| Field | Type | Description |
219|-------|---------|-------------------|
220| x | integer | X postion of the patch |
221| y | integer | Y position of the patch |
222| width | integer | Width of the patch |
223| height | integer | Height of the patch |
224
225## Pivot Object
226| Field | Type | Description |
227|-------|---------|-----------------|
228| x | integer | X position of the pivot |
229| y | integer | Y position of the pivot |
230
231# Further Info
232
233If you would like to read up on the Aseprite file spec: [Spec](https://github.com/aseprite/aseprite/blob/master/docs/ase-file-specs.md)
\No newline at end of file