Graphics
& Sound
This tutorial will show you the very basics of loading
images and displaying them on the screen. It will also show you how to add
sound effects to your games. First, try compiling and running
the project. You should see a button with the words “Click Here” in the
center of the window. Left click on the button and you should hear a beep
sound.
You’ll also notice that
the text “Graphics & Sound” is displayed in the window’s title bar. That
was accomplished using the following line of code:
|
G.Window.SetTitle("Graphics
& Sound"); //Here I have changed
the name of the window to "Graphics & Sound" //You can change the window's name as
often as you like. This can be used for debugging. |
The name of the window
can be changed before or after the window has been created. You can even use it
to display debugging information such as the value of a variable while the game
is running.
Sound
In order to add sound to
the game, we need to create an instance of the sound engine class.
|
SoundEngine S; //Create an
instance of the sound engine, Only make one! |
Here I have named my
instance of the sound engine “S”. But you can name yours whatever you want. You
can have many sounds but you’ll only need one instance of the sound engine. The
code below creates a sound and loads a wave file from the hard drive. The load
function needs: The file name, the
address of the sound engine, a bool variable to tell
it if this sound is 3D, and another bool variable to
tell it if the sound should loop continuously. In this case, the sound we are
loading is 2D and should play once and then stop. Make sure the file name and
path are correct because if the sound file fails to load, the program will
close!
|
Sound beep; //Create a
sound //The load function needs the file name
of the sound and the address of the sound engine beep.Load("Sounds/Beeps.wav",
&S, false, false);
|
The sound engine has an “Update”
function we need to call every step through the game loop. The sound engine
wants to know how much time is passing per frame in seconds. We get that
information from our instance of the Core class we named “G”. The following
line of code can be placed anywhere in the game loop. I like to put it near the
bottom.
|
S.Update(G.Timer.GetElapsedTime()); //The sound engine has to be updated continuously or the
sounds stop playing! |
To play a sound we simply
call the play function. We can even play a sound that is already playing and
hear multiple versions of it playing at the same time.
|
beep.Play(); |
To stop a sound that is playing, use the following:
|
beep.Stop(); |
Graphics
The
Image class loads almost every image file type, jpg, gif(no
animation), png, tga, and
many more. It uses the DevIL API which is free and
cross platform.
Note:
The width and height of your image should be a power of 2. Many video cards
perform poorly for odd sized graphics.
Examples: 2, 4, 8, 16,
32, 64, 128, 256, 512, 1024, 2048
Use the following code to
load a graphic from the hard drive:
|
Image buttonImg; buttonImg.Load("Images/ClickHere.png");
//Load the image from disk. |
The
png image I loaded for the button has transparent
parts, the corners of the button. By default, all images are rendered without
transparency. In order for the corners to appear transparent, I need to change
the blending mode. Even though we are not using any shader
effects in this example, the shader class can be used
to change the blending mod (you can also use OpenGL commands if you prefer).
“Blend” is a static member function of the Shader
class which allows us to call it even though we have not created an instance of
the class.
|
Shader::Blend(2); |
Rendering Modes:
0 - No Transparency (The
default mode)
1 – Threshold
Transparency, each pixel is either completely transparent or completely opaque
2 – Smooth Transparency, images
use an alpha channel to display varying levels of transparency as they would in
PhotoShop
3 – Additive
Transparency, images add to the background and appear to glow. This mode can
work with file types that don’t have an alpha channel such as jpg.
4
– Subtractive Transparency, The opposite of additive mode, it darkens the
background.
A
Sprite is an object that we apply images to. You can think of it as a sign, and
the material is what gets painted on it. The sign can be moved, resized, and
rotated. Here I created a Sprite and initialized its width and height. Notice that the width and height do not have
to match the image width and height. When the size does not match the image,
the image will be stretched to fit.
|
Sprite
buttonSpr(250.0f, buttonSpr.x
= buttonSpr.y
= |
And
finally, to render the button on the screen we activate the image and then call
the sprite’s render function.
|
buttonImg.Activate(); buttonSpr.Render();
//Draw the sprite with the active image painted on
it |
Shader effects and blending will affect
everything you render! So it's a good idea to turn them off when you're finished
with them. In fact, some older video cards will run really slow if shaders are
active when the screen refreshes. It's a good idea to turn them off when you
are finished rendering your scene.
|
Shader::Deactivate(); //Turns
off blending and any active shader |
GraphicsSound.zip
22KB