Touch interaction in game development for Windows Phone 7 Part 1 Touch interaction basics

Get started with Windows Phone 7

Windows Phone 7 Application Platform

The Windows Phone 7 development environment was officially released in September 2010, and smartphones that actually run Windows Phone 7 have started to hit the market.

Figure 1: HTC 7 Trophy with Windows Phone 7 sold by HTC

When you create an application that runs on Windows Phone 7, you can choose between "Silverlight" and "XNA Framework" as the program framework. In general, you will use "XNA Framework" for game development and "Silverlight" for other applications such as tools.

This section uses the XNA Framework for game development and explains how to use the touch panel, which will be the most used user interface for Windows Phone 7. The simple usage is described in the XNA Game Studio help, so I would like to explain it in a slightly more in-depth way here.

Prepare your development environment

This section is from the perspective of someone who has even slightly touched XNA Game Studio, so I will omit detailed instructions such as installation and setup. There is a lot of information in the help that comes with XNA Game Studio and on the web, so please check it out yourself. I also have some on my site (http://sorceryforce.com/xna/).

• Windows Phone Developer Tools
• Zune Software
• A real device running Windows Phone 7 or a Windows 7 multi-touch environment
• Windows Phone Developer Registration Application

Figure 2: Microsoft Visual Studio 2010 Express for Windows Phone (included in Windows Phone Developer Tools)

Figure 3: Windows Phone Emulator

Programming! - 1. Get touch information

About this sample

The version of the XNA Framework used in Windows Phone 7 is "4.0", but until then there were no classes for touch panels, and keyboards, mice, and gamepads were the mainstream. Since 4.0, Windows Phone 7 has been supported, and a new class dedicated to touch panels has been added.

In this article, we will mainly explain that class, but in fact, if you want to get simple touch position information, you can substitute another class without using a class for touch panels. It is the "Mouse" class. In this sample, we will use the Mouse class to get touch information.

Goals of this sample program

When you touch the screen, the image (sprite) is placed according to the touch position.

Figure 3,4: Sprites appear at touched positions

Program - Declaring Fields

I would like to explain it together with the sample program right away. Explanations of parts that are not directly related to touch operation and programs created from the beginning are omitted, so please refer to the source code distributed separately.

public class Game1 : Microsoft.Xna.Framework.Game
{
  GraphicsDeviceManager graphics;
  SpriteBatch spriteBatch;

  /// <summary>
  /// テクスチャー
  /// </summary>
  Texture2D texture;

  /// <summary>
  /// タッチしている位置
  /// </summary>
  Vector2 touchPosition;

  public Game1()
  {

The field declares a texture to draw at the touch location and a Vector2 structure variable to store the touch position.

Program - Loading textures

Textures are already added to the content project and loaded with the LoadContent method. Since the content is not directly related to touch panels, detailed explanations are omitted.

Figure 6: Add a Texture.png to your content project

Figure 7: Image used in this sample

protected override void LoadContent()
{
  // 新規の SpriteBatch を作成します。これはテクスチャーの描画に使用できます。
  spriteBatch = new SpriteBatch(GraphicsDevice);

  // テクスチャーをコンテンツパイプラインから読み込む
  texture = Content.Load<Texture2D>("Texture");
}

Program - Touch Information Acquisition

The touch information is retrieved in the Game.Update method.

I'm getting the touch information using the "Mouse" class instead of from a dedicated class. When using the "Mouse.GetState" method, the current mouse state is returned in the "MouseState" structure, so you can get the touch position from the "MouseState.X" and "MouseState.Y" properties.

protected override void Update(GameTime gameTime)
{
  // ゲームの終了条件をチェックします。
  if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
    this.Exit();

  // マウスの状態を取得(ここではタッチパネルの簡易的な情報)
  MouseState mouseState = Mouse.GetState();

  // タッチしている位置を設定
  touchPosition = new Vector2(mouseState.X, mouseState.Y);
  base.Update(gameTime);
}

One thing to note about using the Mouse class to get touch information is that it only returns simple information. The only restrictions on information that can be obtained when using the Mouse class are "single touch only", "touch position (MouseState.X, MouseState.Y property)", and "whether or not to touch (MouseState.LeftButton)". It does not support multi-touch or gestures. Also, if you get a position when you haven't touched it, it will continue to return the previous touch position. Since input information cannot be received unless it is touched, location information cannot be acquired such as mouseover by mouse.

Program - Drawing Textures

protected override void Draw(GameTime gameTime)
{
  GraphicsDevice.Clear(Color.CornflowerBlue);

  // スプライトの描画準備
  spriteBatch.Begin();

  // タッチしている位置にテクスチャーを描画
  spriteBatch.Draw(texture, touchPosition, Color.White);

  // スプライトの一括描画
  spriteBatch.End();

  base.Draw(gameTime);
}

Summary of this sample

Since the Mouse class substitutes the acquisition of touch information, information can only be obtained by obtaining the touch position as in this sample. Conversely, if you use a touch-only class, you can get more information.

Therefore, it is not without merit to get touch information using the Mouse class. Using the Mouse class provides the following benefits:

• Can share code with mouse-enabled games running on Windows
• Touch location information can be written with the least amount of code
• Unnecessary processing can be omitted

If you only use single touch and only touch positioning, you can take advantage of the above benefits by using the Mouse class.