Berøringsinteraktioner i spiludvikling til Windows Phone 7, Del 3 Træk

Programmering! - 3.Prøv at flytte kortet til berøring

Om denne prøve

Denne gang vil jeg gerne oprette en progran, der placerer fire kort på skærmen og placerer og trækker kortene til det sted, hvor de berøres. Dette er en multi-touch version af programmet, der først trak en sprite med Mus-klassen. Indtil nu har der været mange forklaringer, så denne gang vil jeg gerne forklare primært om programmet.

Mål for dette prøveprogram

Træk flere kort på samme tid, som du rører med multi-touch.

Figur 1: Multi-touch træk operation

Program - Kortklasser

Når det kommer til multi-touch, bliver det nødvendigt at have flere objekter, så her vil jeg gerne oprette en "Card" klasse med sprite, der skal flyttes som et "kort".

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

For ikke at gøre koden for kompliceret har kortklassen tre egenskaber: berørings-id, position og farve. Der er ikke noget bestemt element at gå i detaljer, men "Touch ID" bruges til at kontrollere, hvilket berøringspunkt der er linket.

Program - Erklæring af felter

Der er ikke noget nyt ved det andet end at have en række kortklasser til at holde kortoplysninger. Denne gang er det som en anvendelse af de tidligere prøver. Jeg lavede fire kort, hver med en anden farve, så du kan se forskellen, når du tegner.

/// <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 - Få oplysninger om berøring

Inde i Game.Update-metoden. Dette område er formel, så der er ikke noget særligt nyt.

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

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

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

Program - Knyt et touch ID til et kort, når du rører ved

I prøveprogrammet vendes rækkefølgen ud fra behandlingsomkostningerne, men det er lettere at forstå, hvis du forklarer det herfra, så jeg vil forklare dette først.

Først skal du sløjfe gennem den erhvervede TouchCollection-foreach for at få hvert stykke information.

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

Kontroller egenskaben "TouchLocation.State" for at angive, at "TouchLocationState.Pressed" er det øjeblik, du rørte ved den.

I dette eksempel, hvis kortets id er "0", defineres det som ikke brugt, så "kort. Hvor(c => c.Id == 0). FirstOrDefault()" for at søge efter et kort med ID 0 fra listen over kort og hente kortet, hvis det findes. Hvis den ikke findes, returneres null. Her kaldes udvidelsesmetoder af LINQ for at forenkle koden, men hvis du er bekymret for behandlingsomkostninger, kan du søge efter dem en efter en med en for loop.

Når du finder kortet, skal du indstille touch ID og berøringsposition på kortet.

Program - håndtering af kort under berøring, og når de frigives

Hold kortet altid i træktilstand, mens du rører ved det, og når du slipper det, afbrydes det fra berøringspunktet til kortet.

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

Sløjfe kortlisten med foreach og behandle hvert kort. Hvis ID'et er andet end 0, er det knyttet til berøringspunktet, og processen fortsætter.

TouchCollection-strukturen giver en "FindById" -metode, der giver dig mulighed for at hente berøringsoplysningerne for det angivne ID, hvis der findes en. Hvis den Card.Id egenskab ikke er 0, kan vi antage, at den er forbundet med et eller andet berøringspunkt, så vi vil forsøge at få berøringsoplysningerne med FindById-metoden.

Hvis FindById-metoden returnerer sand, er den stadig i berøringstilstand, så hent berøringspositionen fra egenskaben TouchLocation.Position, og indstil den i kortklassen. Hvis FindById-metoden returnerer falsk, frigives berøringen, så indstil Card.ID til 0, og indstil den, da ingen rører ved den.

Program - Tegning af kort

De parametre, der er nødvendige for at tegne, skal allerede indstilles til kortklassen, så der er ikke noget nyt.

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

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

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

Resumé af denne prøve

Denne gang forsøgte jeg at skabe et billedprogram, der bruger multi-touch til faktisk at flytte objekter i spillet. Vi observerede også, at når flere kort blev trukket på samme tid ved hjælp af id'et for berøringsoplysningerne, var kortenes bevægelse konsekvent, selvom den anden finger blev løftet eller rørt igen.

Denne prøve er kun en prøve, og kun simpel behandling udføres. Den grundlæggende del af multi-touch-betjeningen af berøringspanelet skal dog være dækket af faktisk spilprogrammering, så anvend den til multi-touch-behandling, der passer til dit spil baseret på dette.