Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: texture-packer should include format of image file in spritesheet json file's name #51

Closed
wants to merge 1 commit into from
Closed

fix: texture-packer should include format of image file in spritesheet json file's name #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions packages/manifest/test/Manifest.test.ts
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading