Interazioni tramite tocco nello sviluppo di giochi per Windows Phone 7, Parte 3 Operazioni di trascinamento

Programmazione! - 3.Prova a spostare la scheda al tocco

Informazioni su questo esempio

Questa volta, vorrei creare un progran che posiziona quattro carte sullo schermo e posiziona e trascina le carte nel punto in cui vengono toccate. Questa è una versione multi-touch del programma che per primo ha trascinato uno sprite con la classe Mouse. Fino ad ora, ci sono state molte spiegazioni, quindi questa volta vorrei spiegare principalmente il programma.

Obiettivi di questo programma di esempio

Trascina più schede contemporaneamente al tocco con il multitocco.

Figura 1: operazione di trascinamento multi-touch

Programma - Classi di carte

Quando si parla di multi-touch, diventa necessario avere più oggetti, quindi qui vorrei creare una classe "Card" con lo sprite da spostare come "carta".

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

Per non complicare troppo il codice, la classe card ha tre proprietà: touch ID, posizione e colore. Non c'è un elemento particolare per entrare nel dettaglio, ma "Touch ID" viene utilizzato per verificare quale touchpoint è collegato.

Programma - Dichiarazione dei campi

Non c'è niente di nuovo oltre ad avere una serie di classi di carte per contenere le informazioni sulle carte. Questa volta, è come un'applicazione dei campioni precedenti. Ho fatto quattro carte, ognuna con un colore diverso in modo da poter vedere la differenza quando si disegna.

/// <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 - Ottieni informazioni sul tocco

All'interno del metodo Game.Update. Questo settore è formale, quindi non c'è nulla di particolarmente nuovo.

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

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

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

Programma - Collegare un touch ID a una scheda quando viene toccato

Nel programma di esempio, l'ordine è invertito dal punto di vista del costo di elaborazione, ma è più facile da capire se lo spieghi da qui, quindi lo spiegherò prima.

Innanzitutto, scorri la TouchCollection acquisita per ottenere ogni informazione.

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

Controlla la proprietà "TouchLocation.State" per indicare che "TouchLocationState.Pressed" è il momento in cui l'hai toccata.

In questo esempio, se l'ID della carta è "0", viene definito come non utilizzato, quindi "carte. Dove(c => c.Id == 0). FirstOrDefault()" per cercare una carta con ID 0 dall'elenco delle carte e recuperarla se trovata. Se non viene trovato, viene restituito null. In questo caso, i metodi di estensione vengono chiamati da LINQ per semplificare il codice, ma se si è preoccupati per i costi di elaborazione, è possibile cercarli uno per uno con un ciclo for.

Quando trovi la scheda, imposta il touch ID e la posizione del tocco sulla scheda.

Programma - gestione delle schede durante il tocco e quando vengono rilasciate

Tieni la scheda sempre in uno stato di trascinamento mentre la tocchi e, quando la rilasci, verrà scollegata dal punto di contatto alla scheda.

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

Esegui il loop dell'elenco delle carte con foreach ed elabora ogni scheda. Se l'ID è diverso da 0, viene collegato al punto di contatto e il processo continua.

La struttura TouchCollection fornisce un metodo "FindById" che consente di recuperare le informazioni sul tocco per l'ID specificato, se presente. Se la proprietà Card.Id non è 0, possiamo presumere che sia associata a un punto di contatto, quindi cercheremo di ottenere le informazioni di tocco con il metodo FindById.

Se il metodo FindById restituisce true, è ancora nello stato di tocco, quindi ottenere la posizione tocco dalla proprietà TouchLocation.Position e impostarla nella classe della scheda. Se il metodo FindById restituisce false, il tocco viene rilasciato, quindi impostare Card.ID su 0 e impostarlo in modo che nessuno lo stia toccando.

Programma - Carte da disegno

I parametri necessari per il disegno dovrebbero già essere impostati sulla classe Card, quindi non c'è nulla di nuovo.

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

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

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

Riepilogo di questo esempio

Questa volta, ho provato a creare un programma di immagini che utilizza il multi-touch per spostare effettivamente gli oggetti nel gioco. Abbiamo anche osservato che quando più carte venivano trascinate contemporaneamente utilizzando l'ID delle informazioni tattili, il movimento delle carte era coerente anche se l'altro dito veniva sollevato o toccato di nuovo.

Questo esempio è solo un esempio e viene eseguita solo un'elaborazione semplice. Tuttavia, la parte di base dell'operazione multi-touch dal pannello a sfioramento dovrebbe essere coperta dalla programmazione del gioco effettivo, quindi applicala all'elaborazione multi-touch adatta al tuo gioco in base a questo.