@theatrejs/loader-aseprite 1.1.0 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +39 -3
  2. package/package.json +9 -1
  3. package/sources/aseprite.loader.js +79 -14
package/README.md CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  ## Installation
8
8
 
9
- #### `dependencies`
9
+ > *⚠️ This loader needs you to have [**Aseprite**](https://www.aseprite.org) installed.*
10
10
 
11
11
  ```shell
12
12
  npm install @theatrejs/plugin-aseprite --save
@@ -16,7 +16,7 @@ npm install @theatrejs/plugin-aseprite --save
16
16
  npm install @theatrejs/loader-aseprite --save-dev
17
17
  ```
18
18
 
19
- #### `webpack configuration`
19
+ ## Webpack Configuration
20
20
 
21
21
  ```javascript
22
22
  {
@@ -29,7 +29,43 @@ npm install @theatrejs/loader-aseprite --save-dev
29
29
  {
30
30
  'loader': '@theatrejs/loader-aseprite',
31
31
  'options': {
32
- 'aseprite': <path-to-aseprite-executable>
32
+ 'aseprite': '<path-to-aseprite>' // The path to the Aseprite executable.
33
+ }
34
+ }
35
+ ]
36
+ }
37
+ ...
38
+ ]
39
+ }
40
+ }
41
+ ```
42
+
43
+ ## Webpack Configuration (Advanced Options)
44
+
45
+ ```javascript
46
+ {
47
+ 'module': {
48
+ 'rules': [
49
+ ...
50
+ {
51
+ 'test': /\.aseprite$/,
52
+ 'use': [
53
+ {
54
+ 'loader': '@theatrejs/loader-aseprite',
55
+ 'options': {
56
+ 'aseprite': '<path-to-aseprite>', // The path to the Aseprite executable.
57
+ 'prepare': {
58
+ 'sheet': 'packed', // The Aseprite output 'sheet type' option ('colums' | 'horizontal' | 'packed' | 'rows' | 'vertical') ('rows' by default).
59
+ 'trim': true // The Aseprite output 'trim cels' option (false by default).
60
+ },
61
+ 'processing': {
62
+ 'colorswap': [
63
+ {
64
+ 'source': [255, 0, 255, 255], // A source color to swap from (in rgba).
65
+ 'target': [0, 0, 0, 0] // A target color to swap to (in rgba).
66
+ }
67
+ ]
68
+ }
33
69
  }
34
70
  }
35
71
  ]
package/package.json CHANGED
@@ -1,6 +1,14 @@
1
1
  {
2
2
  "author": "Alexandre Blondeau",
3
+ "dependencies": {
4
+
5
+ "pngjs": "7.0.0"
6
+ },
3
7
  "description": "⚙️ A Webpack Loader for Aseprite files.",
8
+ "devDependencies": {
9
+
10
+ "@types/pngjs": "6.0.5"
11
+ },
4
12
  "engines": {
5
13
 
6
14
  "node": "16.13.0",
@@ -49,5 +57,5 @@
49
57
  "postversion": "node ./tools/custom/postversion.cjs"
50
58
  },
51
59
  "type": "commonjs",
52
- "version": "1.1.0"
60
+ "version": "1.3.0"
53
61
  }
package/sources/aseprite.loader.js CHANGED
@@ -4,31 +4,47 @@ const path = require('path');
4
4
 
5
5
  const webpack = require('webpack');
6
6
 
7
+ const pngjs = require('pngjs').PNG.sync;
8
+
7
9
  /**
8
10
  * @type {webpack.RawLoaderDefinition}
9
11
  */
10
12
  module.exports = function loader() {
11
13
 
12
14
  /**
13
- * @typedef {Object} typeoptions Options for the loader.
14
- * @property {(string | undefined)} typeoptions.aseprite The path of the Aseprite executable.
15
+ * @typedef {Object} TypeColorswap A swap of two colors.
16
+ * @property {Array<number>} TypeColorswap.source The source color to swap from (in rgba).
17
+ * @property {Array<number>} TypeColorswap.target The target color to swap to (in rgba).
18
+ * @private
19
+ */
20
+
21
+ /**
22
+ * @typedef {Object} TypeOptions The options for the loader.
23
+ * @property {string} TypeOptions.aseprite The path to the Aseprite executable.
24
+ * @property {Object} [TypeOptions.prepare] The options for the Aseprite CLI.
25
+ * @property {('colums' | 'horizontal' | 'packed' | 'rows' | 'vertical')} [TypeOptions.prepare.sheet] The output sheet type ('rows' by default).
26
+ * @property {boolean} [TypeOptions.prepare.trim] The 'trim cels' option (false by default).
27
+ * @property {Object} [TypeOptions.processing] The options for processing the output files.
28
+ * @property {Array<TypeColorswap>} [TypeOptions.processing.colorswap] The swaps of colors.
15
29
  * @private
16
30
  */
17
31
 
18
- const context = /** @type {webpack.LoaderContext<typeoptions>} */(this);
32
+ const context = /** @type {webpack.LoaderContext<TypeOptions>} */(this);
19
33
 
20
34
  const file = context.resourcePath;
21
35
  const options = context.getOptions();
22
36
  const aseprite = options.aseprite;
37
+ const prepare = options.prepare;
38
+ const processing = options.processing;
23
39
 
24
40
  try {
25
41
 
26
42
  require.resolve('@theatrejs/plugin-aseprite');
27
43
  }
28
44
 
29
- catch (error) {
45
+ catch ($error) {
30
46
 
31
- throw error;
47
+ throw $error;
32
48
  }
33
49
 
34
50
  if (typeof aseprite === 'undefined') {
@@ -43,8 +59,11 @@ module.exports = function loader() {
43
59
 
44
60
  const location = path.dirname(file);
45
61
  const filename = path.basename(file, '.aseprite');
46
- const png = filename + '.png';
47
- const json = filename + '.json';
62
+ const sourceTexture = filename + '.png';
63
+ const sourceData = filename + '.json';
64
+
65
+ const trim = (typeof prepare !== 'undefined' && prepare.trim === true) ? ' --trim' : '';
66
+ const sheetType = (typeof prepare !== 'undefined' && ['colums', 'horizontal', 'packed', 'rows', 'vertical'].indexOf(prepare.sheet) !== -1) ? prepare.sheet : 'rows';
48
67
 
49
68
  try {
50
69
 
@@ -54,29 +73,75 @@ module.exports = function loader() {
54
73
 
55
74
  ' && "' + aseprite + '"' +
56
75
  ' --batch "' + file + '"' +
57
- ' --sheet "' + png + '"' +
58
- ' --sheet-type rows' +
76
+ trim +
77
+ ' --sheet "' + sourceTexture + '"' +
78
+ ' --sheet-type ' + sheetType +
59
79
  ' --split-tags' +
60
- ' --data "' + json + '"' +
80
+ ' --data "' + sourceData + '"' +
61
81
  ' --list-tags' +
62
82
  ' --format json-array' +
63
83
  ' --filename-format {tag}#{tagframe001}@{title}.{extension}'
64
84
  );
65
85
 
86
+ if (typeof processing !== 'undefined'
87
+ && Array.isArray(processing.colorswap)
88
+ && processing.colorswap.length > 0) {
89
+
90
+ const bufferSource = fs.readFileSync(path.resolve(location, sourceTexture));
91
+ const image = pngjs.read(bufferSource);
92
+
93
+ const pixels = image.data;
94
+ const height = image.height;
95
+ const width = image.width;
96
+
97
+ processing.colorswap.forEach(({source, target}) => {
98
+
99
+ const [redSource, greenSource, blueSource, alphaSource] = source;
100
+ const [redTarget, greenTarget, blueTarget, alphaTarget] = target;
101
+
102
+ for (let y = 0; y < height; y += 1) {
103
+
104
+ for (let x = 0; x < width; x += 1) {
105
+
106
+ const index = (width * y + x) * 4;
107
+
108
+ const indexRed = index;
109
+ const indexGreen = index + 1;
110
+ const indexBlue = index + 2;
111
+ const indexAlpha = index + 3;
112
+
113
+ if (pixels[indexRed] === redSource
114
+ && pixels[indexGreen] === greenSource
115
+ && pixels[indexBlue] === blueSource
116
+ && pixels[indexAlpha] === alphaSource) {
117
+
118
+ pixels[indexRed] = redTarget;
119
+ pixels[indexGreen] = greenTarget;
120
+ pixels[indexBlue] = blueTarget;
121
+ pixels[indexAlpha] = alphaTarget;
122
+ }
123
+ }
124
+ }
125
+ });
126
+
127
+ const bufferTarget = pngjs.write(image);
128
+ fs.writeFileSync(path.resolve(location, sourceTexture), bufferTarget);
129
+ }
130
+
66
131
  return (
67
132
 
68
133
  'import {Aseprite} from \'@theatrejs/plugin-aseprite\';' +
69
134
 
70
- 'import texture from \'./' + png + '\';' +
71
- 'import data from \'./' + json + '\';' +
135
+ 'import data from \'./' + sourceData + '\';' +
136
+ 'import texture from \'./' + sourceTexture + '\';' +
72
137
 
73
138
  'export default new Aseprite(texture, data);'
74
139
  );
75
140
  }
76
141
 
77
- catch (error) {
142
+ catch ($error) {
78
143
 
79
- throw error;
144
+ throw $error;
80
145
  }
81
146
  };
82
147