feat: multi-pack spritesheets (#35)

Co-authored-by: Mat Groves <[email protected]>

src/pixi/index.ts

@@ -12,7 +12,6 @@ import { spineAtlasMipmap } from '../spine/spineAtlasMipmap.js';
 import { texturePacker } from '../texture-packer/texturePacker.js';
 import { texturePackerCacheBuster } from '../texture-packer/texturePackerCacheBuster.js';
 import { texturePackerCompress } from '../texture-packer/texturePackerCompress.js';
-import { texturePackerManifestMod } from '../texture-packer/texturePackerManifestMod.js';
 import { webfont } from '../webfont/webfont.js';
 
 import type { FfmpegOptions } from '../ffmpeg/ffmpeg.js';
@@ -109,7 +108,6 @@ export function pixiAssetPackPipes(config: PixiAssetPack)
 
     pipes.push(
         pixiManifest(manifestOptions),
-        texturePackerManifestMod(manifestOptions),
         spineAtlasManifestMod(manifestOptions),
     );
 

src/texture-packer/index.ts

@@ -1,4 +1,3 @@
 export * from './texturePacker.js';
 export * from './texturePackerCacheBuster.js';
 export * from './texturePackerCompress.js';
-export * from './texturePackerManifestMod.js';

src/texture-packer/packer/createJsons.ts

@@ -15,12 +15,12 @@ export function createJsons(
     width: number,
     height: number,
     options: {
-        textureName: string,
-        resolution: number,
-        textureFormat: 'png' | 'jpg',
-        nameStyle: 'short' | 'relative',
-        removeFileExtension: boolean
-    }
+        textureName: string;
+        resolution: number;
+        textureFormat: 'png' | 'jpg';
+        nameStyle: 'short' | 'relative';
+        removeFileExtension: boolean;
+    },
 )
 {
     const bins = packer.bins;
@@ -32,7 +32,7 @@ export function createJsons(
         const bin = bins[i];
 
         const json: any = {
-            frames: {}
+            frames: {},
         };
 
         for (let j = 0; j < bin.rects.length; j++)
@@ -44,52 +44,52 @@ export function createJsons(
                     x: rect.x,
                     y: rect.y,
                     w: rect.width,
-                    h: rect.height
+                    h: rect.height,
                 },
                 rotated: rect.rot,
                 trimmed: rect.textureData.trimmed,
                 spriteSourceSize: {
                     x: rect.textureData.trimOffsetLeft,
                     y: rect.textureData.trimOffsetTop,
                     w: rect.width,
-                    h: rect.height
+                    h: rect.height,
                 },
                 sourceSize: {
                     w: rect.textureData.originalWidth,
-                    h: rect.textureData.originalHeight
-                }
+                    h: rect.textureData.originalHeight,
+                },
             };
         }
 
         json.meta = {
             app: 'http://github.com/pixijs/assetpack',
             version: '1.0',
-            image: createName(
-                options.textureName,
-                i,
-                bins.length !== 1,
-                options.resolution,
-                options.textureFormat
-            ),
+            image: createName(options.textureName, i, bins.length !== 1, options.resolution, options.textureFormat),
             format: 'RGBA8888',
             size: {
                 w: width,
-                h: height
+                h: height,
             },
-            scale: options.resolution
+            scale: options.resolution,
+            related_multi_packs: null,
         };
 
         jsons.push({
-            name: createName(
-                options.textureName,
-                i,
-                bins.length !== 1,
-                options.resolution,
-                'json'
-            ),
-            json
+            name: createName(options.textureName, i, bins.length !== 1, options.resolution, 'json'),
+            json,
         });
     }
 
+    // before we leave, lets connect all the jsons to the first json..
+
+    const firstJsonMeta = jsons[0].json.meta;
+
+    firstJsonMeta.related_multi_packs = [];
+
+    for (let i = 1; i < jsons.length; i++)
+    {
+        firstJsonMeta.related_multi_packs.push(jsons[i].name);
+    }
+
     return jsons;
 }

src/texture-packer/texturePacker.ts

@@ -159,6 +159,7 @@ export function texturePacker(_options: TexturePackerOptions = {}): AssetPipe<Te
                         const textureAsset = createNewAssetAt(asset, name);
 
                         textureAsset.buffer = buffer;
+                        textureAsset.metaData.mIgnore = true;
 
                         const { json, name: jsonName } = out.jsons[i];
 

src/texture-packer/texturePackerCacheBuster.ts

