Welcome, Guest. Please login or register. Did you miss your activation email?

Author Topic: Loading indexed images with transparency  (Read 7053 times)

0 Members and 1 Guest are viewing this topic.

pvallet

  • Newbie
  • *
  • Posts: 13
    • View Profile
    • github
    • Email
Loading indexed images with transparency
« on: June 06, 2017, 12:06:12 pm »
Hello everybody,

I'm working on a SFML + OpenGL project that uses age of empires sprites (with indexed colors) and transparency. However when loading the images some weird artifacts appear. The alpha channel seems to modify the rgb channel on loading.

This is an OpenGL render without glblend where the texture behaves as expected: the transparent pixels have a black color.

See aoe1.png (I'm sorry I don't know how to integrate the image in the post).
The palette can be seen on aoe1_palette.png

But when using age of empires 2 palette, it gives some blue color to the transparent background, as seen on aoe2.png
The palette is aoe2_palette.png

Note that the color of the background is not present on the palette (even though some are close). The same effect appears with a custom palette.

It does work with unindexed color though, and I'll eventually come to using it, but I feel like it's a huge waste of space.

Edit: I'm using SFML 2.4.2 and the bug appears on Linux, Mac OS and Windows

Thanks in advance for your help !

Paul
« Last Edit: June 06, 2017, 12:19:38 pm by pvallet »

eXpl0it3r

  • SFML Team
  • Hero Member
  • *****
  • Posts: 11030
    • View Profile
    • development blog
    • Email
Re: Loading indexed images with transparency
« Reply #1 on: June 06, 2017, 01:06:18 pm »
I'm not quite sure I understood your problem.

The background color just seems to be a solid color instead of a transparent (alpha channel = 0) color.
I bet the original sprites weren't saved as PNG anyways.

The best solution is to open the image up in an image editor and replace the background color with a truly transparent color.
The other option is to use sf::Image's masking functionality before passing the image data to a texture.

Btw. make sure your AoEII sprite usage falls under fair use, otherwise you should look for some free sprite sheets.
Official FAQ: https://www.sfml-dev.org/faq.php
Official Discord Server: https://discord.gg/nr4X7Fh
——————————————————————
Dev Blog: https://duerrenberger.dev/blog/

pvallet

  • Newbie
  • *
  • Posts: 13
    • View Profile
    • github
    • Email
Re: Loading indexed images with transparency
« Reply #2 on: June 06, 2017, 01:14:44 pm »
Ok I'll try to explain it better.

The images are stored as png, and the transparent pixels are (0,0,0,0) (a truly transparent background). When loading, SFML sometimes converts those pixels to (somebluecolor, 0), which yields the blue background instead of the expected black one (when I render with transparency disabled).

eXpl0it3r

  • SFML Team
  • Hero Member
  • *****
  • Posts: 11030
    • View Profile
    • development blog
    • Email
Re: Loading indexed images with transparency
« Reply #3 on: June 06, 2017, 01:40:31 pm »
And why do you know it's like that?
I mean just look at the images post on the forum here. One has a black (non transparent) background and the other one has a blue (non transparent) background. Same result when I open it in Paint.Net or PhotoFiltre.
So how do you conclude that the background color should be black and transparent?
Official FAQ: https://www.sfml-dev.org/faq.php
Official Discord Server: https://discord.gg/nr4X7Fh
——————————————————————
Dev Blog: https://duerrenberger.dev/blog/

pvallet

  • Newbie
  • *
  • Posts: 13
    • View Profile
    • github
    • Email
Re: Loading indexed images with transparency
« Reply #4 on: June 06, 2017, 01:42:14 pm »
These are screenshots from my rendering engine.

Here are the png loaded by the engine

pvallet

  • Newbie
  • *
  • Posts: 13
    • View Profile
    • github
    • Email
Re: Loading indexed images with transparency
« Reply #5 on: June 06, 2017, 01:46:01 pm »
Oh sorry, these were sprite sheets I converted to avoid indexed colors.

