Adventure Game Studio

AGS Support => Beginners' Technical Questions => Topic started by: frenchllama on Sun 01/03/2009 09:53:41

Title: Using PNGs in a GUI
Post by: frenchllama on Sun 01/03/2009 09:53:41
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?
Title: Re: Using PNGs in a GUI
Post by: Trent R on Sun 01/03/2009 10:03:31
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
Title: Re: Using PNGs in a GUI
Post by: frenchllama on Sun 01/03/2009 10:08:21
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.
Title: Re: Using PNGs in a GUI
Post by: Trent R on Sun 01/03/2009 10:18:34
Wonderful sticky teaching you how to post images. :) (http://www.adventuregamestudio.co.uk/yabb/index.php?topic=6297.0)


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
Title: Re: Using PNGs in a GUI
Post by: frenchllama on Sun 01/03/2009 10:35:44
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.

(http://www.2dadventure.com/ags/pngproblem1.jpg)

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.
Title: Re: Using PNGs in a GUI
Post by: Wayne Adams on Tue 03/03/2009 01:09:30
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..
Title: Re: Using PNGs in a GUI
Post by: Vince Twelve on Tue 03/03/2009 01:23:51

Edit:  This thread explains it better than I could: http://www.adventuregamestudio.co.uk/yabb/index.php?topic=34537.0
Title: Re: Using PNGs in a GUI
Post by: Trent R on Tue 03/03/2009 04:44:50
Oh boy that was a good read. Thanks Vince.

~Trent
Title: Re: Using PNGs in a GUI
Post by: frenchllama on Wed 04/03/2009 06:13:45
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  ;D
Very much a beginner right now.


Title: Re: Using PNGs in a GUI
Post by: Vince Twelve on Wed 04/03/2009 15:50:25
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.
Title: Re: Using PNGs in a GUI
Post by: Khris on Wed 04/03/2009 16:47:56
The cool thing is that one can use e.g.
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.
Title: Re: Using PNGs in a GUI
Post by: Pumaman on Wed 04/03/2009 18:22:13
Quote from: frenchllama on Wed 04/03/2009 06:13:45
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  ;D

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.

QuoteI'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.
Title: Re: Using PNGs in a GUI
Post by: Vince Twelve on Wed 04/03/2009 19:12:19
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.