@@ -54,12 +54,13 @@ export function texturePackerCacheBuster(
             // to the output folder.
             const jsonAssets = textureJsonFilesToFix.map((asset) => asset.getFinalTransformedChildren()[0]);
 
-            jsonAssets.forEach((jsonAsset) =>
+            // loop through all the json files back to front
+            for (let i = jsonAssets.length - 1; i >= 0; i--)
             {
                 // we are going to replace the textures in the atlas file with the new cache busted textures
                 // as we do this, the hash of the atlas file will change, so we need to update the path
                 // and also remove the original file.
-
+                const jsonAsset = jsonAssets[i];
                 const originalHash = jsonAsset.hash;
                 const originalPath = jsonAsset.path;
 
@@ -75,15 +76,24 @@ export function texturePackerCacheBuster(
 
                 json.meta.image = cacheBustedTexture.filename;
 
-                jsonAsset.buffer = Buffer.from(JSON.stringify(json));
+                if (json.meta.related_multi_packs)
+                {
+                    json.meta.related_multi_packs = (json.meta.related_multi_packs as string[]).map((pack) =>
+                    {
+                        const foundAssets = findAssets((asset) =>
+                            asset.filename === pack, asset, true);
 
-                jsonAsset.path = jsonAsset.path.replace(originalHash, jsonAsset.hash);
+                        return foundAssets[0].getFinalTransformedChildren()[0].filename;
+                    });
+                }
 
+                jsonAsset.buffer = Buffer.from(JSON.stringify(json));
+                jsonAsset.path = jsonAsset.path.replace(originalHash, jsonAsset.hash);
                 fs.removeSync(originalPath);
 
                 // rewrite..
                 fs.writeFileSync(jsonAsset.path, jsonAsset.buffer);
-            });
+            }
 
             textureJsonFilesToFix.length = 0;
         }

src/texture-packer/texturePackerCompress.ts

@@ -5,7 +5,9 @@ import type { CompressOptions } from '../image/compress.js';
 
 export type TexturePackerCompressOptions = PluginOptions<'tps' | 'nc'> & Omit<CompressOptions, 'jpg'>;
 
-export function texturePackerCompress(_options?: TexturePackerCompressOptions): AssetPipe<TexturePackerCompressOptions>
+export function texturePackerCompress(
+    _options?: TexturePackerCompressOptions,
+): AssetPipe<TexturePackerCompressOptions>
 {
     const defaultOptions = {
         ...{
@@ -17,26 +19,28 @@ export function texturePackerCompress(_options?: TexturePackerCompressOptions):
         tags: {
             tps: 'tps',
             nc: 'nc',
-            ..._options?.tags
-        }
+            ..._options?.tags,
+        },
     };
 
     return {
         name: 'texture-packer-compress',
         defaultOptions,
         test(asset: Asset, options)
         {
-            return (asset.allMetaData[options.tags.tps]
+            return (
+                asset.allMetaData[options.tags.tps]
                 && !asset.allMetaData[options.tags.nc]
-                && checkExt(asset.path, '.json'));
+                && checkExt(asset.path, '.json')
+            );
         },
         async transform(asset: Asset, options)
         {
             const formats = [];
 
-            if (options.avif)formats.push('avif');
-            if (options.png)formats.push('png');
-            if (options.webp)formats.push('webp');
+            if (options.avif) formats.push('avif');
+            if (options.png) formats.push('png');
+            if (options.webp) formats.push('webp');
 
             const json = JSON.parse(asset.buffer.toString());
 
@@ -49,8 +53,21 @@ export function texturePackerCompress(_options?: TexturePackerCompressOptions):
                 json.meta.image = swapExt(json.meta.image, extension);
 
                 const newAsset = createNewAssetAt(asset, newFileName);
+                const newJson = JSON.parse(JSON.stringify(json));
+
+                if (newJson.meta.related_multi_packs)
+                {
+                    newJson.meta.related_multi_packs = (newJson.meta.related_multi_packs as string[]).map((pack) =>
+                        swapExt(pack, `${extension}.json`),
+                    );
+                }
+
+                newAsset.buffer = Buffer.from(JSON.stringify(newJson, null, 2));
 
-                newAsset.buffer = Buffer.from(JSON.stringify(json, null, 2));
+                if (!newJson.meta.related_multi_packs)
+                {
+                    newAsset.metaData.mIgnore = true;
+                }
 
                 return newAsset;
             });