Windows Phone 7 Development – Tutorial 2, Static sprites

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.
 

For now, the most important property is the "Asset name" property that is used to reference the given resource content at runtime.
 
Step 4: Loading the asset into memory
Next we will need to load our asset into memory. This is done by using a Texture object, and using our content project to get the sprite we want and copy it into the Texture object.
Let’s declare our texture object as a global variable. Add this code in the top inside our game class:

// This will contain our sprite.

Texture2D mySprite;

// This is the coordinates of where we want to render our sprite.
Vector2 spritePosition = new Vector2(100);

 
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.
 
Now we will have to load our sprite from the content project and copy it into the mySprite variable. The XNA Framework contains a class that lets you access the content project and return any object you want. This is done by calling the Content.Load() function. Add this code to the LoadContent function inside your game class.

mySprite = Content.Load<

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.

spriteBatch.Begin(

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);

This line of code sets the background color of our game to white, hiding the white corners of our sprite as you can’t see through any part of the sprite yet.
I mentioned something about alpha earlier, and I won’t go in to spesific detailes yet, except that you can use alpha on a sprite to remove the parts of the sprite that you want to see through, making it possible to have an advanced image or a 3D space as you background to the sprite.

Your draw method should now look like this:

Now, if you press F5, you will see your game running, with a white background and your sprite standing still at position 100,100.

So that’s it for our static sprite rendering tutorial. I suggest you play around with the various parameters like setting the background color to different colors, the color on spriteBatch.Draw to something else, and even make your own sprite and render that!

Source/Binary: Tutorial 2.rar

Advertisements
This entry was posted in Windows Phone. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s