Сенсорна взаємодія в розробці ігор для Windows Phone 7, частина 3 Операції перетягування

Програмування! - 3.Спробуйте перемістити картку на дотик

Про цей зразок

Цього разу я хотів би створити програн, який розміщує чотири карти на екрані та розміщує та перетягує картки туди, де їх торкаються. Це мультитач-версія програми, яка спочатку перетягнула спрайт з класом Миша. До сих пір було багато пояснень, тому на цей раз хотілося б пояснити в основному про програму.

Цілі даного зразка програми

Перетягуйте кілька карток одночасно під час дотику за допомогою функції мультидотику.

Рисунок 1: Операція перетягування з декількома дотиками

Програма - Карткові класи

Коли справа доходить до мультитач, виникає необхідність мати кілька об'єктів, тому тут хотілося б створити клас «Карта» зі спрайтом, який буде переміщатися у вигляді «карти».

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

Щоб не зробити код занадто складним, клас карти має три властивості: touch ID, положення і колір. Немає конкретного пункту, щоб вдаватися в подробиці, але "Touch ID" використовується для перевірки того, яка точка дотику пов'язана.

Програма - оголошення полів

У цьому немає нічого нового, крім того, щоб мати безліч карткових класів для зберігання карткової інформації. Цього разу це як застосування попередніх зразків. Я зробив чотири картки, кожна з різним кольором, щоб ви могли бачити різницю при малюванні.

/// <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 - Отримайте сенсорну інформацію

Усередині методу Game.Update. Ця область шаблонна, тому нічого особливо нового немає.

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

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

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

Програма - Прив'язка touch ID до карти при дотику

У зразковій програмі порядок зворотний з точки зору вартості обробки, але легше зрозуміти, якщо пояснити його звідси, тому поясню це спочатку.

По-перше, зациклюйтеся на придбаному TouchCollection длякожного, щоб отримати кожну частину інформації.

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

Перевірте властивість "TouchLocation.State", щоб вказати, що "TouchLocationState.Pressed" - це момент, коли ви доторкнулися до нього.

У цьому зразку, якщо ID карти дорівнює "0", він визначається як такий, що не використовується, тому "картки". Де(c => c.Id == 0). FirstOrDefault()" для пошуку картки з ідентифікатором 0 зі списку карток і отримання цієї картки, якщо вона знайдена. Якщо його не знайдено, повертається null. Тут LINQ називає методи розширення для спрощення коду, але якщо вас турбують витрати на обробку, ви можете шукати їх один за одним за допомогою циклу for.

Коли ви знайдете картку, встановіть ідентифікатор дотику та положення дотику на картці.

Програма - обробка карток під час дотику і при їх випуску

Тримайте картку в стані перетягування постійно, доторкнувшись до неї, і коли ви відпустите її, її буде від'єднано від точки дотику до картки.

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

Зацикліть список карток з foreach і обробіть кожну картку. Якщо ідентифікатор є чимось іншим, ніж 0, він пов'язаний з точкою дотику, і процес триває.

Структура TouchCollection надає метод "FindById", який дозволяє отримати сенсорну інформацію для вказаного ідентифікатора, якщо такий існує. Якщо властивість Card.Id не дорівнює 0, можна припустити, що воно пов'язане з якоюсь точкою дотику, тому спробуємо отримати інформацію про дотик за допомогою методу FindById.

Якщо метод FindById повертає true, він все ще перебуває в стані дотику, тому отримайте положення дотику з властивості TouchLocation.Position і встановіть його в класі картки. Якщо метод FindById повертає false, дотик відпускається, тому встановіть Card.ID значення 0 і встановіть його так, як ніхто його не торкається.

Програма - Малювання карток

Параметри, необхідні для малювання, вже повинні бути встановлені в класі Card, тому нічого нового немає.

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

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

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

Короткий зміст даного зразка

На цей раз я спробував створити іміджеву програму, яка використовує мультитач для фактичного переміщення об'єктів в грі. Ми також спостерігали, що коли кілька карток перетягувалися одночасно з використанням ідентифікатора сенсорної інформації, рух карток був послідовним, навіть якщо інший палець був піднятий або знову торкнувся.

Цей зразок є всього лише зразком і виконується тільки проста обробка. Однак основна частина операції мультитач сенсорною панеллю повинна бути покрита фактичним ігровим програмуванням, тому, будь ласка, застосуйте його до обробки мультитач, яка підходить для вашої гри на основі цього.