Érintéses műveletek a Windows Phone 7 játékfejlesztésében, 3. rész Húzási műveletek

Programozás! - 3.Próbáld meg érintésre mozgatni a kártyát

A minta ismertetése

Ezúttal egy progrant szeretnék létrehozni, amely négy kártyát helyez el a képernyőn, és elhelyezi és húzza a kártyákat arra a helyre, ahol megérintik őket. Ez a program multi-touch változata, amely először húzott egy sprite-ot az egér osztályával. Eddig sok magyarázat volt, ezért ezúttal elsősorban a programról szeretnék beszélni.

A mintaprogram céljai

Húzzon több kártyát egyszerre a többérintéses vezérléssel.

1. ábra: Többérintéses húzási művelet

Program - Kártyaórák

Ha multi-touch-ról van szó, akkor több objektumra van szükség, ezért itt szeretnék létrehozni egy "Card" osztályt, ahol a sprite "kártyaként" mozgatható.

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

Annak érdekében, hogy a kód ne legyen túl bonyolult, a kártyaosztálynak három tulajdonsága van: érintésazonosító, pozíció és szín. Nincs konkrét elem, amelyet részletezni kellene, de a "Touch ID" segítségével ellenőrizhető, hogy melyik érintkezési pont van összekapcsolva.

Program – Mezők deklarálása

Nincs benne semmi új azon kívül, hogy van egy sor kártyaosztálya a kártyainformációk tárolására. Ezúttal olyan, mint az előző minták alkalmazása. Négy kártyát készítettem, mindegyik más színű, így rajzolás közben láthatod a különbséget.

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

Programozott - Kapcsolatfelvételi információk

A Game.Update módszeren belül. Ez a terület képletes, így nincs semmi különösebben új.

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

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

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

Program – Érintéses azonosító csatolása kártyához, ha megérinti

A mintaprogramban a sorrend a feldolgozási költség szempontjából megfordul, de könnyebben érthető, ha innen magyarázod, ezért először ezt magyarázom el.

Először is, hurkolja végig a megszerzett TouchCollection foreach-ot, hogy megkapja az egyes információkat.

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

Ellenőrizze a "TouchLocation.State" tulajdonságot annak jelzésére, hogy a "TouchLocationState.Pressed" az a pillanat, amikor megérintette.

Ebben a mintában, ha a kártya azonosítója "0", akkor azt úgy definiáljuk, hogy nincs használatban, tehát "kártyák. Hol(c => c.Id == 0). FirstOrDefault()" a kártyák listájából egy 0-ás azonosítójú kártya kereséséhez és a kártya lekéréséhez, ha megtalálható. Ha nem található, a rendszer null értéket ad vissza. Itt a LINQ kiterjesztési metódusokat hív meg a kód egyszerűsítése érdekében, de ha aggódik a feldolgozási költségek miatt, akkor egyenként keresheti meg őket egy for hurokkal.

Amikor megtalálta a kártyát, állítsa be a Touch ID-t és az érintési pozíciót a kártyán.

Program - kártyák kezelése érintés közben és elengedésükkor

Tartsa a kártyát mindig húzási állapotban, amíg megérinti, és amikor elengedi, a rendszer leválasztja az érintési pontról a kártyára.

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

Hurkolja a kártyalistát a foreach segítségével, és dolgozza fel az egyes kártyákat. Ha az azonosító nem 0, akkor az az érintkezési ponthoz kapcsolódik, és a folyamat folytatódik.

A TouchCollection struktúra egy "FindById" metódust biztosít, amely lehetővé teszi a megadott azonosító érintési információinak lekérését, ha van ilyen. Ha a Card.Id tulajdonság nem 0, akkor feltételezhetjük, hogy valamilyen érintkezési ponthoz van társítva, ezért megpróbáljuk az érintési információkat a FindById metódussal megszerezni.

Ha a FindById metódus true értéket ad vissza, akkor még mindig érintéses állapotban van, ezért szerezze be az érintési pozíciót a TouchLocation.Position tulajdonságból, és állítsa be a kártyaosztályban. Ha a FindById metódus hamis értéket ad vissza, az érintés megszűnik, ezért állítsa Card.ID 0-ra, és állítsa be úgy, hogy senki ne érintse meg.

Program - Kártyák rajzolása

A rajzoláshoz szükséges paramétereket már a Kártya osztályra kell állítani, így nincs semmi új.

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

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

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

A minta összefoglalása

Ezúttal megpróbáltam létrehozni egy olyan képprogramot, amely multi-touch-ot használ az objektumok tényleges mozgatására a játékban. Azt is megfigyeltük, hogy amikor egyszerre több kártyát húztak az érintési információk azonosítójával, a kártyák mozgása következetes volt, még akkor is, ha a másik ujját felemelték vagy újra megérintették.

Ez a minta csak egy minta, és csak egyszerű feldolgozást végeznek. Az érintőpanel multi-touch működésének alapvető részét azonban a tényleges játékprogramozásnak kell lefednie, ezért kérjük, alkalmazza azt a többérintéses feldolgozásra, amely ennek alapján megfelel a játékának.