@remvst/asset-catalog 1.0.4 → 1.1.0

package/lib/generate-image-catalog.js

@@ -11,6 +11,8 @@ const path_1 = require("path");
 const yargs_1 = __importDefault(require("yargs/yargs"));
 const helpers_1 = require("yargs/helpers");
 const tree_1 = require("./tree");
+const bin_pack_1 = __importDefault(require("bin-pack"));
+const canvas_1 = require("canvas");
 function importName(assetDir, png) {
     let importName = png;
     importName = (0, path_1.resolve)(png);
@@ -37,7 +39,7 @@ function generatedTemplateInterface(tree, name, indent = '') {
     generated += indent + '}\n';
     return generated;
 }
-async function generatedCreateCatalogFunction(assetDir, tree) {
+async function generatedCreateCatalogFunction(assetDir, tree, spritesheet) {
     async function rec(tree, indent = '') {
         let generated = '{\n';
         for (const [subname, item] of tree.entries()) {
@@ -49,11 +51,20 @@ async function generatedCreateCatalogFunction(assetDir, tree) {
                 const dimensions = (0, image_size_1.default)(item);
                 const stats = await fs_1.promises.stat(item);
                 const withoutExt = (0, path_1.basename)(subname, (0, path_1.extname)(subname));
+                const spriteData = spritesheet?.get((0, path_1.resolve)(item)) || null;
+                let spriteDataStr = 'null';
+                if (spriteData) {
+                    spriteDataStr = `{
+                        sheet: SpriteSheetPng,
+                        frame: ${JSON.stringify(spriteData)},
+                    }`;
+                }
                 generated += indent + `    ${(0, utils_1.lowerCamelize)(withoutExt)}: createItem({
                     path: ${importName(assetDir, item)},
                     width: ${dimensions.width},
                     height: ${dimensions.height},
                     size: ${stats.size},
+                    spriteData: ${spriteDataStr},
                 }),\n`;
             }
         }
@@ -61,26 +72,83 @@ async function generatedCreateCatalogFunction(assetDir, tree) {
         return generated;
     }
     let generated = '\n';
-    generated += 'export function createTextureCatalog<T>(createItem: (opts: {path: string, width: number, height: number, size: number}) => T): TextureCatalog<T> {\n';
+    generated += 'export function createTextureCatalog<T>(createItem: (opts: {path: string, width: number, height: number, size: number, spriteData: SpriteData}) => T): TextureCatalog<T> {\n';
     generated += `    return ${await rec(tree, '   ')};\n`;
     generated += '}\n';
     return generated;
 }
+async function createSpritesheet(tree, outFile, excludes) {
+    const bins = [];
+    const padding = 1;
+    function generateBins(tree) {
+        itemLoop: for (const item of tree.values()) {
+            if (item instanceof Map) {
+                generateBins(item);
+            }
+            else {
+                for (const exclude of excludes) {
+                    if (item.includes(exclude)) {
+                        continue itemLoop;
+                    }
+                }
+                const dimensions = (0, image_size_1.default)(item);
+                bins.push({
+                    width: dimensions.width + padding * 2,
+                    height: dimensions.height + padding * 2,
+                    path: (0, path_1.resolve)(item),
+                });
+            }
+        }
+    }
+    generateBins(tree);
+    const packed = (0, bin_pack_1.default)(bins);
+    const canvas = (0, canvas_1.createCanvas)(packed.width, packed.height);
+    const ctx = canvas.getContext('2d');
+    for (const item of packed.items) {
+        const image = await (0, canvas_1.loadImage)(item.item.path);
+        ctx.drawImage(image, item.x + padding, item.y + padding);
+    }
+    const buffer = canvas.toBuffer("image/png");
+    await fs_1.promises.writeFile(outFile, buffer);
+    const resultMap = new Map();
+    for (const item of packed.items) {
+        resultMap.set(item.item.path, {
+            x: item.x + padding,
+            y: item.y + padding,
+            width: item.width - padding * 2,
+            height: item.height - padding * 2,
+        });
+    }
+    return resultMap;
+}
 async function main() {
     const argv = await (0, yargs_1.default)((0, helpers_1.hideBin)(process.argv))
         .options({
         'outFile': {
             type: 'string',
-            default: '.',
+            default: 'textures.ts',
             alias: 'o',
             describe: 'Directory to generate the files into',
         },
         'assetDir': {
             type: 'string',
-            default: './package.json',
+            default: '.',
             alias: 'a',
-            describe: 'package.json file to use for the version',
-        }
+            describe: 'Asset directory where all the PNGs are located',
+        },
+        'outSpritesheet': {
+            type: 'string',
+            required: false,
+            alias: 's',
+            describe: 'Path to the generated spritesheet',
+        },
+        'spritesheetExclude': {
+            type: 'string',
+            array: true,
+            required: false,
+            alias: 'x',
+            describe: 'Exclude certain paths from the spritesheet',
+        },
     })
         .argv;
     const texturesRoot = argv.assetDir;
@@ -97,12 +165,29 @@ async function main() {
         const importPath = (0, path_1.relative)((0, path_1.dirname)(argv.outFile), png).replace(/\\/g, '/');
         imports.push(`import ${importName(argv.assetDir, png)} from './${importPath}';`);
     }
+    let spritesheet = null;
+    if (argv.outSpritesheet) {
+        spritesheet = await createSpritesheet(tree, argv.outSpritesheet, argv.spritesheetExclude || []);
+        const importPath = (0, path_1.relative)((0, path_1.dirname)(argv.outFile), (0, path_1.resolve)(argv.outSpritesheet)).replace(/\\/g, '/');
+        imports.push(`import SpriteSheetPng from './${importPath}';`);
+    }
     let generatedFileContent = '';
     generatedFileContent += imports.join('\n');
     generatedFileContent += '\n\n';
+    generatedFileContent += `export interface Rectangle {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }\n`;
+    generatedFileContent += `export interface SpriteData {
+        sheet: string;
+        frame: Rectangle;
+    }\n`;
+    generatedFileContent += '\n\n';
     generatedFileContent += 'export type TextureCatalog<T> = ' + generatedTemplateInterface(tree, 'TextureCatalog');
     generatedFileContent += '\n\n';
-    generatedFileContent += await generatedCreateCatalogFunction(argv.assetDir, tree);
+    generatedFileContent += await generatedCreateCatalogFunction(argv.assetDir, tree, spritesheet);
     await fs_1.promises.writeFile(generatedTs, generatedFileContent);
 }
 main();

package/lib/utils.js

@@ -38,7 +38,7 @@ function categoryPath(assetDir, png) {
     const dir = (0, path_1.dirname)(png);
     const trimmedDir = (0, path_1.relative)(assetDir, dir);
     return trimmedDir
-        .split('/')
+        .split(/[\/\\]/g)
         .map(component => lowerCamelize(component))
         .filter(component => component.length > 0);
 }

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@remvst/asset-catalog",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "",
   "bin": {
     "generate-image-catalog": "./lib/generate-image-catalog.js",
     "generate-sound-catalog": "./lib/generate-sound-catalog.js"
   },
   "scripts": {
-    "build": "rm -rf lib && tsc",
-    "test:images": "ts-node src/generate-image-catalog.ts --assetDir=./testData --outFile=testOut/images.ts",
+    "build": "rm -rf lib && tsc && chmod +x lib/generate-image-catalog.js lib/generate-sound-catalog.js",
+    "test:images": "ts-node src/generate-image-catalog.ts --assetDir=./testData --outFile=testOut/images.ts --outSpritesheet=testOut/spritesheet.png",
     "test:sounds": "ts-node src/generate-sound-catalog.ts --assetDir=./testData/sounds --outFile=testOut/sounds.ts",
     "test": "npm run test:images && npm run test:sounds",
     "prepublishOnly": "npm i && npm run build"
@@ -16,10 +16,13 @@
   "author": "Rémi Vansteelandt",
   "license": "UNLICENSED",
   "dependencies": {
+    "bin-pack": "^1.0.2",
+    "canvas": "^2.11.2",
     "image-size": "^1.0.2",
     "yargs": "^17.7.2"
   },
   "devDependencies": {
+    "@types/bin-pack": "^1.0.3",
     "@types/node": "^18.11.5",
     "@types/yargs": "^17.0.32",
     "ts-node": "^10.9.1",

package/src/generate-image-catalog.ts

@@ -7,6 +7,11 @@ import { resolve, relative, dirname, extname, basename } from 'path';
 import yargs from 'yargs/yargs';
 import { hideBin } from 'yargs/helpers';
 import { Tree, generateTree } from './tree';
+import pack from 'bin-pack';
+import { createCanvas, loadImage } from 'canvas';
+
+type Rectangle = {x: number, y: number, width: number, height: number};
+type SpritesheetResult = Map<string, Rectangle>;
 
 function importName(assetDir: string, png: string): string {
     let importName = png;
@@ -37,7 +42,7 @@ function generatedTemplateInterface(tree: Tree, name: string, indent: string = '
     return generated;
 }
 
-async function generatedCreateCatalogFunction(assetDir: string, tree: Tree): Promise<string> {
+async function generatedCreateCatalogFunction(assetDir: string, tree: Tree, spritesheet: SpritesheetResult | null): Promise<string> {
     async function rec(tree: Tree, indent: string = '') {
         let generated = '{\n';
         for (const [subname, item] of tree.entries()) {
@@ -48,11 +53,21 @@ async function generatedCreateCatalogFunction(assetDir: string, tree: Tree): Pro
                 const dimensions = sizeOf(item);
                 const stats = await fs.stat(item);
                 const withoutExt = basename(subname, extname(subname));
+                const spriteData = spritesheet?.get(resolve(item)) || null;
+                let spriteDataStr = 'null';
+                if (spriteData)  {
+                    spriteDataStr = `{
+                        sheet: SpriteSheetPng,
+                        frame: ${JSON.stringify(spriteData)},
+                    }`;
+                }
+
                 generated += indent + `    ${lowerCamelize(withoutExt)}: createItem({
                     path: ${importName(assetDir, item)},
                     width: ${dimensions.width},
                     height: ${dimensions.height},
                     size: ${stats.size},
+                    spriteData: ${spriteDataStr},
                 }),\n`;
             }
         }
@@ -61,27 +76,93 @@ async function generatedCreateCatalogFunction(assetDir: string, tree: Tree): Pro
     }
 
     let generated = '\n';
-    generated += 'export function createTextureCatalog<T>(createItem: (opts: {path: string, width: number, height: number, size: number}) => T): TextureCatalog<T> {\n';
+    generated += 'export function createTextureCatalog<T>(createItem: (opts: {path: string, width: number, height: number, size: number, spriteData: SpriteData}) => T): TextureCatalog<T> {\n';
     generated += `    return ${await rec(tree, '   ')};\n`;
     generated += '}\n';
     return generated;
 }
 
+async function createSpritesheet(tree: Tree, outFile: string, excludes: string[]): Promise<SpritesheetResult> {
+    const bins: (pack.Bin & {path: string})[] = [];
+
+    const padding = 1;
+
+    function generateBins(tree: Tree) {
+        itemLoop: for (const item of tree.values()) {
+            if (item instanceof Map) {
+                generateBins(item);
+            } else {
+                for (const exclude of excludes) {
+                    if (item.includes(exclude)) {
+                        continue itemLoop;
+                    }
+                }
+
+                const dimensions = sizeOf(item);
+                bins.push({
+                    width: dimensions.width! + padding * 2,
+                    height: dimensions.height! + padding * 2,
+                    path: resolve(item),
+                });
+            }
+        }
+    }
+
+    generateBins(tree);
+
+    const packed = pack(bins);
+
+    const canvas = createCanvas(packed.width, packed.height);
+    const ctx = canvas.getContext('2d');
+
+    for (const item of packed.items) {
+        const image = await loadImage(item.item.path);
+        ctx.drawImage(image, item.x + padding, item.y + padding);
+    }
+
+    const buffer = canvas.toBuffer("image/png");
+    await fs.writeFile(outFile, buffer);
+
+    const resultMap = new Map<string, {x: number, y: number, width: number, height: number}>();
+    for (const item of packed.items) {
+        resultMap.set(item.item.path, {
+            x: item.x + padding,
+            y: item.y + padding,
+            width: item.width - padding * 2,
+            height: item.height - padding * 2,
+        });
+    }
+    return resultMap;
+}
+
 async function main() {
     const argv = await yargs(hideBin(process.argv))
         .options({
-            'outFile': { 
-                type: 'string', 
-                default: '.', 
-                alias: 'o', 
+            'outFile': {
+                type: 'string',
+                default: 'textures.ts',
+                alias: 'o',
                 describe: 'Directory to generate the files into',
             },
-            'assetDir': { 
-                type: 'string', 
-                default: './package.json', 
-                alias: 'a', 
-                describe: 'package.json file to use for the version',
-            }
+            'assetDir': {
+                type: 'string',
+                default: '.',
+                alias: 'a',
+                describe: 'Asset directory where all the PNGs are located',
+            },
+            'outSpritesheet': {
+                type: 'string',
+                required: false,
+                alias: 's',
+                describe: 'Path to the generated spritesheet',
+            },
+            'spritesheetExclude': {
+                type: 'string',
+                array: true,
+                required: false,
+                alias: 'x',
+                describe: 'Exclude certain paths from the spritesheet',
+            },
         })
         .argv;
 
@@ -102,12 +183,31 @@ async function main() {
         imports.push(`import ${importName(argv.assetDir, png)} from './${importPath}';`);
     }
 
+    let spritesheet: SpritesheetResult | null = null;
+    if (argv.outSpritesheet) {
+        spritesheet = await createSpritesheet(tree, argv.outSpritesheet, argv.spritesheetExclude || []);
+
+        const importPath = relative(dirname(argv.outFile), resolve(argv.outSpritesheet)).replace(/\\/g, '/');
+        imports.push(`import SpriteSheetPng from './${importPath}';`);
+    }
+
     let generatedFileContent = '';
     generatedFileContent += imports.join('\n');
     generatedFileContent += '\n\n';
+    generatedFileContent += `export interface Rectangle {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }\n`;
+    generatedFileContent += `export interface SpriteData {
+        sheet: string;
+        frame: Rectangle;
+    }\n`;
+    generatedFileContent += '\n\n';
     generatedFileContent += 'export type TextureCatalog<T> = ' + generatedTemplateInterface(tree, 'TextureCatalog');
     generatedFileContent += '\n\n';
-    generatedFileContent += await generatedCreateCatalogFunction(argv.assetDir, tree);
+    generatedFileContent += await generatedCreateCatalogFunction(argv.assetDir, tree, spritesheet);
 
     await fs.writeFile(generatedTs, generatedFileContent);
 }

package/src/utils.ts

@@ -38,7 +38,7 @@ export function categoryPath(assetDir: string, png: string): string[] {
     const dir = dirname(png);
     const trimmedDir = relative(assetDir, dir);
     return trimmedDir
-        .split('/')
+        .split(/[\/\\]/g)
         .map(component => lowerCamelize(component))
         .filter(component => component.length > 0);
 }

package/tsconfig.json

@@ -5,7 +5,6 @@
         "declaration": true,
         "strict": true,
         "esModuleInterop": true,
-        "allowJs": false,
         "outDir": "./lib",
         "skipLibCheck": true
     },

package/testOut/images.ts

@@ -1,38 +0,0 @@
-import _directions_left_png from './../testData/directions/left.png';
-import _directions_up_png from './../testData/directions/up.png';
-import _fire_png from './../testData/fire.png';
-
-export type TextureCatalog<T> = {
-    directions: {
-        left: T,
-        up: T,
-    }
-    fire: T,
-}
-
-
-
-export function createTextureCatalog<T>(createItem: (opts: {path: string, width: number, height: number, size: number}) => T): TextureCatalog<T> {
-    return {
-       directions: {
-           left: createItem({
-                    path: _directions_left_png,
-                    width: 100,
-                    height: 100,
-                    size: 4424,
-                }),
-           up: createItem({
-                    path: _directions_up_png,
-                    width: 100,
-                    height: 100,
-                    size: 601,
-                }),
-       },
-       fire: createItem({
-                    path: _fire_png,
-                    width: 384,
-                    height: 384,
-                    size: 10908,
-                }),
-   };
-}

package/testOut/sounds.ts

@@ -1,45 +0,0 @@
-import __testData_sounds_click_UI_Click_Metallic_mono_ogg from '../testData/sounds/click/UI_Click_Metallic_mono.ogg';
-import __testData_sounds_click_UI_Click_Metallic_mono_mp3 from '../testData/sounds/click/UI_Click_Metallic_mono.mp3';
-import __testData_sounds_jump_jump2_ogg from '../testData/sounds/jump/jump2.ogg';
-import __testData_sounds_jump_xhGkA9Px_mp3 from '../testData/sounds/jump/xhGkA9Px.mp3';
-
-export class SoundDefinition {
-    constructor(
-        readonly basename: string,
-        readonly files: string[],
-        readonly averageFileSize: number,
-    ) {}
-}
-
-
-export function sound_click(): SoundDefinition[] {
-   return [
-        new SoundDefinition(
-            'UI_Click_Metallic_mono',
-            [
-                __testData_sounds_click_UI_Click_Metallic_mono_ogg,
-                __testData_sounds_click_UI_Click_Metallic_mono_mp3,
-            ],
-            2836,
-        ),
-   ];
-}
-
-export function sound_jump(): SoundDefinition[] {
-   return [
-        new SoundDefinition(
-            'jump2',
-            [
-                __testData_sounds_jump_jump2_ogg,
-            ],
-            5631,
-        ),
-        new SoundDefinition(
-            'xhGkA9Px',
-            [
-                __testData_sounds_jump_xhGkA9Px_mp3,
-            ],
-            2106,
-        ),
-   ];
-}