You are here: Home > Tutorials > Using Alphas and Transparency

Using Alphas and Transparency

Published: 03 Dec 2013
by Nikc-Nack

PROGRAMS USED (open source software):



Gamemaker 8.0 Sprite Editor: The built-in sprite/graphics editor in Gamemaker 8.0 supports the use of alpha channels which will be discussed in this tutorial. 



TUTORIAL:



To begin with, I'm going to teach you some information about alphas: 

- Alphas are the level of opacity of the object or pixel.
- The max alpha of an object/pixel is 255.
- The min alpha value of an object/pixel is 0.
So if we set the object/pixel alpha to 128 we will get the object showing at 50% of its normal visibility.
When something is anti-aliased it is using alphas to give the object a smoothness on the edges.

1 - In this first example we will create a simple box using alphas. So go into Gamemaker and create a new sprite called "Alpha test 1".Create a new sprite Go into the actual sprite editor (click on 'Edit Sprite') and start by creating a square box 32 x 32 pixels (File>New). I even outlined it just for fun.

Create a box with an outline

Now you will see the object is totally visible, so you cannot see the checkered pattern behind it. Now I'm going to make it slightly translucent (trans-loo-sent). So go to Image>Opacity and set relative to unchecked, then hit OK. Now you should be able to see the grey and white behind the image. And you should get something looking like this:

The box is partially transparent



2 - But instead of doing that lets say you want to make a window. You wouldn't want the window frame to be half invisible. You would only want the window glass to be. So create a new sprite (90x90 pixels) and now create a window frame, leaving the inside parts transparent. 

Create a window sprite


Now go over to your fill/paint bucket and you'll see over on the right side there is a little box titled "Opacity". Set the opacity to 128.

Change Opacity in sprite editor 

You can also use the little slider below it to get a rough area of 128. Now fill the inside of the frame with white. You should now see the outside of the frame is visible, while the inside is translucent. 

Fill the window frames with white

This technique can be used in yours games to create more realistic environments. You don't have to stop at windows; you could also use it for making characters partially invisible, water etc. Be imaginative!

3 - Now create a new frame and go over to the line tool, make sure you have set the opacity back up to 255. Now over on the left side under where all your line styles are you should see a little check box titled "Anti Alias". Make sure that is checked and set your color to black. I also set my line thickness to level 2. Now anywhere on your screen draw some lines. You should now see that the inner part of the line is black. While on the outside of the black there is still black but it's opacity is lower. That is done automatically for you. Game Maker does this using alphas.

Anti alias on a line  Anti alias on a line

I hope this helps you a lot while you're making great games.


Tutorial by Nikc-Nack