Windows Phone 7 のゲーム開発でのタッチ操作 その 1 タッチ操作の基本
Windows Phone 7 の開発を始めよう
Windows Phone 7 のアプリケーションプラットフォーム
Windows Phone 7 の開発環境が 2010 年 9 月に正式版がリリースされ、Windows Phone 7 が実際に動くスマートフォンも市場に出回り始めました。
図 1 ：HTC から販売されている Windows Phone 7 を搭載した「HTC 7 Trophy」
Windows Phone 7 上で動くアプリケーションを作る場合、使用するプログラムのフレームワークとしては「Silverlight」か「XNA Framework」のいずれかから選択します。一般的にはゲーム開発には「XNA Framework」、ツールなどその他のアプリケーションでは「Silverlight」を使うことになるでしょう。
ここではゲーム向けの開発として「XNA Framework」を使用し、Windows Phone 7 のユーザーインターフェースとして最も使われることになる「タッチパネル」の使い方について説明します。簡単な使い方などは XNA Game Studio のヘルプに書いてあるので、ここでは少し踏み込んだ形で説明したいと思います。
開発環境を整える
ここでは XNA Game Studio を少しでも触ってみたことがある方を視点に説明しますので、インストールやセットアップなどの細かい説明については省きます。XNA Game Studio 付属のヘルプや Web などにもたくさん情報がありますので各自調べてみてください。私のサイト(http://sorceryforce.com/xna/)でもいくつか紹介しています。
- Windows Phone Developer Tools
- Zune Software
- Windows Phone 7 が動作する実機 もしくは Windows 7 マルチタッチ環境
- Windows Phone 開発者登録申請
図 2 ：Microsoft Visual Studio 2010 Express for Windows Phone(Windows Phone Developer Tools に含まれます)
図 3 ：Windows Phone エミュレーター
プログラミング！ - 1. タッチ情報を取得
今回のサンプルについて
Windows Phone 7 で使用される XNA Framework のバージョンは「4.0」ですが、それまではタッチパネル用のクラスは存在せず、主にキーボードやマウス、ゲームパッドが主流でした。4.0 になってからはWindows Phone 7 がサポートされるようになったということもあり、タッチパネル専用のクラスが新たに追加されました。
この記事では主にそのクラスを中心に説明していきますが、実は単純なタッチ位置の情報を取得する場合、タッチパネル用のクラスを使わなくても別なクラスで代用することができます。それは「Mouse」クラスです。このサンプルでは Mouse クラスを使用してタッチ情報を取得してみたいと思います。
このサンプルプログラムのゴール
画面をタッチするとタッチ位置に合わせて画像(スプライト)が配置されます。
図 3,4 ：タッチした位置にスプライトが表示される
プログラム - フィールドの宣言
さっそくサンプルのプログラムと一緒に説明していきたいと思います。タッチ操作に直接関係ない部分や初めから作成されているプログラムなどについての説明は省いていますので、別途配布しているソースコードを参照してください。
public class Game1 : Microsoft.Xna.Framework.Game
{
GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;
<summary>
テクスチャー
</summary>
Texture2D texture;
<summary>
タッチしている位置
</summary>
Vector2 touchPosition;
public Game1()
{
フィールドにはタッチした場所に描画するためのテクスチャーとタッチ位置を保存しておくための Vector2 構造体の変数を宣言しています。
プログラム - テクスチャーの読み込み
テクスチャーはあらかじめコンテンツプロジェクトに追加しておき、LoadContent メソッドで読み込みます。タッチパネル関連とは直接関係ない内容なので詳しい説明は省きます。
図 6 ：コンテンツプロジェクトに「Texture.png」を追加しておく
図 7 ：今回サンプルで使用する画像
protected override void LoadContent()
{
// 新規の SpriteBatch を作成します。これはテクスチャーの描画に使用できます。
spriteBatch = new SpriteBatch(GraphicsDevice);
// テクスチャーをコンテンツパイプラインから読み込む
texture = Content.Load<Texture2D>("Texture");
}
プログラム - タッチ情報取得
タッチ情報は Game.Update メソッド内で取得しています。
タッチ情報を専用のクラスからではなく「Mouse」クラスを使用して取得しています。「Mouse.GetState」メソッドを使用すると現在のマウスの状態を「MouseState」構造体で返しますので、「MouseState.X」「MouseState.Y」プロパティからタッチしている位置を取得できます。
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);
}
Mouse クラスを使用してタッチ情報を取得する注意点としては、あくまでも簡易的な情報しか返さないということです。Mouse クラスを使用した場合の取得できる情報の制限としては「シングルタッチのみ」「タッチ位置(MouseState.X, MouseState.Y プロパティ)」「タッチしているかどうか(MouseState.LeftButton)」のみです。マルチタッチやジェスチャーには対応していません。また、タッチしていない場合に位置を取得した場合、前回のタッチ位置を返し続けます。タッチしていないと入力情報を受け取れないため、マウスによるマウスオーバーのような位置情報取得もできません。
プログラム - テクスチャーの描画
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.CornflowerBlue);
// スプライトの描画準備
spriteBatch.Begin();
// タッチしている位置にテクスチャーを描画
spriteBatch.Draw(texture, touchPosition, Color.White);
// スプライトの一括描画
spriteBatch.End();
base.Draw(gameTime);
}
今回のサンプルのまとめ
タッチ情報の取得を Mouse クラスで代用しているため、今回のサンプルのようにタッチ位置の取得ぐらいしか情報を得ることができません。逆にタッチ専用のクラスを使用した場合はより多くの情報を取得することができます。
そのため Mouse クラスを使用してのタッチ情報取得はメリットがないのかというとそうではありません。Mouse クラスを使用した場合、以下の面でメリットがあります。
- Windows 上で動作するマウス対応ゲームとコードを共有できる
- タッチ位置情報を最も少ないコードで記述できる
- 余計な処理を省くことができる
もし、シングルタッチのみでタッチ位置情報しか使用しないのであれば、Mouse クラスを使用した方が上記のメリットを活用できるでしょう。