Here are the indexed ones

Edit: I looked at the palettes using GIMP.

I'm sorry about the explanation, I hope it's a bit more understandable now.
« Last Edit: June 06, 2017, 01:48:35 pm by pvallet »

eXpl0it3r

  • SFML Team
  • Hero Member
  • *****
  • Posts: 11030
    • View Profile
    • development blog
    • Email
Re: Loading indexed images with transparency
« Reply #6 on: June 06, 2017, 01:52:53 pm »
The indexed and the non-indexed, both work fine for me.



(click to show/hide)
Official FAQ: https://www.sfml-dev.org/faq.php
Official Discord Server: https://discord.gg/nr4X7Fh
——————————————————————
Dev Blog: https://duerrenberger.dev/blog/

pvallet

  • Newbie
  • *
  • Posts: 13
    • View Profile
    • github
    • Email
Re: Loading indexed images with transparency
« Reply #7 on: June 06, 2017, 01:58:05 pm »
Ok I'll try to come up with a minimal code that reproduces the error. This might take a bit more time as I'm currently using OpenGL only.

pvallet

  • Newbie
  • *
  • Posts: 13
    • View Profile
    • github
    • Email
Re: Loading indexed images with transparency
« Reply #8 on: June 06, 2017, 03:55:00 pm »
Here it is !
There is a small readme to build it on linux.

It uses a texture array instead of several textures, I hope it is still minimal enough for you. As there are VAOs and VBOs the code also works on OpenGL 3.3 (core) and thus should run on OS X.

pvallet

  • Newbie
  • *
  • Posts: 13
    • View Profile
    • github
    • Email
Re: Loading indexed images with transparency
« Reply #9 on: June 07, 2017, 11:14:19 am »
If this is an SFML internal bug should I raise a github issue ?

Paul

  • Jr. Member
  • **
  • Posts: 78
    • View Profile
Re: Loading indexed images with transparency
« Reply #10 on: June 07, 2017, 01:00:24 pm »
It does work with unindexed color though, and I'll eventually come to using it, but I feel like it's a huge waste of space.

Indexed palletes are pain from the past. For smaller files or less memory usage you can use PNG with RGBA4444 or use some optimalization like PngOpt.

And you can get better result:
original indexed.png = 24 281 bytes
indexed.png RGBA8888 with opt. level 1 = 23 670 bytes (1:1 with origninal, no losses in qualilty)
« Last Edit: June 07, 2017, 01:21:23 pm by Paul »

pvallet

  • Newbie
  • *
  • Posts: 13
    • View Profile
    • github
    • Email
Re: Loading indexed images with transparency
« Reply #11 on: June 07, 2017, 01:09:09 pm »
Why is it a pain from the past ? It seems to me that the indexed encoding is a good lossless compression algorithm, and should not be that hard to support.
Quote
And you can get better result that with

Ah yes that's pretty neat. I'll check pngcrush (pngopt seems to be only a wrapper of pngcrush).
« Last Edit: June 07, 2017, 01:19:07 pm by pvallet »

Paul

  • Jr. Member
  • **
  • Posts: 78
    • View Profile
Re: Loading indexed images with transparency
« Reply #12 on: June 07, 2017, 01:42:53 pm »
Why is it a pain from the past ?

I was modding one old game. If game use indexed palettes you never fit into with colors. So your new graphics will looks different and it take lot of time to get similar result as original. And these games don't use 1 palette but many for same kind of objects (or subpalettes based on original colors).. impossible :)

pvallet

  • Newbie
  • *
  • Posts: 13
    • View Profile
    • github
    • Email
Re: Loading indexed images with transparency
« Reply #13 on: June 07, 2017, 01:47:46 pm »
Quote
If game use indexed palettes you never fit into with colors.

Yes indeed that would be quite difficult to work with game color palettes, but in this case the palettes are stored in each image so I don't need to worry about my colors being modified. I still gain a lot of space though.