feat: multi-pack spritesheets

.eslintrc.cjs

@@ -5,15 +5,17 @@ module.exports = {
  ecmaVersion: 2020,
  sourceType: "module",
  },
+ plugins: ['import'],
  rules: {
  "spaced-comment": [1, "always", { markers: ["/"] }],
  "@typescript-eslint/triple-slash-reference": [1, { path: "always" }],
- "@typescript-eslint/consistent-type-imports": [
- 1,
- { disallowTypeAnnotations: false },
- ],
  "@typescript-eslint/type-annotation-spacing": 1,
  "@typescript-eslint/no-non-null-assertion": 0,
+ "@typescript-eslint/consistent-type-imports":
+ ["error", { disallowTypeAnnotations: false }],
+ "import/consistent-type-specifier-style": ["error", "prefer-top-level"],
+ "import/no-duplicates": ["error"],
+ "camelcase": 0,
  },
  overrides: [
  {

src/core/pipes/PipeSystem.ts

@@ -1,3 +1,4 @@
+import { finalCopyPipe } from './finalCopyPipe.js';
 import { mergePipeOptions } from './mergePipeOptions.js';
 import { multiPipe } from './multiPipe.js';
 
@@ -72,6 +73,15 @@ export class PipeSystem
 
  pipeIndex++;
 
+ // if the asset has the copy tag on it, then the only pipe that should be run is the final copy pipe
+ // this is to ensure that the asset is copied to the output directory without any other processing
+ if (asset.allMetaData.copy && pipe !== finalCopyPipe)
+ {
+ await this._transform(asset, pipeIndex);
+
+ return;
+ }
+
  const options = mergePipeOptions(pipe, asset);
 
  if (options !== false && pipe.transform && pipe.test?.(asset, options))

src/manifest/pixiManifest.ts

@@ -1,10 +1,10 @@
 import fs from 'fs-extra';
-import {
- type Asset,
- type AssetPipe,
- path,
- type PipeSystem,
- stripTags
+import { path, stripTags } from '../core/index.js';
+
+import type {
+ Asset,
+ AssetPipe,
+ PipeSystem, PluginOptions
 } from '../core/index.js';
 
 export interface PixiBundle
@@ -28,7 +28,7 @@ export interface PixiManifestEntry
  };
 }
 
-export interface PixiManifestOptions
+export interface PixiManifestOptions extends PluginOptions<'mIgnore' | 'manifest'>
 {
  output?: string;
  createShortcuts?: boolean;
@@ -38,12 +38,16 @@ export interface PixiManifestOptions
 
 export function pixiManifest(_options: PixiManifestOptions = {}): AssetPipe<PixiManifestOptions>
 {
- const defaultOptions = {
+ const defaultOptions: PixiManifestOptions = {
  output: 'manifest.json',
  createShortcuts: false,
  trimExtensions: false,
  includeMetaData: true,
- ..._options
+ ..._options,
+ tags: {
+ manifest: 'm',
+ mIgnore: 'mIgnore'
+ }
  };
 
  return {
@@ -98,7 +102,7 @@ function collectAssets(
  outputPath = '',
  entryPath = '',
  bundles: PixiBundle[],
- bundle: PixiBundle,
+ bundle: PixiBundle
 )
 {
  if (asset.skip) return;
@@ -107,7 +111,7 @@ function collectAssets(
 
  let localBundle = bundle;
 
- if (asset.metaData.m || asset.metaData.manifest)
+ if (asset.metaData[options.tags!.manifest!])
  {
  localBundle = {
  name: stripTags(asset.filename),
@@ -118,14 +122,17 @@ function collectAssets(
  }
 
  const bundleAssets = localBundle.assets;
-
  const finalAssets = asset.getFinalTransformedChildren();
 
- if (asset.transformChildren.length > 0)
+ if (asset.transformChildren.length > 0 && !asset.inheritedMetaData[options.tags!.mIgnore!])
  {
+ const nonIgnored = finalAssets.filter((finalAsset) => !finalAsset.inheritedMetaData[options.tags!.mIgnore!]);
+
+ if (nonIgnored.length === 0) return;
+
  bundleAssets.push({
  alias: getShortNames(stripTags(path.relative(entryPath, asset.path)), options),
- src: finalAssets
+ src: nonIgnored
  .map((finalAsset) => path.relative(outputPath, finalAsset.path))
  .sort((a, b) => b.localeCompare(a)),
  data: options.includeMetaData ? {

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/spine/spineAtlasCacheBuster.ts

@@ -1,7 +1,9 @@
 import fs from 'fs-extra';
-import { type Asset, type AssetPipe, checkExt, findAssets } from '../core/index.js';
+import { checkExt, findAssets } from '../core/index.js';
 import { AtlasView } from './AtlasView.js';
 
+import type { Asset, AssetPipe } from '../core/index.js';
+
 /**
  * This should be used after the cache buster plugin in the pipes.
  * As it relies on the cache buster plugin to have already cache busted all files.

src/spine/spineAtlasManifestMod.ts

@@ -1,7 +1,9 @@
 import fs from 'fs-extra';
-import { type Asset, type AssetPipe, findAssets, path } from '../core/index.js';
+import { findAssets, path } from '../core/index.js';
 import { AtlasView } from './AtlasView.js';
 
+import type { Asset, AssetPipe } from '../core/index.js';
+
 export interface SpineManifestOptions
 {
  output?: string;

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