Windows Phone 7 Game Design: Placing the image in a specific point


Now you have an image with no background or alpha channel, well that’s nice.  What are you going to do with it?  If it sits in your picture folder, not doing much.

All right, let’s take a look at placing a specific image in a point certain location.  No software telling the image to move, and so forth.  This is a blog with many images which requires that you scroll down. The code is attached in zip file at the bottom of blog.

Super exciting goal:

image

Starting

First open your version of Visual Studio, in my case I am using Visual Studio Express for Windows Phone (VSESP), normally I use Visual Studio 2010 Ultimate, but to keep this simple, I will make use of the VSEWP.  Open a new project, and create a Windows Phone 4.0 project, name the project whatever you want.

image

Once the new project opens you will see the Visual Studio IDE:

image

Pick Windows Phone 7.1 and then OK

Make sure Solution Explorer is open:

image

Adding an Image

Add an image to the, use Existing Item after right clicking

image

Browse to the image you want to use, mine is the fish from the previous blog:

image

Variables

You will need to add the following variables, find the top of the class and add the two new lines via cut and paste, the t_ and v_ in front of the variables are something that I do to help me remember that one is for texture and one for vectors.  The better practice would be to not use the underscore, I used to the underscore in this scenario.

Code Snippet
  1. public class Game1 : Microsoft.Xna.Framework.Game
  2. {
  3.     GraphicsDeviceManager graphics;
  4.     SpriteBatch spriteBatch;
  5.     Texture2D t_Fish;
  6.     Vector2 v_Fish;

Vectors

The vector needs to be initialized, in the case I selected the “override” as shown in the image:

image

Here is my code:

Code Snippet
  1. protected override void Initialize()
  2.         {
  3.             // TODO: Add your initialization logic here
  4.             v_Fish = new Vector2(100, 100);
  5.  
  6.  
  7.             base.Initialize();
  8.         }

Drawing the Fish

Now we need to draw the fish, since you won’t move the fish, you can simply place it into a spriteBatch cycle as shown in the code, for the spriteBatch. Draw, I used the override as shown in the image:

image

Here is the code:

Code Snippet
  1. protected override void Draw(GameTime gameTime)
  2.         {
  3.             GraphicsDevice.Clear(Color.CornflowerBlue);
  4.  
  5.             // TODO: Add your drawing code here
  6.             spriteBatch.Begin();
  7.             spriteBatch.Draw(t_Fish,v_Fish,Color.White);
  8.             spriteBatch.End();
  9.  
  10.             base.Draw(gameTime);
  11.         }

Finally

If both of us got everything right then you should see, and if you are part of the theological practice that uses fish to indicate that you are member this might be pretty exciting, otherwise, for the others reading this, it might be boring.  However you should be proud that you have seen how to draw an image in XNA.

image

Comments (2)

  1. Following this tutorial, I noticed that t_Fish wasn't initialized and so I always get an error.

    Also, I don't see the link to the code.

  2. Berenice Maya says:

    I did not find the error. The only thing I didn't understand from the code was the color. I don't get why the fish is "colored"  white in the code but it is not white on the screenshot.