Érintéses interakció a Windows Phone 7 játékfejlesztésében 1. rész Az érintéses műveletek alapjai

Oldal frissítve :
Oldal létrehozásának dátuma :

Bevezetés a Windows Phone 7 használatába

Windows Phone 7 alkalmazásplatform

A Windows Phone 7 fejlesztői környezet hivatalosan 2010 szeptemberében jelent meg, és a Windows Phone 7-et ténylegesen futtató okostelefonok elkezdtek megjelenni a piacon.

図 1 :HTC から販売されている Windows Phone 7 を搭載した「HTC 7 Trophy」
1. ábra: HTC 7 Trophy Windows Phone 7 telefonnal, melyet a HTC értékesített

Amikor Windows Phone 7 rendszeren futó alkalmazást hoz létre, programkeretként választhat a "Silverlight" és az "XNA Framework" között. Általánosságban elmondható, hogy az "XNA keretrendszert" használja a játékfejlesztéshez, a "Silverlight" pedig más alkalmazásokhoz, például eszközökhöz.

Ez a rész az XNA keretrendszert használja a játékfejlesztéshez, és elmagyarázza, hogyan kell használni az érintőpanelt, amely a Windows Phone 7 leggyakrabban használt felhasználói felülete lesz. Az egyszerű használatot az XNA Game Studio súgója ismerteti, ezért itt szeretném egy kicsit részletesebben kifejteni.

A fejlesztési környezet előkészítése

Ez a rész annak a szemszögéből származik, aki még egy kicsit is megérintette az XNA Game Studio-t, ezért kihagyom a részletes utasításokat, például a telepítést és a beállítást. Az XNA Game Studio súgójában és az interneten rengeteg információ található, ezért kérjük, nézze meg saját maga. Nekem is van néhány a webhelyemen (http://sorceryforce.com/xna/).

図 2 :Microsoft Visual Studio 2010 Express for Windows Phone(Windows Phone Developer Tools に含まれます)
2. ábra: Microsoft Visual Studio 2010 Express for Windows Phone (a Windows Phone fejlesztői eszközök része)

図 3 :Windows Phone エミュレーター
3. ábra: Windows Phone-emulátor

Programozás! - 1. Érintéses információk lekérése

A minta ismertetése

A Windows Phone 7-ben használt XNA keretrendszer verziója "4.0", de addig nem voltak osztályok az érintőpanelekhez, és a billentyűzetek, egerek és játékvezérlők voltak a mainstreamek. A 4.0 óta a Windows Phone 7 támogatott, és egy új, az érintőpaneleknek szentelt osztály került hozzáadásra.

Ebben a cikkben elsősorban ezt az osztályt fogjuk elmagyarázni, de valójában, ha egyszerű érintési pozíció információkat szeretne kapni, akkor helyettesíthet egy másik osztályt anélkül, hogy osztályt használna az érintőpanelekhez. Ez az "Egér" osztály. Ebben a példában az Egér osztályt fogjuk használni az érintési információk lekéréséhez.

A mintaprogram céljai

Amikor megérinti a képernyőt, a kép (sprite) az érintési pozíciónak megfelelően kerül elhelyezésre.

図 3,4 :タッチした位置にスプライトが表示される 図 3,4 :タッチした位置にスプライトが表示される
3,4 ábra: A sprite-ok megérintett helyeken jelennek meg

Program – Mezők deklarálása

Ezt a mintaprogrammal együtt szeretném azonnal elmagyarázni. Az érintéses működéshez közvetlenül nem kapcsolódó alkatrészek és a kezdetektől fogva létrehozott programok magyarázata kimarad, ezért kérjük, olvassa el a külön terjesztett forráskódot.

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

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

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

  public Game1()
  {

A mező deklarál egy textúrát az érintési helyen történő rajzoláshoz, és egy Vector2 szerkezetváltozót az érintési pozíció tárolásához.

Program - Textúrák betöltése

A textúrák már hozzá vannak adva a tartalomprojekthez, és a LoadContent metódussal vannak betöltve. Mivel a tartalom nem kapcsolódik közvetlenül az érintőpanelekhez, a részletes magyarázatok kimaradnak.

図 6 :コンテンツプロジェクトに「Texture.png」を追加しておく
6. ábra: Textúra.png hozzáadása a tartalomprojekthez

図 7 :今回サンプルで使用する画像
7. ábra: A mintában használt kép

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

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

Program - Érintéses információszerzés

Az érintési információk a Game.Update módszerben kerülnek lekérésre.

Az érintési információkat az "Egér" osztály használatával kapom meg, nem pedig egy dedikált osztályból. A "Mouse.GetState" metódus használatakor az egér aktuális állapota a "MouseState" struktúrában lesz visszaadva, így az érintési pozíciót a "MouseState.X" és a "MouseState.Y" tulajdonságokból kaphatja meg.

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);
}

Egy dolgot meg kell jegyezni az Egér osztály érintési információk megszerzéséhez való használatával kapcsolatban, hogy csak egyszerű információkat ad vissza. Az egérosztály használata során beszerezhető információkra vonatkozó egyetlen korlátozás a "csak egyérintéses", az "érintési pozíció (MouseState.X, MouseState.Y tulajdonság)" és a "hogy megérintse-e (MouseState.LeftButton)". Nem támogatja a többérintéses vagy kézmozdulatokat. Továbbá, ha olyan pozíciót kap, amelyhez még nem nyúlt hozzá, akkor az továbbra is visszaadja az előző érintési pozíciót. Mivel a bemeneti információk csak akkor fogadhatók, ha megérintik őket, a helyadatok nem szerezhetők be, például az egérmutatót egérrel.

Program - textúrák rajzolása

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

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

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

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

  base.Draw(gameTime);
}

A minta összefoglalása

Mivel az egér osztály helyettesíti az érintési információk megszerzését, az információ csak az érintési pozíció megszerzésével szerezhető be, mint ebben a mintában. Ezzel szemben, ha csak érintéses osztályt használ, több információt kaphat.

Ezért nem érdemtelen, hogy érintési információkat szerezzen az Egér osztály segítségével. Az Egér osztály használata a következő előnyökkel jár:

  • Kódot oszthat meg a Windows rendszeren futó, egérrel használható játékokkal
  • Az érintési helyadatok a legkevesebb kóddal írhatók
  • A felesleges feldolgozás elhagyható

Ha csak egyérintéses és csak érintéses pozicionálást használ, akkor az Egér osztály használatával kihasználhatja a fenti előnyöket.