[SOLVED: With Tutorial!] Objects with alpha channels in GraphicsGale

[SpacePirateCaine]

Hi folks,

I'm certain I'm just missing something very simple, but I've run into a bit of a brick wall, and although I am sure this question has been asked a zillion times already, I'd like to get some information on how to have objects in-game with semi-transparency (PNGs with an alpha channel that isn't completely black/white).

Allow me to explain exactly the issue I'm having:

I have a room in my game that has a holographic display that the main character can interact with, which is supposed to be semi-transparent. My intent is that the main character will be able to walk behind the object and still be visible "behind it" - in addition to the background that it is displayed over. At the moment, although I have imported everything as PNGs with alpha channels (tested with both top-left pixel and "as-is" import), including making sure that the background has an alpha channel (though I don't know for sure if this is important or not). I have upgraded to AGS 3.3.0 beta 12 and set alpha rendering style to "Proper Alpha Blending," but as yet I can't seem to get it to work.

I'm under the impression that this should work, and I believe I've seen a lot of information about semi-transparency in GUIs, but not much about sprites rendered as part of the scenery. Again, not entirely sure if this is even feasable. I've mocked up what the final image should look like and below compare how it appears in-game:


Mockup


In-Game

I have re-confirmed that my game is set to 32-bit color, though GraphicsGale only works with a maximum of 24bpp color depth (is this, perhaps, the problem?). I am certain it's doable, as I'm convinced I've seen similar things done in AGS games before, but I'm at a loss. Is there anything I can do? I've been searching the forums for a few hours already and just can't see to find the solution, so I would be greatly appreciative if someone could explain the whole process of importing and using sprites with semi-transparency in detail to me, ideally including any settings that I may have overlooked.

Edit: It appears I may have missed a problem with my alpha channels. I will do a little testing and see if I can resolve the issue

[Calin Leafshade]

The problem is almost certainly graphics gale.

AFAIK GG doesnt support alpha channels of any kind and it flattens images on export.

In this case though you could just raise the transparency of the object.

[SpacePirateCaine]

Thanks Calin - as usual, you are immensely helpful.

So, apparently GraphicsGale lies when it says that you are exporting with an alpha channel, or at least doesn't tell the whole truth. It does indeed export Alpha channels, but they either fully opaque or fully transparent, on standard settings. Apparently there is a way to paint with semi-transparent colors, but that has to be done at time of drawing. In the case of this set of sprites, I'm just touching them up with photoshop (I could've set object opacity, yes, but that would've meant that the actual solid 'terminal' section would've been partially transparent as well, which wouldn't have worked for my purposes.

I will update this thread if I work out exactly how to do alpha channel painting in GG, as I still am a strong advocate of using it for your pixel needs.

[selmiak]

Strange that you can mock it up in GG with semitransparency but not export it that way. Can you upload the .png file as you use it ingame.

[SpacePirateCaine]

Hi selmiak,

It appears that GraphicsGale will deal with semi-transparency without any major issues while you are still using its proprietary .gal format, but it doesn't export the alpha of individual layers when exporting to an image file - it generally just flattens the image unless you have set up an alpha channel and then painted to it with alpha set in the palette frame at time of painting: As above, I'm still unsure of the exact method - I was eager to get back to actually making my game instead of tweaking transparency that I just opened up the offending frames in photoshop and hit the pixels of the overlay with a semi-opaque eraser and called it a day.

I will have to do similar things soon, however, so I do plan to update this thread in the next few days with information on my findings.

[selmiak]

Let me recommend to use masks in PS. This can easily be reversed by just removing the mask layer and no pixelinformation is lost completely contrary to (partially) deleting them.

[SpacePirateCaine]

It may very well come down to that, though my tool of choice for pixel art is GraphicsGale and I'd like not to have to resort to exporting my finished files and editing in a second program if at all possible. If I can work out how to paint an image with an in-built alpha channel, that should helpfully cut out the step of adding one in later altogether, which would be the ideal situation. But yes, I will take that under advisement.

Edit: Figured it out! Yay - I don't have to shoehorn in another program. As promised, the solution below.

Okay, a quick tutorial for anyone interested on how to properly export images using GraphicsGale with semitransparency:

For those who are unfamiliar with a lot of GraphicsGale's functionality, I will include the steps I use to create my images and fine-tune opacity. For those who don't care about that, please skip to step 3.

• Create your image normally in GraphicsGale - mock up however you want until you're satisfied.

I usually create images with separate layers of  transparency, so that I can fine-tune until I have the opacity that I want in my final piece. Layer transparency can be controlled by clicking the ellipsis in the "Layers" window and using the opacity slider or inputting values directly.
Make note of the opacity value you have chosen, as it will come in handy later.

• Isolate your object and export as a flat image

After finishing the mockup, I like to get my individual objects by hiding all layers except those that will eventually become part of my final image. After hiding superfluous layers and cropping to the size that I want, I also return the sections that I want to have transparent to full opacity (I know this sounds counterintuitive, just bear with me) -- just reverse the step above so that the object is 100% opaque. After you've done that, you should see the α icon on the Layers screen disappear. Once that is done, export the image as a flat PNG file or series of files. You are now ready to set opacity on your PNG images.

• Create an alpha channel for your image using the Image menu.

With your flat PNG image, go to the Image menu and find the option that says "Add alpha channel". Adding this alpha channel will allow you to make individual pixels transparent. You will notice that after doing this, even at 100% opacity, the layer still registers as having an alpha channel.

• Switch to Opacity Mode.

This was a function that I wasn't even aware of until today. In the toolbar, you will find an icon that looks like a downward-pointing pencil: This indicates you are in Draw mode. We want to change to "Opacity" mode, which looks like a checkerboard. Click to Opacity mode and you will now be able to edit actual opacities, as opposed to layer opacity.

• Use the Opacity slider on your palette menu to select the opacity of the pixels you will paint.

On your palette toolbar, you will see a white-to-black slider above your RGB color pickers that represents Opacity. Normally, this doesn't do much at all until you are painting in Opacity mode. In opacity mode, however, it represents how opaque the pixels you paint over become. Using this you can select individual pixels, or flood-fill regions that you want semi-transparent. When you click on them, they should become semi-transparent. You can move items behind them to make absolutely sure. Note that the layer opacity will still remain at 100%.

• Double-check that your background is transparent.

You can be sure that your background color is transparent by going to the Frames window and clicking on the ellipsis there, and making sure to set the Transparent Color to your image's background color. This is always important, of course. You could also, theoretically, do this by flood-filling your background color with opacity 0 in Opacity Mode.

• Save as a PNG with an Alpha Channel

Once you have successfully set up your opacity in Opacity draw mode, it's time to export your image. Go to Save As, or if you are using multiple frames, Export and make sure that you have the option "With Alpha Channel" checked, so that the PNG will export and alpha transparency will be saved.

• Import your finished Sprite into AGS

Once your sprite is exported correctly, all that's left to do is import the sprite and test it in-game. Be sure to import the sprite using its alpha channel when prompted, and I find that it's fine to import using the "Leave As-Is" option for transparency.


And that's all! Hopefully this tutorial will help people who only have GraphicsGale or only want to use one program to much more easily streamline their development process.
Now, it's likely that there are much more elegant ways of doing this even in GraphicsGale - perhaps even a way to paint on the fly with lowered opacity, but I still need to test. But at the very least, for retroactively setting opacity this works like a charm.

[Yaztromo]

*MUST READ* How use transparency in Photo Shop and AGS.

Inspired by space pirate I made this tutorial for Photo Shop users.
Two things:
1: Apparently 32 pgn and alpha blending are misnomers. I don't know why but commenter keep pointing it out.
2: I can't draw. I don't have talent and I lack experience but please bear with me, this is awesome stuff.

If you use a brush tool to make sprites and then try to put it in AGS you'll know this sight.

This awful white outline.

You can try again with a black or dark background.

And although the white outline is gone, helping it to blend into the background better, the edges are still rough.

The best solution is to make a pgn image with transparency.

Open Photo Shop and make sure the image is in either 8 bit or 16 mode.


Start drawing on a transparent layer.

This blob has soft edges, a semi transparent shadow and it's wings have several values of transparency. No problem.


When the sprite is done press Alt+Shift+Ctrl+S or File>Save for Web


Select PGN-24 as file format and turn transparency on. Save.


Go to AGS and go to the General Settings tab make sure 32 bit colour is selected. I'll show later what happens if it's not.

Go to The Sprites tab and Import the pgn file you just saved.

A message like this should pop up. Click affirmative.

And you're done. You can use the sprite for everything.

Here it is in game.

-------------------------
This is the same sprite but in 16 bit mode.

Semi transparent parts have become either invisible or solid. It doesn't look bad but the edges are rough again.


BUT WAIT! THERE IS MORE!

You can also use transparent pgn files for lighting effects.

This image has some fog and stars as well as some random strokes of black and purple.

Use this as an object or GUI (set Clickable to False) and...

...you have a night scene.
You don't have to do the whole room, you can just do a small glow like a candle too.

You can use several layers over each other and have a character move between those layers.

It's such a gloomy mess I almost forgot that I can't draw.

Remember that In Game you can also change the tint and transparency of objects so you can slowly change the background to dusk and then to night. Awesome stuff huh.

Negative points:
Your sprites will get a bigger file size.
The default GUI becomes weird for some reason but if you recreate it it works fine.

Like, comment and subscribe.