Using Multi-Touch for Movement (TriangleShooter)

Using Multi-Touch for Movement (TriangleShooter)

  • Comments 2

Welcome to the second post in the series building TriangleShooter. In this post, I will be going over drawing a sprite to the screen, then moving it around using multi-touch. In the last post, I described what you got from File –> New Project, so we didn’t have any code as such as our starting point. This means that we’ll be starting from a new project named TriangleShooter. To make this happen, open “Microsoft Visual Studio 2010 Express for Windows Phone” from the start menu and selecting File –> New Project. From the New Project dialog that comes up, choose XNA Game Studio 4.0, pick Windows Phone Game (4.0), change the name at the bottom of the dialog to TriangleShooter and click OK.


This will get you the solution we went over last time, including two projects, TriangleShooter and TriangleShooterContent. We need to add a graphic that we will draw to the screen, so we’ll start by adding that into the Content project. I’ve added the Triangle graphic to SkyDrive, so you can grab that now. Once you’ve got that, we’ll add it into the project by right clicking on the content project, and choosing Add –> Existing Item…


Navigate to wherever you extracted the Triangle.png file, select it, and click Add. It should pop up under the Content Project. You can also drag and drop into the content folder if you prefer that. At this point, let’s take a look at some of the properties of the newly added Triangle.png file. To do this, right click on the file in the solution explorer and select properties. This should pop up the properties window beneath the solution explorer.


By default, a few things are set here based on the file type. The most important one to look at is the Asset Name. That is how you will refer to the file in code when we load it. Also important are the Content Importer and Processor. These determine how the file will be treated inside of the application. In this case, it is being handled by the Texture pipeline, but you could make use of a custom importer and processor, something I’ll take a look at in a future post.

So now that we’ve got the file included in the content project, we’ll need to draw it. To begin with, we’ll create a variable to store the texture. The type will be Texture2D, and we’ll name it triangle. Place the following code inside of the Game1 class beneath the SpriteBatch declaration, so it looks like this:

Adding a variable for triangle
  1. public class Game1 : Microsoft.Xna.Framework.Game
  2. {
  3.     GraphicsDeviceManager graphics;
  4.     SpriteBatch spriteBatch;
  6.     Texture2D triangle;

Next, we need to load this content into the variable. Since we’re loading content, we’ll use the LoadContent method. Inside of LoadContent, we need to make use of the templated Content.Load method, bringing over a Texture2D with an asset name of Triangle, and put that into triangle.

Loading triangle
  1. protected override void LoadContent()
  2. {
  3.     // Create a new SpriteBatch, which can be used to draw textures.
  4.     spriteBatch = new SpriteBatch(GraphicsDevice);
  6.     triangle = Content.Load<Texture2D>("Triangle");
  7. }

Finally, we’ll need to draw it. Naturally, we’ll do this in the Draw method. We’ll make use of the SpriteBatch, which allows you to queue up a bunch of draw commands for efficiency. It does this by requiring a call to Begin at the beginning, and End when you’re done. Between those calls come all of your drawing code. The SpriteBatch’s Draw function is highly overloaded. We’ll use the overload that takes a Texture2D, a Vector2, and a Color. The Texture2D is what you want to draw, the Vector2 is where you want the top left corner of the graphic to be, and the Color is a tint applied to the graphic. In this case, we’ll draw the triangle, draw it in the top left of the display, and tint it white, which won’t change the color.

Drawing the Triangle
  1. protected override void Draw(GameTime gameTime)
  2. {
  3.     GraphicsDevice.Clear(Color.CornflowerBlue);
  5.     spriteBatch.Begin();
  6.     spriteBatch.Draw(triangle, Vector2.Zero, Color.White);
  7.     spriteBatch.End();
  9.     base.Draw(gameTime);
  10. }

If you run the code now, this is what you’ll see:


Looks good! There are a couple of changes we should make before going any further, though. First of all, I want this application to be full screen. To do this, I’ll add a line of code to the constructor, telling it that I want the graphics to be displayed in full screen mode.

Switching to Full Screen
  1. public Game1()
  2. {
  3.     graphics = new GraphicsDeviceManager(this);
  4.     Content.RootDirectory = "Content";
  6.     graphics.IsFullScreen = true;
  8.     // Frame rate is 30 fps by default for Windows Phone.
  9.     TargetElapsedTime = TimeSpan.FromTicks(333333);
  10. }

Secondly, let’s change the background color to black. It adds a more spacey feel to the game. We’ll just change the line of code that clears the screen down in the Draw method to clear using Color.Black instead of Color.CornflowerBlue.

Clearing the Screen with Black
  1. protected override void Draw(GameTime gameTime)
  2. {
  3.     GraphicsDevice.Clear(Color.Black);

Now when you run the program, it looks a bit better:


For the last bit of this post, I’ll show you how to make the Triangle move around using multi-touch. We’ll start by adding another variable to the class to track position, called position. It will be of type Vector2, to hold the top left of the graphic. We’ll put it directly after the declaration of the triangle, like so:

Adding the position Variable
  1. Texture2D triangle;
  2. Vector2 position;

We then need to give it a default value. Since we’re not actually loading it from anywhere, it won’t go into LoadContent, instead it goes into the Initialize method.

Initializing position
  1. protected override void Initialize()
  2. {
  3.     position = Vector2.Zero;
  5.     base.Initialize();
  6. }

Then, we modify the line of code that draws the triangle to make use of position, replacing Vector2.Zero with position.

Using position in Draw
  1. spriteBatch.Begin();
  2. spriteBatch.Draw(triangle, position, Color.White);
  3. spriteBatch.End();

If we run now, we get the same behavior as we did before. This makes sense, because we’re not actually updating the position anywhere. To update the variable, we’ll want to add some code into the Update method. Specifically, we’ll go through the active touch points and set position to their position. In the next post, I’ll go into a method of finding out which touch point is the primary (first) touch point, and only updating using it, but for now, we’ll just update it using whatever touch point gets there. To do this, we’ll just loop through each of the touch points using a foreach loop and set the position, as so:

Updating the position
  1. protected override void Update(GameTime gameTime)
  2. {
  3.     // Allows the game to exit
  4.     if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
  5.         this.Exit();
  7.     foreach (TouchLocation tl in TouchPanel.GetState())
  8.     {
  9.         position = tl.Position;
  10.     }
  12.     base.Update(gameTime);
  13. }

And that’s it! Run the program, and you can move the triangle around with your finger (or mouse, in the emulator). If you have a multitouch display or a Windows Phone 7, you can see what happens when you put more than one finger on the screen. Essentially, it updates to each of the touch points, which means whichever was the last one down will be where the triangle goes.


Download the completed source code

  • Hi, I was wondering how you would do this for a "Gamescreen" that gets referenced into my main game1, is there a possibility of this?

  • Hi, I was wondering how you would do this for a "Gamescreen" that gets referenced into my main game1, is there a possibility of this?

Page 1 of 1 (2 items)
Leave a Comment
  • Please add 5 and 2 and type the answer here:
  • Post