Developing Game-Themed Applications with XNA Game Studio

Day 1 - Section I: Introduction and Overview
d. Interactive control of the image

back to Day-1 main page


References:

Goals:

Notice:


Compile and Run: Download the source code, compile and run and you will see this output:
If you have a wired XBOX 360 controller connected to your PC, notice you can move the triangle around with the left thumbstick. If you do not have the controller, notice you can move the triangle around using the arrow keys. Notice: No, this is not a bug. This is a feature :-). As we will see, screen coordinate's y-axis increments downwards rather than the conventional upwards. This can be quite confusing at times.


Implementation: in order to move the image, there must be a reference position, and we must update the reference position based on user input. In this case, we have modified our code in four places:
  1. Instance variables: for defining the position of the image: Vector2.
  2. Initialize():  allocate and initialize the position of the image.
  3. Update(): change the reference position based on user input.
  4. Draw():  draws the image based on the reference position.

Here are the details, each of the following changes are enclosed by regions with label: __CODE_ADDED__:

  1. Declare new instance variables (in the beginning of the file) for reference position of the image:
    #region __CODE_ADDED__
       ... // Texture2D ... exactly the same as previously
       Vector2 pos; // position of the image

    #endregion

  2. Initialize the image position  (in Initialize() function):
    #region __CODE_ADDED__: allocate memory and initialize pos
      pos = new Vector2();
      pos.X = 200.0f;     // Initial position of the image/texture
      pos.Y = 200.0f;
    #endregion

  3. Updates the position based on user input (in Update() function):
    #region __CODE_ADDED__: Changing the pos of the image/texture
       if (GamePad.GetState(PlayerIndex.One).IsConnected) { // either controller ...
           Vector2 delta = GamePad.GetState(PlayerIndex.One).ThumbSticks.Left;
           pos = delta;
       } else {    // or from the keyboard
      
        float dx = 0.0f, dy = 0.0f;
           if (Keyboard.GetState().IsKeyDown(Keys.Right)) dx += 1.0;
           if (Keyboard.GetState().IsKeyDown(Keys.Left))  dx -= 1.0;
           if (Keyboard.GetState().IsKeyDown(Keys.Up))    dy += 1.0;
           if (Keyboard.GetState().IsKeyDown(Keys.Down))  dy -= 1.0;
           pos.X += dx;
           pos.Y += dy;
       }

    #endregion
     
  4. Draw a triangle (in Draw() function):
    #region __CODE_ADDED__
       // exactly the same as previously
       // the only difference is now we use pos

       // Triangle vertex position based on center at current position
       spriteBatch.Draw(sprite, pos, ... );
    #endregion

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.


Kelvin Sung
Computing and Software Systems
University of Washington, Bothell
ksung@u.washington.edu