<BACK
Alphas and Transparency
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".
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.
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:
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.
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.
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.
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.
I hope this helps you a lot while you're making great games.
Tutorial by Nikc-Nack
(SpriteLand.com is not responsible for the content of external websites)
<BACK
Alphas and Transparency
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".
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.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:
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.
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.
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.
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 -
I hope this helps you a lot while you're making great games.
Tutorial by Nikc-Nack
(SpriteLand.com is not responsible for the content of external websites)
<BACK