Skip to content

Commit

Permalink
fix: include format of image file in spritesheet json file's name
Browse files Browse the repository at this point in the history
  • Loading branch information
@gabrielecirulli
gabrielecirulli committed Dec 25, 2023
1 parent 38e872a commit 50337ec
Show file tree
Hide file tree
Showing 3 changed files with 44 additions and 29 deletions.
8 changes: 4 additions & 4 deletions packages/manifest/test/Manifest.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,8 +166,8 @@ describe('Manifest', () =>
{
alias: ['bundle/tps/tps-1.json'],
src: [
'bundle/tps/[email protected]',
'bundle/tps/[email protected]',
'bundle/tps/tps-1@1x.png.json',
'bundle/tps/[email protected].png.json',
],
data: {
tags: {
Expand All @@ -179,8 +179,8 @@ describe('Manifest', () =>
{
alias: ['bundle/tps/tps-0.json'],
src: [
'bundle/tps/[email protected]',
'bundle/tps/[email protected]',
'bundle/tps/tps-0@1x.png.json',
'bundle/tps/[email protected].png.json',
],
data: {
tags: {
Expand Down
25 changes: 20 additions & 5 deletions packages/texture-packer/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,7 @@ export function texturePacker(options?: Partial<TexturePackerOptions>): Plugin<T
inputDir: tree.path,
outputDir: processor.inputToOutput(tree.path),
template,
textureFormat: transformOptions.texturePacker.textureFormat,
scale,
originalScale: origScale,
processor,
Expand Down Expand Up @@ -178,11 +179,14 @@ export function pixiTexturePacker(options?: Partial<TexturePackerOptions>): Plug
}
type ReturnedPromiseResolvedType<T> = T extends (...args: any[]) => Promise<infer R> ? 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;
Expand All @@ -194,14 +198,14 @@ async function processTPSFiles(files: ReturnedPromiseResolvedType<typeof packAsy
for (const item of files)
{
// create a name that injects a template eg _mip
const templateName = item.name.replace(/(\.[\w\d_-]+)$/i, `${options.template}$1`);
const templateName = item.name.replace(FILE_EXTENSION_RE, `${options.template}$1`);
const outputDir = options.outputDir;

// make sure the folder we save to exists
fs.ensureDirSync(outputDir);

// this is where we save the files
const outputFile = path.joinSafe(outputDir, templateName);
let outputFile = path.joinSafe(outputDir, templateName);

// so one thing FREE texture packer does different is that it either puts the full paths in
// or the image name.
Expand All @@ -210,9 +214,17 @@ async function processTPSFiles(files: ReturnedPromiseResolvedType<typeof packAsy
// eg raw-assets/image/icons{tps}/cool/image.png -> 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)
{
Expand All @@ -223,15 +235,18 @@ async function processTPSFiles(files: ReturnedPromiseResolvedType<typeof packAsy
}

json.frames = newFrames;
json.meta.image = json.meta.image.replace(/(\.[\w\d_-]+)$/i, `${options.template}$1`);
json.meta.image = json.meta.image.replace(
FILE_EXTENSION_RE,
`${options.template}$1`
);
json.meta.scale *= options.originalScale;

options.processor.saveToOutput({
tree: undefined as any,
outputOptions: {
outputPathOverride: outputFile,
outputData: JSON.stringify(json),
}
},
});
}
else
Expand Down
40 changes: 20 additions & 20 deletions packages/texture-packer/test/TP.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ describe('Texture Packer', () =>

await assetpack.run();

const sheet1 = readJSONSync(`${outputDir}/sprites/[email protected]`);
const sheet1 = readJSONSync(`${outputDir}/sprites/sprites@1x.png.json`);

const expectedSize = {
w: 560,
Expand All @@ -66,7 +66,7 @@ describe('Texture Packer', () =>

expect(sheet1.meta.size).toEqual(expectedSize);

const sheet2Exists = existsSync(`${outputDir}/sprites/[email protected]`);
const sheet2Exists = existsSync(`${outputDir}/sprites/sprites-1@1x.png.json`);

expect(sheet2Exists).toBe(false);
});
Expand Down Expand Up @@ -95,8 +95,8 @@ describe('Texture Packer', () =>

await assetpack.run();

const sheet1 = readJSONSync(`${outputDir}/sprites/[email protected]`);
const sheet2 = readJSONSync(`${outputDir}/sprites/[email protected]`);
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);
Expand Down Expand Up @@ -130,7 +130,7 @@ describe('Texture Packer', () =>

await assetpack.run();

const json = existsSync(`${outputDir}/sprites/[email protected]`);
const json = existsSync(`${outputDir}/sprites/something@1x.png.json`);
const png = existsSync(`${outputDir}/sprites/[email protected]`);

expect(png).toBe(true);
Expand Down Expand Up @@ -159,16 +159,16 @@ describe('Texture Packer', () =>

await assetpack.run();

expect(existsSync(`${outputDir}/sprites/[email protected]`)).toBe(true);
expect(existsSync(`${outputDir}/sprites/[email protected]`)).toBe(true);
expect(existsSync(`${outputDir}/sprites/[email protected]`)).toBe(true);
expect(existsSync(`${outputDir}/sprites/[email protected].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/[email protected]`)).toBe(true);
expect(existsSync(`${outputDir}/sprites/[email protected]`)).toBe(true);
expect(existsSync(`${outputDir}/sprites/[email protected]`)).toBe(true);

const sheet1Data = readJSONSync(`${outputDir}/sprites/[email protected]`);
const sheet2Data = readJSONSync(`${outputDir}/sprites/[email protected]`);
const sheet3Data = readJSONSync(`${outputDir}/sprites/[email protected]`);
const sheet1Data = readJSONSync(`${outputDir}/sprites/sprites@1x.png.json`);
const sheet2Data = readJSONSync(`${outputDir}/sprites/sprites@2x.png.json`);
const sheet3Data = readJSONSync(`${outputDir}/sprites/[email protected].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 });
Expand Down Expand Up @@ -241,7 +241,7 @@ describe('Texture Packer', () =>

await assetpack.run();

const sheet1 = readJSONSync(`${outputDir}/sprites/[email protected]`);
const sheet1 = readJSONSync(`${outputDir}/sprites/sprites@1x.png.json`);

const expectedSize = {
w: 560,
Expand All @@ -250,7 +250,7 @@ describe('Texture Packer', () =>

expect(sheet1.meta.size).toEqual(expectedSize);

const sheet2Exists = existsSync(`${outputDir}/sprites/[email protected]`);
const sheet2Exists = existsSync(`${outputDir}/sprites/sprites-1@1x.png.json`);

expect(sheet2Exists).toBe(false);
});
Expand All @@ -273,8 +273,8 @@ describe('Texture Packer', () =>

await assetpack.run();

const sheet1 = existsSync(`${outputDir}/sprites/[email protected]`);
const sheet2 = existsSync(`${outputDir}/sprites/[email protected]`);
const sheet1 = existsSync(`${outputDir}/sprites/sprites@1x.png.json`);
const sheet2 = existsSync(`${outputDir}/sprites/[email protected].png.json`);

expect(sheet1).toBe(true);
expect(sheet2).toBe(true);
Expand All @@ -285,7 +285,7 @@ describe('Texture Packer', () =>
h: 480 / 2,
};

const sheetJson = readJSONSync(`${outputDir}/sprites/[email protected]`);
const sheetJson = readJSONSync(`${outputDir}/sprites/[email protected].png.json`);

expect(sheetJson.meta.size).toEqual(expectedSize);
});
Expand Down Expand Up @@ -336,9 +336,9 @@ describe('Texture Packer', () =>

await assetpack.run();

const sheet1 = existsSync(`${outputDir}/sprites/sprites/[email protected]`);
const sheet2 = existsSync(`${outputDir}/sprites/sprites/[email protected]`);
const sheet3 = existsSync(`${outputDir}/sprites/sprites/[email protected]`);
const sheet1 = existsSync(`${outputDir}/sprites/sprites/sprites@1x.png.json`);
const sheet2 = existsSync(`${outputDir}/sprites/sprites/[email protected].png.json`);
const sheet3 = existsSync(`${outputDir}/sprites/sprites/sprites@2x.png.json`);

expect(sheet1).toBe(true);
expect(sheet2).toBe(false);
Expand Down Expand Up @@ -385,7 +385,7 @@ describe('Texture Packer', () =>

await assetpack.run();

const sheet1 = existsSync(`${outputDir}/sprites/[email protected]`);
const sheet1 = existsSync(`${outputDir}/sprites/sprites@1x.jpg.json`);
const sheet2 = existsSync(`${outputDir}/sprites/[email protected]`);
const sheet3 = existsSync(`${outputDir}/sprites/[email protected]`);

Expand Down

0 comments on commit 50337ec

Please sign in to comment.