Game Music and Sound Effects – Lesson 7

Finally we get something more than just looking at a quiet screen blinking images on and off.  For this section we look to excite our ears and bring in the sound.  We’ll also look to adding some managed test to the screen to give our actions meaning.

As usual the original Digipen webcast and supporting materials can be found on Codeplex here with all the source (both GS3.1 and WP7) for this lesson.

Source updated for Final combined update project for GS 4.0 project here on Codeplex (Windows and WP7)

Thankfully, there are no major changes to the audio framework between GS 3.1 and GS 4, so this will be a combine article, update which ever project you wish when following this.


1. Sound

When playing sound in XNA (and indeed in silver light since it also uses the XNA audio libraries), we generally have 3 different types of audio we want to use:

    Sound effect – use once and throw away effect, the simplest form of playing a sound.
    Prolonged or dynamic effect – where more advanced control is required, like altering the pitch, looping, etc.
    Streamed effect – Useful when playing large audio files like background music.

In this section we will cover the first two and continue with 3 in the next intermission as it required the more advanced XACT sound library.

 

1.1 Sound Effects

A sound effect is a sound that is triggered by a certain event in the game. This sound can be triggered by a certain
action or event, like firing a bullet, a tank explosion, or a ball hitting a wall.

 

1.2 Game Implementation: Adding Sound Effects

Implementing simple sound effects is very easy, just load the audio file and play it.

So to implement the sound effect we:

    Add two static variables into the “StarTrooperGame.CS” with the rest of the main game variables (after the trooper and condor static variables):

 

 

    Load the sound files from the Content library in the main LoadContent() function.  Ensure you have added the actual files themselves in to the Content project in a folder called “Sounds”:

 

    Call the “Play” function of the sound file in the Trooper code in “StarTrooperSprites.cs”, just add the following at the end of the TrooperFire() function:

 

This plays the sound effect file just once until it finishes.

 


 

2. Prolonged / Dynamic effects

Now some sounds need a bit more time tweaking or need to run continuously.  We may also need to run multiple copies of the same sound, for this we need to create a separate copy of the sound effect, this is called a sound effect instance.

With a sound effect instance, using the same sound effect file we can:

    Loop the sound continuously
    Raise or lower the pitch
    Raise or lower the volume
    Pan the sound around
    Apply 3D effects (Will be covered in the Intermission)

2.1 Music

For the tutorial, the music is the sound that is played on the background while the game is being played. It can be repetitive or
just played once.

 

2.2 Game Implementation: Adding Music

Applying an instance to a sound effect is no more difficult than implementing a sound effect, you just need a little extra:

    Create two static properties for the music sound and one for the sound effect instance: (you can have more than one instance of a sound running at the same time)

 

 

    Load the Sound file for the Sound effect in the LoadContent() function:

 

    Instantiate sound effect instance from the sound effect, set it to loop and start it playing:

 

    Note

I hit an issue with the original assets from DigiPen, for some reason the original “Music.WAV” sound file wouldn’t load into the GS 4.0 content pipeline and just caused a “Value does not fall within the expected range” error then I tried to play for file.  Just recompiling the audio file (using an audio editor, such as Audacity) fixed the problem.


Text

Text is a tricky thing in games, reason being that when a game draws to a screen it only knows how to colour pixels and draw vectors.  Fonts and text are completely foreign concepts.

The way we get around this is to compile a spritesheet full of all the letters of test that we want to see on the screen and then (the same as sprites) just draw them to the screen in the correct order with the right spacing.  Thankfully in XNA this process is simplified a lot, instead of manually creating your text spritesheet in the style you want, XNA dynamically creates the spritesheet in the content pipeline.  We are also provided with some simplified text drawing functions that will take a string and draw it to the screen with the proper spacing and orientation.

 

2.1 Text Manager

To make life easier if you are going to have a lot of text on the screen, it’s easier to manage it in a Text Manager (completely option though) which is similar to the Sprite and Particle managers, it just maintains a list of text to draw, including the locations and colour of the text with the appropriate font.

 

