XNA Game-Themed Assignment (XGA)
XGA-700: Implementation Guide
Kelvin Sung Computing and Software Systems University of Washington, Bothell ksung@u.washington.edu |
Michael Panitz Software Programming Cascadia Community College mpanitz@cascadia.ctc.edu |
1. Topics Covered:
This document explains some of the implementation details found in the example solution to the XGA-700 assignment module. Please follow this link to find out more about XGA-700 assignment module and all other XGA assignments. Topics covered in this implementation guide include:
Understanding side-scroll.
Pre-Requisite:
It is assumed that you have read the following
documents:
The XNA Installation Guide: guides you download and install the XNA SDK and Game Studio Express IDE.
The XNACS1Lib Guide: describes how to work with the XNACS1Lib class.
If you have not already done so, you may wish to look at implementation guides to earlier assignments: XGA-100, XGA-200, XGA-300, XGA-400, XGA-500, XGA-600, and here is the summary of all XGA implementation guides.
Please download the XNA_Tutorial zip file and unzip this file. It is best to open the project in the Game Studio Express IDE and follow the source code while reading the rest of this implementation guide.
2. Implementation::
Now, compile and run the XNA_Tutorial application. You should see:
Notice that (note: this is the controller keyboard mapping) this is a side-scrolling game where the top status area reports collision with the walking alphabets and the bottom status area reports a score. The middle row of alphabets is a record of all alphabets you have encountered.
Button-A: Causes the hero to fly.
Left ThumbStick: Causes the hero to fly/walk towards the left of right.
In this tutorial we will concentrate on the implementation of the side-scrolling functionality.
3. The Source Code Structure:
In this example, the following are the interesting classes:
4. Support for a "continuous" side-scrolling:
One way to implement an "infinitely continuous" scrolling is by constructing a "continuous" image where the left-boundary and the right boundary "matches". One straightforward way to "match" the left and right boundaries of an image is to combine an image with its own mirror reflection, as shown in the following example:
In our case, because of the HDTV aspect ratio, it is best to keep the height of the image some ratio of 720. Due to image size limitation of many devices, we have chosen to limit the height of the image to 360 pixels.
This 1700x360 image will be used as the background scroller for the SideScroll class.
4b. View Region of the Background Image:
The following figure shows that we are
going to display a view region (visible region) of the
background image. In this
case, the visible region is 720x360. This is the region that will be displayed
in the application window. The "scrolling"
effect is implemented by continuously moving the region towards the right. The
view will warp to the beginning of the background image when it is
moved beyond the right-boundary.
4c. The
Coordinate System:
Recall that the library system supports a programmer defined coordinate system to shield us from the actual pixel resolution. The SideScroll class supports this coordinate system by allowing the specification of the width for the view region during class construction. After construction, SideScroll class operates entirely in the programmer defined coordinate system.
The above figure shows in this example, we have defined the view region to be 18 units wide. In the SideScroll class, the lower-left corner of the background image is assumed to be the origin and the current lower-left corner of the view region is defined to be located at: m_CurrentXPosition.
4d. Working
with the SideScroll:
In general there are two types of object in the side-scrolling system: objects that synchronized with the scroll, and those that does not synchronized the with scroll.
· Alphabet Hero: notice that the AlphabetHero stays constants relative to the application window as the side-scroll background moves. Since we know the background is moving continuously, this means by default, the alphabet hero does not have any velocity. The implementation of the AlphabetHero object is identical to all previous tutorials where the left-thumbstick simple controls it left-right movement. We do not need to be concerned with scrolling.
· TreasureBox: these are the marching alphabet letters on the road. Notice the alphabets maintain constant relative position with respect to the background image. This means, as the background scroll, the alphabets must update their position in the negative direction from the scroll direction. The SideScroll defines the UpdatePosition() function for the alphabets to update their positions accordingly.
As in all previous tutorials, both the AlphabetHero and the TreasureBox objects operate in the defined coordinate system, in this case, 0 to 18 in the x-dimension. The TreasureBox objects are instantiated at X coordinate position 18, march leftward according the the SideScroll speed (by calling the SideScroll::UpdatePosition() function). The AlphabetHero moves within the 0 to 18 x-range. Within this range if the AlphabetHero touches the TreasureBox a successful hit is registered. When the x-position of a TreasureBox becomes negative, it is removed.
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.