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:
- Pre-requisite: this is the
example (Section 1c. Drawing with XNA) we are building off from.
- You can start with this template source file (resulting source code from the above example), and
here is the source code we will generate at the end of this tutorial.
Goals:
- To experience with and examine simple user interaction with XNA.
Notice:
- If we change a variable during the Update() function and
use
the result in the Draw() function then we can create very
smooth control of objects.
- In the Update() function, we poll user's actions (either
controller or keyboard) and changes instance variables. We
do not draw in the Update()
function.
- In the Draw() function, we draw based on instance
variables. We do not change any instance
variables in the Draw() function.
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:
- Left/Right: movements are as expected.
- Up/Down: movements are reversed as what we expected.
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:
- Instance variables: for defining the position of the image:
Vector2.
- Initialize(): allocate and initialize the position of the
image.
- Update(): change the reference position based on user input.
- 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__:
-
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 |
-
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
|
-
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 |
-
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.