Layered backdrop JPG (with alpha mask) v png

[Jonny Shaw]

Hi all, I have a backdrop for a little game that I'd like to split into layers (with some particles between)  nothing major probably 2-3 layers at max. 

The game is for mobile and file sizes have got to be as low as possible.  The backdrop in question is not something that can be tiled or recreated with an atlas so I'll need to split it into a few largish images.  png 32s' tend to be too heavy, 8 bit will probably lose too much colour information. 

I was wondering about instead using a larger jpg (eg the backdrop is 1920x1080)  but maybe extending it to a square 2k, then using that with alpha masks from (colourless pngs) as an alternative (if that makes sense). 

I thought this way I could drop the size of the jpg more without as much degradation as a png would have (& have finer control).  Hoping the colourless pngs wouldn't make as big of a hit essentially just being an alpha map..

Sounds a long way around a small problem, just theorizing atm & wondering if anyone had tried anything similar, noticed any peformance hits using masks v png or even found a nicer alternative?

Cheers for any advice!

[ivan.popelyshev]

Its possible with new texture resource (demo: https://pixijs.io/examples/#/textures/gradient-resource.js)

However i didnt make png+jpeg demo yet. If you are familiar with canvas2d/webgl API's you can just put some hard code there. Otherwise, put a request, you are the first one who needs it in last year or so. The only problem is that my queue is very long and im doing random things from it , not FIFO

I think you can just take two ImageResources, and combine results of canvas2d getImageData's to array that you upload to webgl like BufferResource.

Edited November 11, 2019 by ivan.popelyshev