From 50337ec80d6d87f0189181f8f87b38b7c5889d43 Mon Sep 17 00:00:00 2001 From: Gabriele Cirulli <886011+gabrielecirulli@users.noreply.github.com> Date: Mon, 25 Dec 2023 00:46:59 +0100 Subject: [PATCH] fix: include format of image file in spritesheet json file's name --- packages/manifest/test/Manifest.test.ts | 8 ++--- packages/texture-packer/src/index.ts | 25 ++++++++++++---- packages/texture-packer/test/TP.test.ts | 40 ++++++++++++------------- 3 files changed, 44 insertions(+), 29 deletions(-) diff --git a/packages/manifest/test/Manifest.test.ts b/packages/manifest/test/Manifest.test.ts index 3bf7f2f9..ac79e617 100644 --- a/packages/manifest/test/Manifest.test.ts +++ b/packages/manifest/test/Manifest.test.ts @@ -166,8 +166,8 @@ describe('Manifest', () => { alias: ['bundle/tps/tps-1.json'], src: [ - 'bundle/tps/tps-1@1x.json', - 'bundle/tps/tps-1@0.5x.json', + 'bundle/tps/tps-1@1x.png.json', + 'bundle/tps/tps-1@0.5x.png.json', ], data: { tags: { @@ -179,8 +179,8 @@ describe('Manifest', () => { alias: ['bundle/tps/tps-0.json'], src: [ - 'bundle/tps/tps-0@1x.json', - 'bundle/tps/tps-0@0.5x.json', + 'bundle/tps/tps-0@1x.png.json', + 'bundle/tps/tps-0@0.5x.png.json', ], data: { tags: { diff --git a/packages/texture-packer/src/index.ts b/packages/texture-packer/src/index.ts index 13a37e55..6f9ce4e0 100644 --- a/packages/texture-packer/src/index.ts +++ b/packages/texture-packer/src/index.ts @@ -120,6 +120,7 @@ export function texturePacker(options?: Partial): Plugin): Plug } type ReturnedPromiseResolvedType = T extends (...args: any[]) => Promise ? R : never; +const FILE_EXTENSION_RE = /(\.[\w\d_-]+)$/i; + interface ProcessOptions { inputDir: string; outputDir: string; template: string; + textureFormat: TextureFormat; scale: number; originalScale: number; processor: Processor; @@ -194,14 +198,14 @@ async function processTPSFiles(files: ReturnedPromiseResolvedType cool/image.png if (outputFile.split('.').pop() === 'json') { + // Spritesheet JSON files for Pixi must follow the naming + // `my-spritesheet{resolution}.{imageFormat}.json` by convention. We + // must add the imageFormat to outputFile. + outputFile = outputFile.replace( + FILE_EXTENSION_RE, + `.${options.textureFormat}$1` + ); + const json = JSON.parse(item.buffer.toString('utf8')); - const newFrames: {[x: string]: any} = {}; + const newFrames: { [x: string]: any } = {}; for (const i in json.frames) { @@ -223,7 +235,10 @@ async function processTPSFiles(files: ReturnedPromiseResolvedType await assetpack.run(); - const sheet1 = readJSONSync(`${outputDir}/sprites/sprites@1x.json`); + const sheet1 = readJSONSync(`${outputDir}/sprites/sprites@1x.png.json`); const expectedSize = { w: 560, @@ -66,7 +66,7 @@ describe('Texture Packer', () => expect(sheet1.meta.size).toEqual(expectedSize); - const sheet2Exists = existsSync(`${outputDir}/sprites/sprites-1@1x.json`); + const sheet2Exists = existsSync(`${outputDir}/sprites/sprites-1@1x.png.json`); expect(sheet2Exists).toBe(false); }); @@ -95,8 +95,8 @@ describe('Texture Packer', () => await assetpack.run(); - const sheet1 = readJSONSync(`${outputDir}/sprites/sprites-0@1x.json`); - const sheet2 = readJSONSync(`${outputDir}/sprites/sprites-1@1x.json`); + const sheet1 = readJSONSync(`${outputDir}/sprites/sprites-0@1x.png.json`); + const sheet2 = readJSONSync(`${outputDir}/sprites/sprites-1@1x.png.json`); expect(sheet1.meta.size.w).toBeLessThanOrEqual(size); expect(sheet1.meta.size.h).toBeLessThanOrEqual(size); @@ -130,7 +130,7 @@ describe('Texture Packer', () => await assetpack.run(); - const json = existsSync(`${outputDir}/sprites/something@1x.json`); + const json = existsSync(`${outputDir}/sprites/something@1x.png.json`); const png = existsSync(`${outputDir}/sprites/something@1x.png`); expect(png).toBe(true); @@ -159,16 +159,16 @@ describe('Texture Packer', () => await assetpack.run(); - expect(existsSync(`${outputDir}/sprites/sprites@0.5x.json`)).toBe(true); - expect(existsSync(`${outputDir}/sprites/sprites@1x.json`)).toBe(true); - expect(existsSync(`${outputDir}/sprites/sprites@2x.json`)).toBe(true); + expect(existsSync(`${outputDir}/sprites/sprites@0.5x.png.json`)).toBe(true); + expect(existsSync(`${outputDir}/sprites/sprites@1x.png.json`)).toBe(true); + expect(existsSync(`${outputDir}/sprites/sprites@2x.png.json`)).toBe(true); expect(existsSync(`${outputDir}/sprites/sprites@0.5x.png`)).toBe(true); expect(existsSync(`${outputDir}/sprites/sprites@1x.png`)).toBe(true); expect(existsSync(`${outputDir}/sprites/sprites@2x.png`)).toBe(true); - const sheet1Data = readJSONSync(`${outputDir}/sprites/sprites@1x.json`); - const sheet2Data = readJSONSync(`${outputDir}/sprites/sprites@2x.json`); - const sheet3Data = readJSONSync(`${outputDir}/sprites/sprites@0.5x.json`); + const sheet1Data = readJSONSync(`${outputDir}/sprites/sprites@1x.png.json`); + const sheet2Data = readJSONSync(`${outputDir}/sprites/sprites@2x.png.json`); + const sheet3Data = readJSONSync(`${outputDir}/sprites/sprites@0.5x.png.json`); expect(sheet2Data.frames['sprite0.png'].frame).toEqual({ x: 2, y: 2, w: 136, h: 196 }); expect(sheet2Data.meta.size).toEqual({ w: 560, h: 480 }); @@ -241,7 +241,7 @@ describe('Texture Packer', () => await assetpack.run(); - const sheet1 = readJSONSync(`${outputDir}/sprites/sprites@1x.json`); + const sheet1 = readJSONSync(`${outputDir}/sprites/sprites@1x.png.json`); const expectedSize = { w: 560, @@ -250,7 +250,7 @@ describe('Texture Packer', () => expect(sheet1.meta.size).toEqual(expectedSize); - const sheet2Exists = existsSync(`${outputDir}/sprites/sprites-1@1x.json`); + const sheet2Exists = existsSync(`${outputDir}/sprites/sprites-1@1x.png.json`); expect(sheet2Exists).toBe(false); }); @@ -273,8 +273,8 @@ describe('Texture Packer', () => await assetpack.run(); - const sheet1 = existsSync(`${outputDir}/sprites/sprites@1x.json`); - const sheet2 = existsSync(`${outputDir}/sprites/sprites@0.5x.json`); + const sheet1 = existsSync(`${outputDir}/sprites/sprites@1x.png.json`); + const sheet2 = existsSync(`${outputDir}/sprites/sprites@0.5x.png.json`); expect(sheet1).toBe(true); expect(sheet2).toBe(true); @@ -285,7 +285,7 @@ describe('Texture Packer', () => h: 480 / 2, }; - const sheetJson = readJSONSync(`${outputDir}/sprites/sprites@0.5x.json`); + const sheetJson = readJSONSync(`${outputDir}/sprites/sprites@0.5x.png.json`); expect(sheetJson.meta.size).toEqual(expectedSize); }); @@ -336,9 +336,9 @@ describe('Texture Packer', () => await assetpack.run(); - const sheet1 = existsSync(`${outputDir}/sprites/sprites/sprites@1x.json`); - const sheet2 = existsSync(`${outputDir}/sprites/sprites/sprites@0.5x.json`); - const sheet3 = existsSync(`${outputDir}/sprites/sprites/sprites@2x.json`); + const sheet1 = existsSync(`${outputDir}/sprites/sprites/sprites@1x.png.json`); + const sheet2 = existsSync(`${outputDir}/sprites/sprites/sprites@0.5x.png.json`); + const sheet3 = existsSync(`${outputDir}/sprites/sprites/sprites@2x.png.json`); expect(sheet1).toBe(true); expect(sheet2).toBe(false); @@ -385,7 +385,7 @@ describe('Texture Packer', () => await assetpack.run(); - const sheet1 = existsSync(`${outputDir}/sprites/sprites@1x.json`); + const sheet1 = existsSync(`${outputDir}/sprites/sprites@1x.jpg.json`); const sheet2 = existsSync(`${outputDir}/sprites/sprites@1x.jpg`); const sheet3 = existsSync(`${outputDir}/sprites/sprites@1x.png`);