How to preprocess content in the loader?

[softshape]

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.

[ivan.popelyshev]

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.

[softshape]

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.

[Exca]

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.

[ivan.popelyshev]

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 October 24, 2019 by ivan.popelyshev

[softshape]

How to deal with SVG source inside the parser code? Say I've got SVG as a string, how to assign it to res ?

[ivan.popelyshev]

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.

[softshape]

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 October 29, 2019 by softshape

[ivan.popelyshev]

... 

Its good that you found it. I gave you this line previously: 

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