Touchinteraktioner i spelutveckling för Windows Phone 7, del 3 Dra åtgärder

Sidan uppdaterad :
Datum för skapande av sida :

Programmering! - 3.Försök flytta kortet till beröring

Om det här exemplet

Den här gången skulle jag vilja skapa en progran som placerar fyra kort på skärmen och placerar och drar korten till den plats där de berörs. Detta är en multi-touch-version av programmet som först drog en sprite med Mouse-klassen. Hittills har det funnits många förklaringar, så den här gången vill jag förklara främst om programmet.

Mål för detta exempelprogram

Dra flera kort samtidigt som du trycker på med multi-touch.

図 1 :マルチタッチによるドラッグ操作
Bild 1: Dra flera tryckningar

Program - Kortklasser

När det gäller multi-touch blir det nödvändigt att ha flera objekt, så här skulle jag vilja skapa en "Card" -klass med sprite som ska flyttas som ett "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; }
}

För att inte göra koden för komplicerad har kortklassen tre egenskaper: touch ID, position och färg. Det finns inget särskilt objekt att gå in i detalj, men "Touch ID" används för att kontrollera vilken beröringspunkt som är länkad.

Program - Deklarera fält

Det finns inget nytt med det annat än att ha en rad kortklasser för att hålla kortinformation. Den här gången är det som en tillämpning av de tidigare proverna. Jag gjorde fyra kort, var och en med olika färg så att du kan se skillnaden när du ritar.

/// <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å touchinformation

Inuti Game.Update-metoden. Detta område är formeliskt, så det finns inget särskilt nytt.

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

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

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

Program - Länka ett touch-ID till ett kort vid beröring

I provprogrammet är ordningen omvänd ur bearbetningskostnadens synvinkel, men det är lättare att förstå om du förklarar det härifrån, så jag kommer att förklara detta först.

Gå först igenom den förvärvade TouchCollection föreach för att få varje 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;
  }
}

Kontrollera egenskapen "TouchLocation.State" för att indikera att "TouchLocationState.Pressed" är det ögonblick du rörde vid den.

I det här exemplet, om kortets ID är "0", definieras det som att det inte används, så "kort. Var(c => c.Id == 0). FirstOrDefault()" för att söka efter ett kort med ID 0 från listan över kort och hämta det kortet om det hittas. Om den inte hittas returneras null. Här kallas tilläggsmetoder av LINQ för att förenkla koden, men om du är orolig för bearbetningskostnader kan du söka efter dem en efter en med en for-slinga.

När du hittar kortet ställer du in pek-ID och pekposition på kortet.

Program - hantera kort under beröring och när de släpps

Håll kortet i ett dragläge hela tiden medan du trycker på det, och när du släpper det kopplas det bort från beröringspunkten till 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;
    }
  }
}

Slinga kortlistan med foreach och bearbeta varje kort. Om ID:t är något annat än 0 länkas det till kontaktpunkten och processen fortsätter.

TouchCollection-strukturen tillhandahåller en "FindById"-metod som gör att du kan hämta pekinformationen för det angivna ID:t, om det finns någon. Om egenskapen Card.Id inte är 0 kan vi anta att den är associerad med någon beröringspunkt, så vi kommer att försöka få beröringsinformationen med FindById-metoden.

Om metoden FindById returnerar true är den fortfarande i pekläge, så hämta pekpositionen från egenskapen TouchLocation.Position och ställ in den i klassen Card. Om metoden FindById returnerar false släpps beröringen, så ställ in Card.ID på 0 och ställ in den eftersom ingen rör vid den.

Program - Ritkort

Parametrarna som behövs för ritning bör redan vara inställda på kortklassen, så det finns inget nytt.

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

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

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

Sammanfattning av detta exempel

Den här gången försökte jag skapa ett bildprogram som använder multi-touch för att faktiskt flytta objekt i spelet. Vi observerade också att när flera kort drogs samtidigt med ID för beröringsinformationen, var kortens rörelse konsekvent även om det andra fingret lyftes eller rördes igen.

Detta prov är bara ett prov och endast enkel bearbetning utförs. Den grundläggande delen av multi-touch-operationen av pekskärmen bör dock täckas av faktisk spelprogrammering, så använd den på multi-touch-bearbetning som passar ditt spel baserat på detta.