Dotykové interakcie pri vývoji hier pre Windows Phone 7, časť 3 Operácie presúvania

Programovanie! - 3.Skúste kartu presunúť na dotyk

O tejto vzorke

Tentokrát by som chcel vytvoriť prograna, ktorý umiestni štyri karty na obrazovku a umiestni a presunie karty na miesto, kde sa ich dotknú. Toto je viacdotyková verzia programu, ktorý najprv pretiahol sprite s triedou Myši. Doteraz bolo veľa vysvetlení, takže tentoraz by som chcel vysvetliť hlavne o programe.

Ciele tohto vzorového programu

Potiahnite viac kariet súčasne s dotykom pomocou viacdotykového ovládania.

Obrázok 1: Viacdotykové ťahové ovládanie

Program - Kartové triedy

Pokiaľ ide o multi-touch, je potrebné mať viac objektov, takže tu by som chcel vytvoriť triedu "Card" so spritom, ktorý sa má presunúť ako "karta".

/// <summary>
/// ドラッグできるカード
/// </summary>
public class Card
{
  /// <summary>
  /// タッチ ID
  /// </summary>
  public int Id { get; set; }

  /// <summary>
  /// カードの位置
  /// </summary>
  public Vector2 Position { get; set; }

  /// <summary>
  /// カードの色
  /// </summary>
  public Color Color { get; set; }
}

Aby sa kód príliš nekomplikoval, trieda karty má tri vlastnosti: touch ID, polohu a farbu. Neexistuje žiadna konkrétna položka, ktorá by zachádzala do podrobností, ale "Touch ID" sa používa na kontrolu, ktorý kontaktný bod je prepojený.

Program - Deklarovanie polí

Nie je na tom nič nové, okrem toho, že máte rad tried kariet, ktoré uchovávajú informácie o kartách. Tentokrát je to ako aplikácia predchádzajúcich vzoriek. Vyrobil som štyri karty, každá s inou farbou, aby ste pri kreslení videli rozdiel.

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

/// <summary>
/// カードの一覧(4 枚分)
/// </summary>
Card[] cards = new Card[]
{
  new Card { Color = Color.White, },
  new Card { Color = Color.Yellow, },
  new Card { Color = Color.Fuchsia, },
  new Card { Color = Color.Aqua, },
};

Programmatic - Získajte informácie o dotyku

V rámci metódy Game.Update. Táto oblasť je formulovaná, takže nie je nič zvlášť nové.

// タッチパネルの機能情報を取得
TouchPanelCapabilities capabilities = TouchPanel.GetCapabilities();

// タッチパネルが使用可能であるかチェック
if (capabilities.IsConnected)
{
  // 現在のタッチパネルの入力情報を取得
  TouchCollection touches = TouchPanel.GetState();

  //   :
  // ここに処理
  //   :
}

Program – prepojenie dotykového ID s kartou pri dotyku

Vo vzorovom programe je objednávka obrátená z hľadiska nákladov na spracovanie, ale je ľahšie pochopiteľné, ak to vysvetlíte odtiaľto, takže to najprv vysvetlím.

Najprv prejdite získaným TouchCollection pre každého, aby ste získali každú informáciu.

/// タッチ情報の処理を行う
foreach (TouchLocation tl in touches)
{
  // タッチ状態を調べる
  switch (tl.State)
  {
    case TouchLocationState.Pressed:
      // タッチされた瞬間は空いているカードを検索して紐づける
      Card card = cards.Where(c => c.Id == 0).FirstOrDefault();
      if (card != null)
      {
          card.Id = tl.Id;
          card.Position = tl.Position;
      }
      break;
  }
}

Skontrolujte vlastnosť TouchLocation.State a označte, že "TouchLocationState.Pressed" je okamih, keď ste sa ho dotkli.

V tejto vzorke, ak je ID karty "0", je definovaná ako nepoužívaná, teda "karty. Kde(c => c.Id == 0). FirstOrDefault()" na vyhľadanie karty s ID 0 zo zoznamu kariet a načítanie tejto karty, ak sa nájde. Ak sa nenájde, vráti sa null. Tu linq nazýva metódy rozšírenia, aby sa zjednodušil kód, ale ak máte obavy z nákladov na spracovanie, môžete ich vyhľadať jeden po druhom pomocou slučky.

Keď kartu nájdete, nastavte na karte touch ID a dotykovú polohu.

Program - manipulácia s kartami počas dotyku a pri ich uvoľnení

Kartu uchovávajte v stave potiahnutia po celý čas, kým sa jej dotknete, a keď ju uvoľníte, odpojí sa od dotykového bodu ku karte.

// 各カードの情報を調べる
foreach (Card card in cards)
{
  if (card.Id != 0)
  {
    // 紐づくタッチ情報がまだ存在するか ID で検索
    TouchLocation tl;
    if (touches.FindById(card.Id, out tl) == true)
    {
      // まだタッチされている場合は位置情報取得
      card.Position = tl.Position;
    }
    else
    {
      // すでにタッチ情報がなかったら紐付を外す
      card.Id = 0;
    }
  }
}

Slučku zoznamu kariet s preeach a spracujte každú kartu. Ak je ID niečo iné ako 0, je prepojené s kontaktným bodom a proces pokračuje.

Štruktúra TouchCollection poskytuje metódu "FindById", ktorá vám umožňuje načítať dotykové informácie pre zadaný identifikátor, ak existuje. Ak vlastnosť Card.Id nie je 0, môžeme predpokladať, že je spojená s nejakým kontaktným bodom, takže sa pokúsime získať dotykové informácie metódou FindById.

Ak metóda FindById vráti hodnotu true, je stále v dotykovom stave, takže získajte dotykovú polohu z vlastnosti TouchLocation.Position a nastavte ju do triedy karty. Ak metóda FindById vráti hodnotu false, dotyk sa uvoľní, preto nastavte Card.ID na 0 a nastavte ho tak, aby sa ho nikto nedotýkal.

Program - Kresliace karty

Parametre potrebné na kreslenie by už mali byť nastavené na triedu Card, takže nie je nič nové.

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

// 各カードを描画
foreach (Card card in cards)
{
  spriteBatch.Draw(texture, card.Position, card.Color);
}

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

Zhrnutie tejto vzorky

Tentokrát som sa pokúsil vytvoriť obrazový program, ktorý používa multi-touch na skutočný pohyb objektov v hre. Všimli sme si tiež, že keď bolo ťahaných viac kariet súčasne pomocou ID dotykových informácií, pohyb kariet bol konzistentný, aj keď bol druhý prst zdvihnutý alebo sa znova dotkol.

Táto vzorka je len vzorka a vykonáva sa iba jednoduché spracovanie. Základná časť viacdotykového ovládania dotykovým panelom by však mala byť pokrytá skutočným programovaním hry, preto ju použite na viacdotykové spracovanie, ktoré vyhovuje vašej hre na základe toho.