softshape

How to preprocess content in the loader?

Recommended Posts

Hi all,

I'm trying to add SVGZ (gzipped SVG) support to Pixi loader in our game app. Pixi 5 has loader plugins but we have to use Pixi 4.8 so far. Is it possible to deflate loaded SVGZ images before Pixi parses them as SVG ? I've found some hints about afterMiddleware event and after() method but still can't figure it out.

Share this post


Link to post
Share on other sites

Yes, its possible and its easy. However I'm too busy to write the demo for you.

https://github.com/englercj/resource-loader

https://github.com/pixijs/pixi.js/blob/dev/packages/loaders/src/Loader.js#L153

https://github.com/pixijs/pixi.js/blob/dev/packages/loaders/src/TextureLoader.js#L21

Just copy textureLoader code, make adjustments. "type" wont be Image for you.

From another point of view, Why do you use gzip in your app? Isn't it better to add static-gzip on your web-server? Its browser job to unzip svg-s.

Share this post


Link to post
Share on other sites

Sure it's easier to setup the server right and forget about it - but in this particular case we have no control over Apache on production.

Isn't Loader.registerPlugin specific for Pixi 5? I'm looking for solution for Pixi 4.8.

Share this post


Link to post
Share on other sites

You could maybe do something like this:

let parser = function(res, next){
  if(detect if it's a zipped asset)
  {
    deflat
  }
  next();
}

loader.use(parser)

Not 100% sure it will work as I havent encountered exactly like that scenario.

Share this post


Link to post
Share on other sites
2 hours ago, softshape said:

Sure it's easier to setup the server right and forget about it - but in this particular case we have no control over Apache on production.

Isn't Loader.registerPlugin specific for Pixi 5? I'm looking for solution for Pixi 4.8.

look in v4.x source , its something like "loader.use(middleware)". Just look how textureLoader is implemented, do the same. Except your type isn't "image" and maybe you have to specify XHR_TYPE as buffer for that extension. Relevant code from a plugin:

https://github.com/pixijs/pixi-spine/blob/pixi4-spine3.8/src/loaders.ts#L28

https://github.com/pixijs/pixi-spine/blob/pixi4-spine3.8/src/loaders.ts#L196

Edited by ivan.popelyshev

Share this post


Link to post
Share on other sites

First - try it without loader. You have to make svg element and call context2d.drawImage on it. 

For v4 I recommend only do it through Texture.fromCanvas(canvasWhereSVGWasDrawn) , everything else is up to you and you alone. If you want help to put it through loader, well, use pixi-v5. Its actually medium difficulty task, not hard one, you can do it alone in v4 if you just look inside pixijs sources.

Share this post


Link to post
Share on other sites

Almost solved this issue, but found that if the file is loaded as text with type PIXI.loaders.Resource.LOAD_TYPE.XHR, it won't work well with gunzip functions. Is there any PIXI.loaders.Resource.LOAD_TYPE that would make Pixi to load resource as arraybuffer

UPDATED: found this function -

 PIXI.loaders.Resource.setExtensionXhrType('svgz', PIXI.loaders.Resource.XHR_RESPONSE_TYPE.BUFFER);

After that, in svg.xhr.response we're getting the correct data to work with inflate.

Edited by softshape

Share this post


Link to post
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...

  • Recently Browsing   0 members

    No registered users viewing this page.