Interakcje dotykowe podczas tworzenia gier dla systemu Windows Phone 7, część 3 Operacje przeciągania

Programowanie! - 3.Spróbuj przesunąć kartę do dotyku

Informacje o tej próbce

Tym razem chciałbym stworzyć progran, który umieszcza cztery karty na ekranie oraz umieszcza i przeciąga karty do miejsca, w którym są dotykane. Jest to wielodotykowa wersja programu, który najpierw przeciągnął duszka za pomocą klasy Mouse. Do tej pory było wiele wyjaśnień, więc tym razem chciałbym wyjaśnić głównie o programie.

Cele tego przykładowego programu

Przeciągnij wiele kart jednocześnie z dotykiem.

Rysunek 1: Przeciąganie wielodotykowe

Program - Klasy karciane

Jeśli chodzi o multi-touch, konieczne staje się posiadanie wielu obiektów, więc tutaj chciałbym stworzyć klasę "Card" z duszkiem do przeniesienia 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 kod nie był zbyt skomplikowany, klasa karty ma trzy właściwości: Touch ID, pozycję i kolor. Nie ma konkretnego elementu, aby przejść do szczegółów, ale "Touch ID" służy do sprawdzenia, który punkt kontaktu jest połączony.

Program - Deklarowanie pól

Nie ma w tym nic nowego, poza szeregiem klas kart do przechowywania informacji o kartach. Tym razem jest to jak aplikacja poprzednich próbek. Zrobiłem cztery karty, każda w innym kolorze, dzięki czemu można zobaczyć różnicę podczas rysowania.

/// <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 - Uzyskaj informacje o dotyku

Wewnątrz metody Game.Update. Ten obszar jest szablonowy, więc nie ma nic szczególnie nowego.

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

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

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

Program - Połącz Touch ID z kartą po dotknięciu

W przykładowym programie kolejność jest odwrócona z punktu widzenia kosztów przetwarzania, ale łatwiej ją zrozumieć, jeśli wyjaśnisz to stąd, więc najpierw to wyjaśnię.

Najpierw przejrzyj w pętli nabytą kolekcję TouchCollection, aby uzyskać każdą informację.

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

Zaznacz właściwość "TouchLocation.State", aby wskazać, że "TouchLocationState.Pressed" jest momentem dotknięcia.

W tym przykładzie, jeśli identyfikator karty to "0", jest zdefiniowany jako nieużywany, więc "karty. Gdzie(c => c.Id == 0). FirstOrDefault()", aby wyszukać kartę o identyfikatorze 0 z listy kart i pobrać tę kartę, jeśli zostanie znaleziona. Jeśli nie zostanie znaleziony, zwracana jest wartość null. Tutaj metody rozszerzeń są wywoływane przez LINQ, aby uprościć kod, ale jeśli martwisz się o koszty przetwarzania, możesz je wyszukać jeden po drugim za pomocą pętli for.

Po znalezieniu karty ustaw identyfikator Touch ID i pozycję dotykową na karcie.

Program - obsługa kart podczas dotyku i po ich zwolnieniu

Trzymaj kartę w stanie przeciągania przez cały czas, gdy ją dotykasz, a po jej zwolnieniu zostanie odłączona od punktu styku z kartą.

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

Zapętl listę kart z foreach i przetwórz każdą kartę. Jeśli identyfikator jest inny niż 0, jest połączony z punktem kontaktu i proces jest kontynuowany.

Struktura TouchCollection zapewnia metodę "FindById", która umożliwia pobranie informacji dotykowych dla określonego identyfikatora, jeśli taki istnieje. Jeśli właściwość Card.Id jest inna niż 0, możemy założyć, że jest ona powiązana z jakimś punktem dotyku, więc spróbujemy uzyskać informacje o dotyku za pomocą metody FindById.

Jeśli metoda FindById zwraca wartość true, nadal jest w stanie dotyku, więc pobierz pozycję dotyku z właściwości TouchLocation.Position i ustaw ją w klasie card. Jeśli metoda FindById zwraca false, dotyk jest zwalniany, więc ustaw Card.ID na 0 i ustaw go tak, aby nikt go nie dotykał.

Program - Karty rysunkowe

Parametry potrzebne do rysowania powinny być już ustawione na klasę Card, więc nie ma nic nowego.

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

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

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

Podsumowanie tej próbki

Tym razem próbowałem stworzyć program obrazkowy, który wykorzystuje multi-touch do faktycznego przesuwania obiektów w grze. Zaobserwowaliśmy również, że gdy wiele kart zostało przeciągniętych w tym samym czasie przy użyciu identyfikatora informacji dotykowej, ruch kart był spójny, nawet jeśli drugi palec został ponownie podniesiony lub dotknięty.

Ta próbka jest tylko próbką i wykonywane jest tylko proste przetwarzanie. Jednak podstawowa część obsługi wielodotykowej za pomocą panelu dotykowego powinna być objęta rzeczywistym programowaniem gry, więc zastosuj ją do przetwarzania wielodotykowego, które pasuje do Twojej gry na tej podstawie.