Jump to content

Layered backdrop JPG (with alpha mask) v png

Jonny Shaw

Recommended Posts

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!

Link to comment
Share on other sites

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 by ivan.popelyshev
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.

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.


  • Recently Browsing   0 members

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