Developing Game-Themed Applications with XNA Game Studio

Section II: The XnaAssignmentBase Library
c. Working with media (image and sound)

back to workshop main page

• Pre-requisite: it is assumed that you have read through this documentation (Section IIb. drawing and controlling a circle).
• You can start with this begin template source (resulting source code from Section IIb), and here is the end project source code we will generate at the end of this tutorial.
• Here is the keyboard mapping for the game controller.

Goals:

• To experience with image textures and audio files.
• We will create this program where, based on the program from Section IIb, we will
• include a background texture for the application
• include a image texture for the circle
• limit the movement of the circle to within the window bounds, and
• plays a audio cue when the user attempts to move the circle out of the window bounds.

Notice:  the procedure by which we include the media files:

• Texture: create the Textures sub-folder in the XNA GS Content/Resources folder and simply add the image file. 
  • Our library supports both jpg and png images.
  • png image format supports transparencies. Notice by mapping the letter "B" to the circle, we have literally disguised the circle as a letter "B".
• Audio:
create the Audio sub-folder in the GSE Content/Resources folder. Notice to include Audio, we must
• add an .xap file with the name "GameAudio.xap"
• we must then copy all the wave (.wav) files over to the audio folder outside of the GSE.

• SourceCode folder contains an template SimpleXNA project (from Section IIb: where we can draw and control a circle).
• UsefulFiles folder contains:
• bgTexture.jpg and B.png - these are the image texture files that we will use as the background (bgTexture) and for the circle (B.png).
• GameAudio.xap and bound.wav - GameAudio.xap is the audio description file that we will include into our GSE project. The bound.wav file is the actual wave file. We must manually copy the bound.wav file over to the Audio folder in the file system.

1. Show how to include texture images in our project.
2. Show how to include audio files in our project.
3. Show how to bound the movement of the circle and play a cue when we attempt to move the circle outside the application window.
4. Show how to use the image texture files.

• Create the proper resource folder, in the GSE:
  • Right-Mouse-Button over the Content/Resources folder
    • Add -> New Folder:  name the new folder: Textures
• Include the texture files as part of the project:
• Right-Mouse-Button click over the newly created Textures folder:
  • Add -> Existing Item ...
  • Navigate to UsefulFiles/ folder
  • Insert both of the image files: bgTexture.jpg and B.png

Now, we can refer to these two images as "bgTexture" and "B" (without the extensions) in our application. 

• Create the proper resource folder, in the GSE:
  • Right-Mouse-Button over the Content/Resources folder
    • Add -> New Folder:  name the new folder: Audio
• Copy files over to the newly created folder, in the explorer (outside of GSE)
  • Copy UsefulFiles/GameAudio.xap and bound.wav into the newly created Audio folder
• Include the audio file as part of the project, in the GSE:
• Right-Mouse-Button click over the newly created Audio folder:
  • Add -> Existing Item ...
  • Navigate to Audio/GameAudio.xap
• Notice, we only include the .xap file and not the .wav as part of the project. Although, it is very important that the .xap file and .wav are located in the same folder.

• UpdateWorld(): after moving the circle, check for its position:

protected override void  UpdateWorld() {    ...    if (pos.X > XnaAssignmentBase.WorldMax.X) {       pos.X = WorldMax.X;       XnaAssignmentBase.PlayACue(0.2f, "bound");    }    ... }

• InitializeWorld(): after moving the circle, check for its position:

protected override void InitializeWorld() {    ...     XnaAssignmentBase.BackgroundTexture = "bgTexture"; }



• DrawWorld(): use the "B" texture when drawing the circle:

  protected override void DrawWorld() {        XnaAssignmentBase.DrawCircle(             pos,      // Center             ,... ,... // Radius, rotation, outside color, inside color            "B");      // Texture image to use }