Touch interaction in game development in Windows Phone 7 Part 1 Touch Basics

Page updated :

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 are also on the market.

図 1 :HTC から販売されている Windows Phone 7 を搭載した「HTC 7 Trophy」
Figure 1: HTC 7 Trophy with Windows Phone 7 sold by HTC

If you are creating an application that runs on Windows Phone 7, choose either Silverlight or XNA Framework as the framework for your program. In general, you'll use "XNA Framework" for game development, and Silverlight in other applications, such as tools.

This section describes how to use the XNA Framework as a game development and how to use the touch panel, which is the most common user interface for Windows Phone 7. The xna Game Studio help is a simple way to use it, so I'd like to go a little further here.

Set up a development environment

I'll explain from the point of view if you've ever touched XNA Game Studio, so I'll leave out the details of installation and setup. There's a lot of help and web information attached to XNA Game Studio, so check it out for yourself. I also have some on my site (http://sorceryforce.com/xna/).

図 2 :Microsoft Visual Studio 2010 Express for Windows Phone(Windows Phone Developer Tools に含まれます)
Figure 2 : Microsoft Visual Studio 2010 Express for Windows Phone (included in Windows Phone Developer Tools)

図 3 :Windows Phone エミュレーター
Figure 3: Windows Phone Emulator

Programming! - 1. Get touch information

About this sample

The XNA Framework version used in Windows Phone 7 is 4.0, but until then, there were no touch panel classes, mainly keyboards, mice, and gamepads. After 4.0, Windows Phone 7 was now supported, and a new touch panel-specific class was added.

This article focuses on the class, but if you want to get simple touch position information, you can substitute it in a different class without using a touch panel class. It is a Mouse class. In this sample, I'd like to use the Mouse class to get touch information.

The goal of this sample program

When you touch the screen, the image (sprite) is positioned to match the touch position.

図 3,4 :タッチした位置にスプライトが表示される 図 3,4 :タッチした位置にスプライトが表示される
Figure 3,4: Spriteappears in touch

Program - Declaring fields

I would like to explain it with the sample program. Please refer to the source code distributed separately because i do not explain the part which is not directly related to the touch operation and the program which is created from the beginning.

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 variable in the Vector2 structure to store textures and touch positions to draw where it is touched.

Program - Loading textures

Add the texture to the content project before loading it with the LoadContent method. Because it is not directly related to touch panel related, i will leave out detailed explanation.

図 6 :コンテンツプロジェクトに「Texture.png」を追加しておく
Figure 6: Add Texture.png to content projects

図 7 :今回サンプルで使用する画像
Figure 7: Image used in this sample

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

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

Program - Get Touch Information

Touch information is retrieved in the Game.Update method.

Touch information is obtained using the Mouse class rather than from a dedicated class. The Mouse.GetState method returns the current mouse state in the MouseState structure, so you can get the position you are touching 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);
}

A caveat to using the Mouse class to retrieve touch information is to return only simple information. The only restrictions on the information that can be obtained using the Mouse class are "single touch only", "touch position (MouseState.X, MouseState.Y property)", and "Touch or not(MouseState.LeftButton)". It does not support multi-touch or gestures. Also, if you get a position if you haven't touched it, it will continue to return the previous touch position. If you don't touch it, you won't be able to receive input information, so you won't be able to get location information like mouse over with the 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 retrieval of touch information, you can only get the information by getting the touch position, as in this sample. Conversely, if you use touch-only classes, you can get more information.

Therefore, it is not the case whether touch information acquisition using the Mouse class is not beneficial. Using the Mouse class benefits in the following ways:

  • Share code with mouse-enabled games running on Windows
  • Write touch location information with the least code
  • Can eliminate unnecessary processing

If you only use touch location information with single touch, you'll be able to take advantage of the benefits of the mouse class.