texture-packer output textures compression

[ddenisyuk]

plugin-texture-packer extended with possibility to compress output image/texture with the compressed methods from plugin-compress.

https://github.com/pixijs/pixijs/pull/10217

[Sparking2]

@ddenisyuk One question, this would allow the packed texture to be exported as WebP?

[ddenisyuk]

@ddenisyuk One question, this would allow the packed texture to be exported as WebP?

yep, you are able define compression config inside texturePacker plugin:

 const assetpack = new AssetPack({
            entry: inputDir,
            output: outputDir,
            plugins: {
                tps: texturePacker({
                    compression: {
                        avif: compression.compress.to.avif,
                        webp: compression.compress.to.webp,
                    },
                    resolutionOptions: {
                        resolutions: { default: 1 },
                    },
                })
            }
        });

https://github.com/pixijs/assetpack/pull/57/files#diff-cd9ba657672197a1492e400c08f4780e573959cf5ef8b2c48c85fb4500d11dc3R52-R55

[Sparking2]

Oh, I'd like to have a feature like that, to have more control over the resulting files.

[drfrankius]

I tried using this. I am able to create the atlases in webp / avif. but in my manifest I get an entry like { "alias": [ "images/popups/popups", "popups.json", "popups" ], "src": [ "images/popups/[email protected]", "images/popups/[email protected]", "images/popups/[email protected]" ], "data": { "tags": { "tps": true } } } When i load the bundle though. it always seems to default to the .png ( the first entry in the src list).

[Zyie]

When i load the bundle though. it always seems to default to the .png ( the first entry in the src list).

You will need to create a custom resolver to allow pixi to understand what format the json is

import type { ResolveURLParser } from 'pixi.js';
import { extensions, ExtensionType, settings } from 'pixi.js';

const knownFormats = ['png', 'webp', 'avif', 'jpg', 'jpeg'];

export const resolveJsonUrl = {
    extension: ExtensionType.ResolveParser,
    test: (value) => settings.RETINA_PREFIX.test(value) && value.endsWith('.json'),
    parse: (value) => {
        console.log('resolveJsonUrl.parse: value = ', value.split('.'));
        const parts = value.split('.');
        let format = 'json';
        if (knownFormats.includes(parts.at(-2))) {
            format = parts.at(-2);
        }
        return {
            resolution: parseFloat(settings.RETINA_PREFIX.exec(value)?.[1] ?? '1'),
            format,
            src: value,
        };
    },
} as ResolveURLParser;

extensions.add(resolveJsonUrl)

[ddenisyuk]

I tried using this. I am able to create the atlases in webp / avif. but in my manifest I get an entry like { "alias": [ "images/popups/popups", "popups.json", "popups" ], "src": [ "images/popups/[email protected]", "images/popups/[email protected]", "images/popups/[email protected]" ], "data": { "tags": { "tps": true } } } When i load the bundle though. it always seems to default to the .png ( the first entry in the src list).

Are you using the latest version of Pixi? 7.4.2 or 8+?

[drfrankius]

I tried using this. I am able to create the atlases in webp / avif. but in my manifest I get an entry like { "alias": [ "images/popups/popups", "popups.json", "popups" ], "src": [ "images/popups/[email protected]", "images/popups/[email protected]", "images/popups/[email protected]" ], "data": { "tags": { "tps": true } } } When i load the bundle though. it always seems to default to the .png ( the first entry in the src list).

Are you using the latest version of Pixi? 7.4.2 or 8+?

I am using pixi 8+.

I have not setup a custom resolver though like Zyie has mentioned.

[ddenisyuk]

You will need to create a custom resolver to allow pixi to understand what format the json is

Shouldn't it be resolved via the built-in resolver: https://github.com/pixijs/pixijs/blob/dev/src/spritesheet/spritesheetAsset.ts#L79-L99

Maybe it's related to https://github.com/pixijs/pixijs/issues/10234#issuecomment-1959041924, right?

UPD: I conducted a small test, and I'm not completely sure if I used it correctly, but here is the link: https://jsfiddle.net/xq0hk1y8/9/. In the DevTools, you can see that it is attempting to load AVIF or WebP formats.

Main part is:

PIXI.extensions.remove(PIXI.resolveJsonUrl);
PIXI.extensions.add(PIXI.spritesheetAsset);

Since both extensions are checked for '.json', and PIXI.resolveJsonUrl is the default with higher priority, I removed it for the test.

[drfrankius]

You will need to create a custom resolver to allow pixi to understand what format the json is

Shouldn't it be resolved via the built-in resolver: https://github.com/pixijs/pixijs/blob/dev/src/spritesheet/spritesheetAsset.ts#L79-L99

Maybe it's related to pixijs/pixijs#10234 (comment), right?

UPD: I conducted a small test, and I'm not completely sure if I used it correctly, but here is the link: https://jsfiddle.net/xq0hk1y8/9/. In the DevTools, you can see that it is attempting to load AVIF or WebP formats.

Main part is:

PIXI.extensions.remove(PIXI.resolveJsonUrl);
PIXI.extensions.add(PIXI.spritesheetAsset);

Since both extensions are checked for '.json', and PIXI.resolveJsonUrl is the default with higher priority, I removed it for the test.

thanks, yes i just tested this on my side to removing PIXI.resolveJsonUrl, and adding PIXI.spritesheetAsset I am able to load my atlases now in avif, webp . Thanks for the help on this. I hope in 1 way or another more texture types will be supported soon for assetpack.

[ddenisyuk]

I hope in 1 way or another more texture types will be supported soon for assetpack.

like this https://github.com/pixijs/assetpack/pull/56/ ?

[ddenisyuk]

@Zyie, could you please clarify if the following usage of PIXI extensions is correct:

PIXI.extensions.remove(PIXI.resolveJsonUrl);
PIXI.extensions.add(PIXI.spritesheetAsset);

And is this still considered an issue?

[Zyie]

@Zyie, could you please clarify if the following usage of PIXI extensions is correct:

PIXI.extensions.remove(PIXI.resolveJsonUrl);
PIXI.extensions.add(PIXI.spritesheetAsset);

This is an interesting one and i think highlights an issue with pixi that i need to fix, but for now yes, doing this is correct

And is this still considered an issue?

Yes this is still an issue for anyone using the pixi.js buncle and not using something like npm

[Zyie]

this has been added in the 1.0 rewrite, thanks for putting together this PR