2.2 Why Do We Use It?

In games there can be several reasons why we would want to draw text to the screen:

    To display the content of a text file
    To display the value of a variable
    To display certain messages during the game

2.3 Game Implementation: Text Manager

First we’ll set up the Text manager, this is broken in to two parts, first the Text class, which his just a collections of properties used when drawing text (font,position, colour)

So setup a new class in the engine folder called Text.cs (remember to update the namespace to remove the .engine from the end of the namespace) and replace the class definition with the code below:

 

 

If you look through it, it is like most of the other classes with a set of private attributes and a public set of properties to expose them.

Next check or add the List collections for the the text class to the main game class:

 

 

And add / check the relevant Update and Draw sections.

InternalUpdate function (Since we mange all the game libraries from here):

 

 

Draw:

 

 

Finally add the helper function for adding the text to the text lists in the same way we add sprites:

2.4 Game Implementation: Adding text

That’s all the management code in place, so now time to add some text to the screen.

First add a new SpriteFont to the Content Manager.  Add a folder for Fonts to the Content Project and then right click on the folder, select “SpriteFont” from the XNA section:

Give it an appropriate name, I simply kept the default of “SpriteFont1”.  If you open this file, you will see it is just a text file, which lists the truetype font name (from which the spritesheet will be created from) and the size of the font (plus some other settings).  If you added the FPS component from earlier in the series, you may already have a “SpriteFont1” in the root of the content manager,

you can either move that to the fonts folder and update the FPS component or select a new name.  Just remember to use the new name of your font if you change it.

 

    A big thing to mention, is that XNA by default selects the Open Source font of “Kootenay”.  If you use another font be aware of the licensing of that font unless you want a knock on the door from the license police who will be ready and waiting for a check from you. (for all the cash they lost by you using their font!!)

 

Next you need load the Font you just added, you have two options, either create a new attribute for your font, or simply load the font when you create your text, it’s up to you.  As I intent to use the same font for all text in the tutorial, lets to the former.

Add an attribute to the state of the main game class:

 

 

And load the font in the LoadContent() function:

 

 

Next we’ll add the text we want on the screen.  We’ll have two sets of text, one for how many shots our trooper has fired and our game score.

So as we want to update the text (by incrementing shots and score) we need to keep a reference to the Text classes we need to create (if we just wanted text on the screen, we could add it to the game and forget about it).  Put this in the beginning of the main game class:

 

 

Next in the LoadContent() function, we need to setup the text:

 

 

Next we update the Trooper class in StarTrooperSprites.cs, so that we increment the number of shots as we fire, so add the following to the end of the TrooperFire function:

 

 

There were all done, aren’t we?

If you run the game at this point, you should notice two things:

    When the trooper fires, the score doesn’t change
    The size of the text is really really tiny

Why doesn’t the text change?, we have setup the text to use our variable for keeping score and we are incrementing that value each time we fire.  the answer is simple, because you haven’t updated the text, just because you supplied the score attribute when setting up the text does not mean it’s linked in anyway, you just added some text and copied the value with you created it.

So just add the following in to the update function in the main game class, we can copy the same text we used when setting up the text in the content function:

 

 

So now the number of shots update, what about the Score.  Well that will come later when we tell the game that we have scored.  We cannot do that now because we don’t know when a shot has hit a Condor or when a Condor has actually reached our Trooper and destroyed it.

As for the size of the text, that’s because we told it to draw really small.  Open up the SpriteFont1.spritefont file (or what ever you called it) and look at the attribute for Size.

Now change it to something a bit bigger, like 20.

 


 

Conclusion

So we now have some sound and we have some text, what could be better than that.  Well in the next intermission we’ll explore the wonders of 3D sound and the power of the XACT tool (XNA Cross-Platform Audio Creation Tool)

“Did you hear that, I think it came from over there!”

%d bloggers like this: