Using PNGs in a GUI

[frenchllama]

I'm using .png format images for most of my graphics so the edges will look seemless, and this works fine for objects, characters, etc.
However, the GUIs seem to ignore the fact that it's a png and it disregards the alpha channel, displaying really horrible-looking buttons and inventory items with pixelated edges.
What's weird is that when you have an inventory item selected (ie, it becomes the cursor), the alpha channel works...
Any ideas?

[Trent R]

PNGs have always worked fine for me... Can you post a picture? Also, do you have alpha channels on your GUI's background or other things?


~Trent

[frenchllama]

Ok...I'm going to sound like a total internet newbie, but how do you host an image to post on the forum, since you can only insert a url? I guess there are sites to do this, but I'm not in any way savy... 
Sorry about this.

In answer to your other question, yes the GUI background is also a png, as are characters and objects.

[Trent R]

Wonderful sticky teaching you how to post images.


Does the GUI background have an alpha channel? I think I recall that giving me problems once upon a time with an inventory GUI..... Actually, I assume that nearly all of your images have alpha channels? Also, did you make sure you imported them correctly (it should've popped up saying you have an alpha, and ask if you wanted to use it).


~Trent

[frenchllama]

Thanks! That link helped a lot.

This is a screenshot of the inventory GUI (the scroll) which is a png with an alpha channel. As you can see, the button (also a png with an alpha channel) has a strange black, pixellated border instead of a soft shadow.
Also, notice that the GUI background itself works fine.



All of my images have alpha channels apart from the backgrounds, and a few of the 'walk', 'interact', etc buttons.

And yes, that message pops up every time, so it's all imported properly I think.

[Wayne Adams]

The scroll's alpha appears to be pretty much on or off.. you may need to look at your png's settings when you save it.. ensuring it's alpha isn't being reduced or simplified when saved..

[Vince Twelve]

Edit:  This thread explains it better than I could: http://www.adventuregamestudio.co.uk/yabb/index.php?topic=34537.0

[Trent R]

Oh boy that was a good read. Thanks Vince.

~Trent

[frenchllama]

Wow...that is one incredibly complex issue. Thanks for the link - I now realise what kind of issue I'm dealing with.
I think I might just try work around it. I don't even know how to do a lot of basic programming let alone that stuff 
Very much a beginner right now.

[Vince Twelve]

I'll often use separate GUIs for one big layered GUI with some layers using alpha transparency as the GUI backgrounds, and some layers using no alpha transparency, but needing their own GUI so I can use the Transparency property to manually control it at runtime for neat effects.

I've just put a Computer interface GUI into my game that uses three GUIs.  They work like this.

-Top layer: The frame around the computer screen and some shine on the screen itself (GUI background with alpha for the shine and transparent middle) Not clickable

-Middle layer: A snow/static animation (no alpha, set to 90% transparency, but adjusted manually faded in and out as the screen gets broken) Not clickable

-Bottom layer: The screen background, buttons, and labels that are actually used for the Computer interface.  (no alpha, 0% transparency) clickable.

You just kind of learn to work around the limitations to make things look how you want them to look.  I could likely have done this without using multiple GUIs, but this way was a quick way to get the look i wanted.

[Khris]

The cool thing is that one can use e.g.

Code: ags

void repeatedly_execute_always() {
  if (gScreen.Visible) gTop.Visible = true;
  else gTop.Visible = false;
}

Now all you need to do is switch gScreen on and off.

[Pumaman]

Wow...that is one incredibly complex issue. Thanks for the link - I now realise what kind of issue I'm dealing with.
I think I might just try work around it. I don't even know how to do a lot of basic programming let alone that stuff 

With regards to that thread, it's worth noting that the latest version of AGS has an option called "GUI Alpha Rendering Style" in the GEneral Settings, which if you set to AdditiveOpacity allows results like those demonstrated at the end of the thread.

I'll often use separate GUIs for one big layered GUI with some layers using alpha transparency as the GUI backgrounds, and some layers using no alpha transparency, but needing their own GUI so I can use the Transparency property to manually control it at runtime for neat effects.

It's also worth noting that since AGS 3.1.2 supports using the Transparency property with alpha-channel sprites, this workaround should no longer be necessary.

[Vince Twelve]

Unfortunately, Resonance is still stuck in 3.0.2 so I can take advantage of that Text resolution trick.

And, do buttons have .Transparency properties?  I thought just the GUI itself did.  So if I wanted to control the transparency of different parts separately,  I wouldn't be able to.  Maybe I'm mistaken on that, but I don't have the program in front of me to test.