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

[gabrielecirulli]

This PR makes it so that texture-packer includes the image format of the underlying spritesheet within the file name of the spritesheet's json file.

For example, if it would previously output my-spritesheet@2x.json, it now outputs my-spritesheet@2x.png.json

Rationale

Including the underlying image format as part of a json spritesheet's filename appears to be required by convention in Pixi's spritesheet loader (link to Pixi.js documentation).

I ran into an issue where I was generating spritesheets with 3 different resolutions (e.g. @1x, @2x, @3x) but when loading them into Pixi, all resolutions would be ignored and the first spritesheet in the list (regardless of what resolution it was) would be loaded.

After debugging the execution of both the Pixi loader and AssetPack, I determined the source of the problem: Pixi's loader does not attempt to parse the file names a spritesheet to extract metadata such as resolution if the spritesheet JSON file's filename does not adhere to the following filename convention: my-spritesheet{resolution}.{imageFormat}.json

Solution

I changed AssetPack's texture-packer to include the underlying texture file format in the spritesheet JSON file's filename.

I cannot see a reason why it should not be there, and I think the lack of it was by accidental omission rather than intentional. As it currently stands, spritesheets generated with AssetPack cannot be loaded correctly by Pixi when they contain multiple resolutions.

@Zyie please consider merging this PR or let me know how I could improve it.

[ddenisyuk]

@Zyie is there any chance this PR will be merged?
This is the prerequisite for compressing sprite sheet images (webp, avif, ...), as described here: https://pixijs.download/dev/docs/PIXI.Assets.html

[gabrielecirulli]

Check this comment for a solution pixijs/pixijs#10108 (comment)

[ddenisyuk]

The purpose for which I want it differs from yours. I aim to obtain it for the capability to generate multiple formats of the atlas image (png, webp, avif, astc, etc.), allowing Pixi to select(resolve) the best one supported by the client.
Like:
my-spritesheet@2x.png.json
my-spritesheet@2x.webp.json
my-spritesheet@2x.avif.json
my-spritesheet@2x.astc.json

pixijs/pixijs#10193
pixijs/pixijs#10217

[gabrielecirulli]

In general you should be able to write your own resolver and supply it as an extension to Pixi, like in the link I provided.