search

paperize / paperize

a totally free web tool for generating board games from spreadsheets
http://paperize.io
GNU General Public License v3.0
44 stars 3 forks source link

Strange Transparency Issues #145

Open Sarcastic-Robot opened 2 years ago

Sarcastic-Robot commented 2 years ago

Describe the bug Paperize is processing transparency strangely. With Transparent PNGs the transparency displays correct, but seems to cause a strange isometric shift happen to the rest vector image's coloring. With Transparent GIFs the transparency is replaced by a green color. Not sure if this is just a problem in Edge or all browsers.

To Reproduce

  1. Make an image layer with a transparent GIF or PNG
  2. The problem should display in the preview window
  3. Print the component, the error should have also been printed to the PDF

Expected behavior Transparent parts of GIFs should display as transparent. Colored parts of PNGs should display correctly instead of being isometrically shifted.

Screenshots image image

Additional context Trying to make a Hex image that I can print with a transparent background. This is to make it truly a hex for digital games (not a hex with a white rectangle surrounding it).

Workaround Used a one color PNG instead where the border was not stroked. An acceptable solution, but I would like to have a stroked edge for further separation of Hexes that are side by side.

Sarcastic-Robot commented 2 years ago

Just realized I had some details to add. I have another game that displays icons with a transparent background correctly.... maybe this problem is specific to my images? Hex3 Hex2

lorennorman commented 2 years ago

Just took a look, and I was trivially able to confirm this in:

Can you take a look at your projects and see if this is what you're seeing as well?

Sarcastic-Robot commented 2 years ago

Confirmed. This issue disappears for both the PNGs and GIFs when the scaling mode is changed to fill. It remains however if you change the image back to Fit or Stretch. I'm guessing it's essentially a problem with scaling and it either:

As a side note on my other project which uses transparent PNGs for icons I'm not having this problem in any of the scaling modes. Not sure what the difference is honestly.

lorennorman commented 2 years ago

So you ARE seeing this issue with PNGs? I was unable to reproduce with the PNG I threw together in Gimp, I will double-check my method.

If you have a PNG that'll do this, would you mind sharing it? I will also test loading it up and re-exporting to see if it goes away.

This is such a weird one, that weirdly-tilted hex grid in your image is freaking me out a little!

lorennorman commented 2 years ago

oh wait you're saying it's not transparency that does it in PNG but the colored parts? I think i'm not fully understanding this issue yet. Or... maybe it is two separate issues!

Sarcastic-Robot commented 2 years ago

This is the PNG Isometric Distortion to the coloring of the main image issue mentioned in the OP:

Screenshots: PNG-isometric-distortion

This is the PNG used mentioned in the second post:

maybe this problem is specific to my images? Hex2

They are very different problems but I assumed they were related because they both involved transparency, I think we can confirm there is some link because they have the same trigger (scaling mode set to stretch or fit).