COMP 160 Lab 2: Sprites

This tutorial covers:

Using XNA to modify a simple PC game
Loading graphical content into a game
Basic visualization of sprites
Rotating and Translating sprites on the screen

Sprites

For the purposes of Comp 160, sprites are 2D images that are integrated into your game.

Lab assignment: As in the last Mathematica module, we will control and display a simple spaceship. Download this code framework for use in this lab. It partially implements a "game" where you have four buttons on screen to control the movement of your spaceship. You will need to complete the code, as described more in the rest of this document.

Obtaining and Preparing an Image to be a Sprite

First, you need a spaceship. Rather than using a graphic editor, just "borrow" an image from the web. Exercise: Do the following steps.

Find an image on the web to use as your spaceship. PNG images will work the best.

You'll want the ship image's orientation correspond to that of its code representation. The simplest way is to use an image that faces right (i.e., at an angle of zero radians).
Save this file in the Textures folder inside of the Content folder.
In the Solution Explorer, right-click on the Textures folder, and add an existing item.
Select the image file types and search for your image.
The image needs a name that your code can reference. C# uses its asset name, rather than the file name. In the Solution Explorer, right-click on the image name, go to the image's properties, and edit the asset name.

Loading a Sprite into the Program

There are several tasks that must be performed before you can draw sprites. First you must actually create the texture from your sample image. The framework is designed so that you only need to modify the YourCode class. In the YourCode constructor, the ship for our game is set to null. Change this to a new Ship, using lab.Content to load the texture, using the following line:

     lab.World.Ship = new Ship(lab.Content.Load<Texture2D>("Textures\\ship"));

This assumes "ship" is the image's asset name. Note the use of the Textures folder: Lab2.cs specifies that the root directory of the Content Manager should be the Content sub-project, so any folders in Content need to be specified. Also note the double backslash — since the backslash we want in the file path is a special character, it must be preceded by the "escape" character, which is also the backslash. Alternately, use @-quoting for strings, e.g., @"c:\Docs\Source\a.txt".

Drawing the Sprite

In XNA, sprites are rendered using a SpriteBatch object. The following line (already in the code) performs this action:

     spriteBatch = new SpriteBatch(GraphicsDevice);

In order to draw a collection of sprites, here our single sprite, on the screen, the following code is already in the Draw method:

     spriteBatch.Begin();
     world.Draw(spriteBatch);
     spriteBatch.End();

The World.Draw method in turn calls Ship.Draw, which calls

     batch.Draw(img, pos, null, Color.White, theta, orig, scale, SpriteEffects.None, 0);

The first argument here is the texture file. Next we have the position of the image in screen coordinates. The source rectangle follows (you can keep this null). Then there are the tint color, the rotation angle, origin of rotation, and scaling factor, which should be self-explanatory given the previous Mathematica module. Next, you specify some SpringEffects. Finally, a number indicates the depth ordering, which controls which sprites overlap which, if there are multiple in the same location.

Exercise: Experiment with the different parameters, to get a better feel for their function.

Implementing Our Game

First, look at the provided framework to get a general feel for creating simple user interface elements.

In particular, look at the definitions of world.Ship.Position and world.Ship.Rotation. These are C# properties. When using them, you can just use them like fields, as in this example.

Next, more specifically look at the Ship class for this game's controls. When a player clicks the "Forward" button, the ship should move in the direction it is facing for some discrete number of pixels. When a player clicks on the "Back" button, the ship should similarly move in the opposite direction. When a player clicks "Turn (Counter)Clockwise", the ship should rotate about its centroid.

Exercise: Finish the code by updating the fields in the proper manner to encode the desired behavior. The rendering of the ship is already taken care of for you by the code outlined above.

For Fun

If you're interested, check out these samples from xna.com:

Tiled Sprites: Infinitely tile a background image, without using more computer resources than necessary. This sample includes a Camera2D class which allows you to move the view position, and rotate it, as well.

This uses the following keyboard controls:
- Move Camera: Arrow Keys
- Move bouncing ball: W,A,S,D
- Rotate Camera: Q,E
Sprite Sheet: Create an easily-accessible sprite sheet programatically. This sample uses a Content Pipeline project to gather your separate images into a sprite sheet. The Content Pipeline project helps XNA compile files in a manner you want, rather than any of its default settings. Since XNA has no idea what the format is any more, it allows reading the compiled files, as well.