Inventory items transparency problem (SOLVED)

[rmaraujo]

After importing a Sprite (32 bits color, TGA or PNG format) with transparent background, it is shown with a strange background inside AGS (grey or brown stripes). The same background appear in the inventory GUI inside the game. However, when used as a cursor or as a view of a character, it has no problem!

I made the picture in Photoshop, keeping a default-transparent background and saved as TGA (tried PNG as well). The problem seems to be with showing the item inside inventory GUIs only (and inside AGS editor, but that's not a problem).

I've put a screenshot here:

http://www.dotdotdot.com.br/temp/sprite_problem.jpg

Look at the "bunny" sprite. In the inv gui it appears with the weird background (also on the inv button below), but as a cursor it is ok.

Any ideas on why this happens?

[GarageGothic]

I've had this too in the editor, but haven't seen it in-game. I think the problem is in PhotoShop's saving format. Try to cut-n-paste the sprite into AGS instead.

[rmaraujo]

Inside the editor I get this problem often, but in game it only happens inside the inventory. I don't think it's a problem with PS format, since AGS is able to draw correctly as a cursor. It seems to be the case that AGS uses two different draw modes for inventory and the rest. I'm guessing AGS does not support alpha transparency in inventory items...

Pasting from PS didn't help, when copying it lose the transparency and I end up with a sprite with white background.

[Play_Pretend]

I'm having the same problem...I've read other peoples' post and answers about similar things, the manual and the BFAQ, but I'm just not getting it.  My game is 32-bit.  I created a custom background image (in Paint Shop Pro 7) for my Inventory GUI, saved it in PNG format, and made sure it did not have an alpha channel.  All of my inventory icons are saved from PSP7 as PNGs, but with alpha channels.  When they display in-game, inside the GUI window they go all screwy and lose their anti-aliasing.  When you click to Interact with them and the cursor transforms to match the item, they regain their anti-aliasing and are perfectly fine.  Is this just not available to AGS yet?  In the BFAQ, when it talks about creating one GUI over another, will it solve this?  Make one that contains the background image, and another one on top that's transparent w/ no background image or color, and contains only the inventory items?  Thanks guys, this has been driving me up the wall.

[rmaraujo]

I've solved this by converting the game to 16 bit colors. Everything works as it should now. But it is still strange, though.

[Play_Pretend]

Wouldn't converting it down to 16 bit make me not be able to use the alpha channels?  I thought it had to be 24 bit plus the 8 bits for alpha, or something.

[rmaraujo]

Nope, 16 bit has alpha channels as well. Or so it seems. It's been working for me without problems. I'm not sure, but I think I didn't even had to re-save my images in 16 bit, I just changed the game color depth. Give it a try.

[Play_Pretend]

Fraid it didn't work for me...I took a backup-backup copy down to 16 bit from 32, and it put warning tags on every single sprite I'd imported.  Inside the game some of the background graphics are pretty much fine, but anything in the foreground is all choppy around the edges and jagged.  Maybe I'll just have to do my best to draw 32 bit inventory items that don't have any alpha/anti-aliasing?  Unless anyone else knows a solution to this?  Oh, and thanks for brainstorming with me on this one, rmaraujo.

[Gilbert]

Odd, can you upload an original TGA/PNG file (like the bunny sprite for example) in question so we can investigate on the problem?

Edit: Hmmm I'd examined a bit on the screenshot posted and see that the inventory icon is a bit smaller in size than the cursor, that means the sprite was shrinked (due to size set for the icons).
So, try this: if "smooth scaling sprite" is checked in the game's setup, try unchecking it and see if there're any difference, as far as I know there're currently some problems when scaling sprites having Alpha channels with that option on (see this, CJ said he had disabled smoothing for Alpha channeled sprites, but it's possible that he forgot to do so for inventory icons).
The reason for it working when converting to 16bit is probably because when in 16bit alpha channels are not used, and teh sprites would be converted to 16bit where there're only fully opaque or full transparent pixels.

[Play_Pretend]

Hmm. . .I checked my game setup, but my Smooth Scaled Sprites box is unchecked.  Here's one example of my inventory sprites, a 32 bit PNG file with an alpha channel:



All of the GUI inventory items are 50x50 pixels, and I know the inventory display window is 205 pixels wide and 153 pixels high, so it can show four across and three down before you need to scroll.  I don't think that makes any difference, even with only one item in there I still have the problem.

[Gilbert]

If by "aliased and jagged edge" you meant something like this:

I can only say, sorry, you can't do much to it, and it's just normal appearance for sprites scaled with the nearest-neighbour method.
If you cannot live with it, all I can suggest you may currently do is either:
1. Use a higher resolution sprite, so most of the time it's scaled down not scaled up, hopefully it won't look as bad, or
2. Don't use alpha channels for sprites that would be scaled in your game and check "smooth scaling sprites" in the game's setup.
unless CJ manages to fix the alpha sprites-smooth scaling issue in the engine (see the tracker entry I posted in my last post).


I was only replying to rmaraujo in my last post, who was actually having a different problem.

[Electroshokker]

After importing a Sprite (32 bits color, TGA or PNG format) with transparent background, it is shown with a strange background inside AGS (grey or brown stripes). The same background appear in the inventory GUI inside the game. However, when used as a cursor or as a view of a character, it has no problem!

I made the picture in Photoshop, keeping a default-transparent background and saved as TGA (tried PNG as well). The problem seems to be with showing the item inside inventory GUIs only (and inside AGS editor, but that's not a problem).

I've put a screenshot here:

http://www.dotdotdot.com.br/temp/sprite_problem.jpg

Look at the "bunny" sprite. In the inv gui it appears with the weird background (also on the inv button below), but as a cursor it is ok.

Any ideas on why this happens?

I'm experiencing the same problem. In photoshop, set your image (after it's finished) to 16bits/channel. (goto image=>mode=>...)

This solves the problem somewhat, but you'll still have edge artifacts. (though very little in compared to what it was before)

after a little more tweaking with the image in photoshop (use eraser on those areas which still display artifacts) it'll actually look quite nice.

here's an example of my inventory after going to 16bits/channel:



not perfect, but close.

[Alynn]

The editor has never displayed AA sprites with their AA. So in the editor itself you will always see the AA lines. All of my cursors look like large green blobs, but in the game they look fine.

http://www.adventuregamestudio.co.uk/yabb/index.php?topic=27409.0 <--- GUI buttons cant be transparent

http://www.adventuregamestudio.co.uk/yabb/index.php?topic=26847.0
Look for ashens post about 8 posts down, inventory items and buttons don't show AA correctly unless they are on a transparent part of the GUI.

If you follow what he says about using 2 guis, this should work for you.

[Electroshokker]

I tried using 2 guis, 1 transparent and 1 imagegui below that, but it still gives me the same result as before

EDIT: my bad, it turns out that adding an emty transparent image to the gui fixes it. guess I misunderstood the instructions (I thought simply having no image at all would do)