SVG Spritesheet for PIXI

[Pufferoon]

Hey folks!

 

I use a large number of vector image sprites in a game. At the moment I have to export them all from Illustrator as PNG's, TexturePacker those into a large spritesheet, and then load that with the PIXI loader.

I'd prefer to download an SVG rather than a PNG, if possible, to keep download size down, and so that I could theoretically draw the sprites at any scale without pixelation or interpolation (such as I would get if I had a small PNG stretched to a large scale).

I did a big investigation into this in the past, and it turned out to be rather a pain. I grouped my sprites very carefully in Illustrator with named layers, so that those names became group IDs in the output SVG. Then clientside I extracted each group into its own SVG element, put that into a blob URL, and then loaded that with Pixi loader  - which naturally doesn't work in a bunch of IE versions, and wasn't particularly fast in real browsers like FF or Chrome.

 

Is there a better/easier way that I'm, not thinking of?

[ivan.popelyshev]

Just last week I made runtime atlas: https://github.com/gameofbombs/pixi-super-atlas

It is still work in progress, and has only one "demo": https://github.com/gameofbombs/pixi-super-atlas/blob/master/test/checkpack.ts

The idea is to swap all PIXI.Texture for regions:

regionTexture = atlas.add(oldTexture);

 

When you added all the textures, you can check whether it needs repack (n most cases, its true)

if (atlas.tree.failed.length > 0) {
   var pack = atlas.repack();
   pack.apply();
}

You also can specify mipmaps:

let atlas = PIXI.atlas.SuperAtlas.create({width: 1024, height: 1024, mipLevels: 4}); // 2^4 = 16 scale maximum

To make better mips (because you have SVG!!!), you can try to make different mip algorithm : https://github.com/gameofbombs/pixi-super-atlas/blob/master/src/hacks/BaseTexture.ts#L26 , just hack this method.

I can help you if something doesn't work , just send me the demo.

[ivan.popelyshev]

> Then clientside I extracted each group into its own SVG element, put that into a blob URL, and then loaded that with Pixi loader  - which naturally doesn't work in a bunch of IE versions, and wasn't particularly fast in real browsers like FF or Chrome.

Can't help with that though  The solution i posted is about making atlas to speed-up rendering, not the loading.