Dotyková interakcia pri vývoji hier pre Windows Phone 7, časť 1 Základy dotykovej interakcie

Začíname s Windows Phonom 7

Aplikačná platforma Windows Phone 7

Vývojové prostredie Windows Phone 7 bolo oficiálne vydané v septembri 2010 a smartfóny, ktoré skutočne používajú Windows Phone 7, sa začali dostávať na trh.

Obrázok 1: HTC 7 Trophy s Windows Phonom 7 predávaný spoločnosťou HTC

Keď vytvoríte aplikáciu, ktorá beží na Windows Phone 7, môžete si vybrať medzi "Silverlight" a "XNA Framework" ako programovým rámcom. Vo všeobecnosti budete používať "XNA Framework" na vývoj hier a "Silverlight" pre iné aplikácie, ako sú nástroje.

Táto časť používa XNA Framework na vývoj hier a vysvetľuje, ako používať dotykový panel, ktorý bude najpoužívanejším používateľským rozhraním pre Windows Phone 7. Jednoduché použitie je popísané v pomocníkovi XNA Game Studio, preto by som to tu chcel vysvetliť trochu podrobnejšie.

Pripravte si svoje vývojové prostredie

Táto časť je z pohľadu niekoho, kto sa čo i len trochu dotkol XNA Game Studio, takže vynechám podrobné pokyny, ako je inštalácia a nastavenie. V pomocníkovi, ktorý prichádza s XNA Game Studio, a na webe je veľa informácií, preto si ich prosím pozrite sami. Niektoré mám aj na svojich stránkach (http://sorceryforce.com/xna/).

• Nástroje pre vývojárov Windows Phonu
• Softvér Zune
• Skutočné zariadenie s Windows Phonom 7 alebo prostredím s viacdotykovým ovládaním systému Windows 7
• Aplikácia na registráciu vývojárov Windows Phonu

Obrázok 2: Microsoft Visual Studio 2010 Express pre Windows Phone (súčasť vývojárskych nástrojov Windows Phonu)

Obrázok 3: Emulátor Windows Phone

Programovanie! - 1. Získanie informácií o dotyku

O tejto vzorke

Verzia XNA Framework používaná vo Windows Phone 7 je "4.0", ale dovtedy neexistovali žiadne triedy pre dotykové panely a klávesnice, myši a gamepady boli hlavným prúdom. Od verzie 4.0 je podporovaný Windows Phone 7 a bola pridaná nová trieda venovaná dotykovým panelom.

V tomto článku vysvetlíme hlavne túto triedu, ale v skutočnosti, ak chcete získať jednoduché informácie o dotykovej polohe, môžete nahradiť inú triedu bez použitia triedy pre dotykové panely. Je to trieda "Myši". V tejto vzorke použijeme triedu myší na získanie informácií o dotyku.

Ciele tohto vzorového programu

Keď sa dotknete obrazovky, obraz (sprite) sa umiestni podľa dotykovej polohy.

Obrázok 3,4: Sprity sa objavujú v dotykových polohách

Program - Deklarovanie polí

Chcel by som to hneď vysvetliť spolu so vzorovým programom. Vynechávajú sa vysvetlenia častí, ktoré priamo nesúvisia s dotykovým ovládaním a programami vytvorenými od začiatku, preto si pozrite zdrojový kód distribuovaný samostatne.

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

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

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

  public Game1()
  {

Pole deklaruje textúru, ktorá sa má nakresliť na dotykovom mieste, a premennú štruktúry Vector2 na uloženie dotykovej polohy.

Program - Načítanie textúr

Textúry sú už pridané do projektu obsahu a načítané metódou LoadContent. Keďže obsah priamo nesúvisí s dotykovými panelmi, podrobné vysvetlenia sa vynechávajú.

Obrázok 6: Pridanie textúry.png do projektu obsahu

Obrázok 7: Obrázok použitý v tejto ukážke

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

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

Program - Získavanie dotykových informácií

Informácie o dotyku sa načítajú metódou Game.Update.

Informácie o dotyku získavam pomocou triedy "Myš" namiesto z vyhradenej triedy. Pri použití metódy "Mouse.GetState" sa aktuálny stav myši vráti v štruktúre "MouseState", takže môžete získať dotykovú polohu z vlastností "MouseState.X" a "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);
}

Jedna vec, ktorú je potrebné poznamenať o používaní triedy myši na získanie informácií o dotyku, je, že vracia iba jednoduché informácie. Jediné obmedzenia informácií, ktoré je možné získať pri používaní triedy myši, sú "iba jedným dotykom", "dotyková poloha (MouseState.X, vlastnosť MouseState.Y)" a "či sa dotknúť alebo nedotknúť (MouseState.LeftButton)". Nepodporuje viacdotykové ovládanie ani gestá. Tiež, ak získate polohu, keď ste sa jej nedotkli, bude naďalej vracať predchádzajúcu dotykovú polohu. Keďže vstupné informácie nie je možné prijať, pokiaľ sa ich nedotknete, informácie o polohe nie je možné získať, ako napríklad pohyb myšou.

Program - kreslenie textúr

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

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

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

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

  base.Draw(gameTime);
}

Zhrnutie tejto vzorky

Keďže trieda myší nahrádza získavanie dotykových informácií, informácie je možné získať iba získaním dotykovej polohy ako v tejto vzorke. Naopak, ak používate triedu iba na dotykové ovládanie, môžete získať viac informácií.

Preto nie je bezvýznamné získať dotykové informácie pomocou triedy Myši. Používanie triedy myši poskytuje nasledujúce výhody:

• Môže zdieľať kód s hrami s podporou myši spustenými v systéme Windows
• Informácie o polohe dotyku je možné napísať s najmenším množstvom kódu
• Zbytočné spracovanie je možné vynechať

Ak používate iba polohovanie jedným dotykom a iba dotykom, môžete využiť vyššie uvedené výhody pomocou triedy myši.