feat: multi-pack spritesheets

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;
  });