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.



It is assumed that you have read the following documents:

  1. The XNA Installation Guide:guides you download and install the XNA SDK and Game Studio Express IDE.

  2. The XNACS1Lib Guide: describes how to work with the XNACS1Lib class.

  3. 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. The hero will fall gradually towards the road after each press of Button-A.

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:

    1. SideScroll.cs: This is the class that implements the side scroller functionality.  We will examine this class in detailed later.
    2. AlphabetHero.cs: This class encapsulates the functionality of the hero object, the kid with the net. Supported functionality includes: draw and jump (Button-A), set and update velocity/position.
    3. TreasureBox.cs: This abstract class encapsulates the abstract behavior of the treasures that the hero can pick up. Supported functionality include: create with a random alphabet letter, move the box along with the SideScroll (more about this later), treasure box inside the view range, and if the box collides with the alphabet hero object.
    4. RoadTreasureBox.cs: Subclass from the TreasureBox class. Draws the alphabet along the road.
    5. ScoreSystem.cs: Keeps a list of letters that the alphabet hero has captured and some kind of numeric score.
    6. TreasureEngine.cs: Contains an instance of the SideScroll and a list of TreasureBox. This class is responsible for determining if the AlphabetHero, is capturing the TreasureBox and when that happens, this class will inform ScoreSystem, to maintain proper current scoring.
    7. AlphabetHunt.cs:  This is the main source code file that subclass from the XNACS1Base. This class has an instance of the AlphabetHero, the TreasureEngine, and ScoreSystem and supports user interaction to these classes. We have discussed this subclass in all of the previous tutorials, where this class must override:
      • InitializeWorld(): Allocates and initialize memory for instance variables.
      • UpdateWorld(): Accepts input from the GamePad and update the game state accordingly. In this case, including informing the AlphabetHero to jump, and informing the TreasureEngine to update its state and determine if the AlphabetHero has come in contact with a TreasureBox.


In this tutorial we will concentrate on the SideScroll class and the interaction of the rest of the system with this class.  

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.