Developing Game-Themed Applications with XNA Game Studio
Day 1 - Section II: The
XNACS1Lib Library
b. Working with media (image and sound)
back to Day-1 main page
References:
Goals:
- To experience with image textures and audio files.
- We will create this program where, based on the program
from Section IIa, 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. Similar to the texture, to include Audio we simply add a
.wav file to the Audio folder..
BeginTemplateSource:
Download and unzip the begin template source folder and you will see two
folders:
- SourceCode folder contains an template SimpleXNA project (from
Section IIa: 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).
-
bound.wav - The bound.wav file
is the audio wave file.
We will:
- Show how to include texture images in our project.
- Show how to include audio files in our project.
- Show how to bound the movement of the circle and play a cue when we
attempt to move the circle outside the application window.
- Show how to use the image texture files.
1. Including the 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.
2. Including the audio files:
- Create the proper resource folder, in the GSE:
- Right-Mouse-Button over the Content/Resources folder
- Add -> New Folder: name the new folder: Audio
- 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 UsefulFiles/ folder
- Insert bound.wav.
Now we can use "bound" as a audio cue (hint).
3. Checking the bounds of a circle:
- UpdateWorld(): after moving the circle, check for its collision
with the world bound:
protected
override
void UpdateWorld() {
...
BoundCollideStatus status =
World.ClampAtWorldBound(circle);
switch (status) {
case
BoundCollideStatus.CollideBottom:
case
BoundCollideStatus.CollideLeft:
case
BoundCollideStatus.CollideRight:
case
BoundCollideStatus.CollideTop:
PlayACue("bound");
break;
}
...
} |
4. Using the image textures:
- InitializeWorld(): after moving the circle, check for its
position:
protected
override
void InitializeWorld() {
...
World.SetBackgroundTexture("bgTexture");
circle = new
XNACS1Circle(new
Vector2(5f, 5f), // center
1.0f // radius
"B");
//
Texture image to use
} |
This document and the related materials are developed with support from
Microsoft Research Computer Gaming Initiative under the Computer Gaming
Curriculum in Computer Science RFP, Award Number 15871, and 16531.