Windows Phone 7 Development
Tutorial 2 – Static sprites

Today we are going to write a little bit of code. It will be very simple but it will get you started on rendering your own sprites.

 

So, what is a sprite?

A sprite is, simply, an image that is pre-rendered( like a jpg file ) that is rendered in to a larger scene. A sprite can be a hero you control, enemies, a background, a logo and so on.

fig 2.1 – A scene from Final Fantasy VI

 

In Fig 2.1, you can see a screenshot from the game Final Fantasy VI. This scene is build up by combining many sprites into a final image. We got sprites that represents the player characters, the enemy, the background and the interface. Even fonts might be rendered as sprites.

A sprite can have various dimensions, like a size of 32×32, 128×128, 32×64, 332×87, or simply NxM.

Let’s get started.

Step 1: Creating our sprite
First of all we will need a sprite that we can render:

This sprite is a 32×32 sprite, and will be used in our example.

 

Step 2: Creating our project
Start Visual Studio and create a new Windows Phone Game (4.0) project and give it a decent name.

 

Step 3: Adding our sprite to the project
XNA Game Studio 4.0 got two projects when first created:
– The game project

– The content project

 

The game project is where you write the code for your game, and the content project is where you add the resources you want in your game.

This is separated so you can use the same content project in different projects.
The Content References folder is used to reference a content project with your game project. When creating a new project using the Windows Phone template, a reference to the auto-generated content project is automatically added the Content References folder.

 

Let’s add our sprite to the content project.

Right click the WP7Dev_Tutorial2Content folder and select Add->Existing Item…

 

A window pops up that let’s you select a file. Download the sprite above and select that file using the file selector window, and press OK. When this is done, you can see that the image is added to you project. Once the file is added to the content project, a number of properties is set to the file. To see these properties, right click on the file in the solution and select properties.

 

mySprite is the object that will load our texture, and spritePosition is the coordinates of where we want to render our sprite. In this case, we set spritePosition to contain 100 as the X value, and 100 as the Y value. We could also write that line of code as Vector2 spritePosition = new Vector2(100,100); instead, giving us the same result.
 

Texture2D>("wp7d2_02");

What this does it to ask the Content project to return a object of the type Texture2D with the assetname of wp7d2_02, and store it in the mySprite variable.

Step 5: Render our sprite at the given coordinates
The last thing we need to do is to add some code that renders our sprite. This must be done in the Draw function of our game class. You might have noticed a object that is automatically added to our project, the spriteBatch object? This is what we will use to push sprites to our GPU for rendering. The spriteBatch contains a Begin and End function. To start rendering sprites, you will need to invoke the Begin function, then render all the sprites you want to render, and when you are done rendering sprites, you invoke the End method.

SpriteSortMode.BackToFront, BlendState.AlphaBlend);
spriteBatch.Draw(mySprite, spritePosition, Color.White);
spriteBatch.End();

As you can see from the code above, we begin rendering sprites by invoking the Begin method of our spriteBatch object, render our sprites using the Draw method of the spriteBatch object and end drawing sprites using the End() method of our spriteBatch object.

The parameters of Begin tells the spriteBatch to draw the first sprite behind the next sprite and so on. So the last sprite you draw will be the sprite that is on the top, and the BlendState is used to blend sprites together( more on this in a later tutorial ).

The first parameter of Draw is mySprite, the sprite we want to draw, the next is the 2d( x,y ) vector of where we want to draw our sprite, and the last is what color we want to have on the sprite. If you leave this to White, you will combine White with the color on our sprite which will not affect the color at all.

Next, let us change the color of our background from CornFlowerBlue to White by changing the following line of code:
GraphicsDevice.Clear(Color.White);