Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

SVG Spritesheet for PIXI


Pufferoon
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...