Dotykové interakce při vývoji her pro Windows Phone 7, část 3 Operace přetažení

Programování! - 3.Zkuste přesunout kartu na dotyk

O této ukázce

Tentokrát bych chtěl vytvořit progran, který umístí čtyři karty na obrazovku a umístí a přetáhne karty na místo, kde se jich dotýkají. Jedná se o vícedotykovou verzi programu, který nejprve přetáhl pohyblivého symbolu pomocí třídy Mouse. Až dosud bylo mnoho vysvětlení, takže tentokrát bych rád vysvětlil hlavně program.

Cíle tohoto ukázkového programu

Vícedotykovým ovládáním přetáhněte více karet současně jako dotyk.

Obrázek 1: Vícedotykové tažení

Program - Karetní třídy

Pokud jde o multi-touch, je nutné mít více objektů, takže zde bych rád vytvořil třídu "Card" se sprite, který má být přesunut jako "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 nebyl kód příliš komplikovaný, má třída karty tři vlastnosti: dotykové ID, pozice a barva. Neexistuje žádná konkrétní položka, která by šla do podrobností, ale "Touch ID" se používá ke kontrole, který dotykový bod je propojen.

Program - deklarování polí

Není na tom nic nového, kromě toho, že máme řadu tříd karet, které obsahují informace o kartě. Tentokrát je to jako aplikace předchozích vzorků. Vyrobil jsem čtyři karty, každou s jinou barvou, takže rozdíl je vidět při kreslení.

/// <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, },
};

Programatická reklama – získání informací o dotykovém ovládání

Uvnitř metody Game.Update. Tato oblast je formulovaná, takže není nic zvlášť nového.

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

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

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

Program – propojení dotykového ID s kartou

V ukázkovém programu je pořadí obrácené z hlediska nákladů na zpracování, ale je snazší pochopit, pokud to vysvětlíte odtud, takže to vysvětlím jako první.

Nejprve projděte získanou kolekci TouchCollection foreach a získejte každou informaci.

/// タッチ情報の処理を行う
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;
  }
}

Zkontrolujte vlastnost "TouchLocation.State" a označte, že "TouchLocationState.Pressed" je okamžik, kdy jste se jí dotkli.

V této ukázce, pokud je ID karty "0", je definováno jako nepoužívané, takže "karty. Kde(c => c.Id == 0). FirstOrDefault()" pro vyhledání karty s ID 0 ze seznamu karet a načtení této karty, pokud je nalezena. Pokud není nalezen, je vrácena hodnota null. Zde jsou metody rozšíření volány LINQ pro zjednodušení kódu, ale pokud máte obavy o náklady na zpracování, můžete je vyhledat jeden po druhém pomocí smyčky for.

Až kartu najdete, nastavte na kartě dotykové ID a pozici dotyku.

Program - manipulace s kartami během dotyku a při jejich uvolnění

Udržujte kartu ve stavu přetažení po celou dobu, kdy se jí dotknete, a když ji uvolníte, bude odpojena od dotykového bodu s kartou.

// 各カードの情報を調べる
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;
    }
  }
}

Smyčka seznamu karet s foreach a zpracování každé karty. Pokud je ID jiné než 0, je propojeno s dotykovým bodem a proces pokračuje.

Struktura TouchCollection poskytuje metodu "FindById", která umožňuje načíst dotykové informace pro zadané ID, pokud existuje. Pokud vlastnost Card.Id není 0, můžeme předpokládat, že je přidružena k nějakému dotykovému bodu, takže se pokusíme získat informace o dotyku pomocí metody FindById.

Pokud metoda FindById vrátí true, je stále ve stavu dotyku, takže získejte dotykovou pozici z vlastnosti TouchLocation.Position a nastavte ji ve třídě karty. Pokud metoda FindById vrátí false, dotyk se uvolní, takže nastavte Card.ID na 0 a nastavte ho tak, aby se ho nikdo nedotýkal.

Program - Výkresové karty

Parametry potřebné pro kreslení by již měly být nastaveny na třídu Karta, takže to není nic nového.

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

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

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

Shrnutí této ukázky

Tentokrát jsem se pokusil vytvořit obrazový program, který používá multi-touch k pohybu objektů ve hře. Také jsme zaznamenali, že když bylo přetaženo více karet současně pomocí ID dotykové informace, pohyb karet byl konzistentní, i když byl druhý prst zvednut nebo se ho znovu dotkl.

Tato ukázka je pouze ukázka a provádí se pouze jednoduché zpracování. Základní část multidotykového ovládání dotykovým panelem by však měla být pokryta skutečným programováním hry, proto ji prosím aplikujte na multi-touch zpracování, které vyhovuje vaší hře na základě tohoto.