Tương tác cảm ứng trong phát triển trò chơi cho Windows Phone 7, Phần 3 Thao tác kéo

Chương trình! - 3. Thử di chuyển thẻ đến cảm ứng

Về mẫu này

Lần này, tôi muốn tạo một progran đặt bốn thẻ trên màn hình và các địa điểm và kéo các thẻ đến nơi chúng được chạm vào. Đây là phiên bản cảm ứng đa điểm của chương trình lần đầu tiên kéo sprite bằng lớp Chuột. Cho đến nay, đã có rất nhiều lời giải thích, vì vậy lần này tôi muốn giải thích chủ yếu về chương trình.

Mục tiêu của chương trình mẫu này

Kéo nhiều thẻ cùng lúc khi bạn chạm bằng cảm ứng đa điểm.

Hình 1: Thao tác kéo đa chạm

Chương trình - Lớp học thẻ

Khi nói đến cảm ứng đa điểm, cần phải có nhiều đối tượng, vì vậy ở đây tôi muốn tạo một lớp "Thẻ" với sprite được di chuyển dưới dạng "thẻ".

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

Để không làm cho mã quá phức tạp, lớp thẻ có ba thuộc tính: touch ID, vị trí và màu sắc. Không có mục cụ thể nào để đi vào chi tiết, nhưng "Touch ID" được sử dụng để kiểm tra điểm tiếp xúc nào được liên kết.

Chương trình - Khai báo các trường

Không có gì mới về nó ngoài việc có một loạt các lớp Thẻ để lưu giữ thông tin thẻ. Lần này, nó giống như một ứng dụng của các mẫu trước đó. Tôi đã làm bốn thẻ, mỗi thẻ có một màu khác nhau để bạn có thể thấy sự khác biệt khi vẽ.

/// <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 - Nhận thông tin cảm ứng

Bên trong phương thức Game.Update. Khu vực này là công thức, vì vậy không có gì đặc biệt mới.

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

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

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

Chương trình - Liên kết ID cảm ứng với thẻ khi chạm vào

Trong chương trình mẫu, thứ tự được đảo ngược theo quan điểm về chi phí xử lý, nhưng sẽ dễ hiểu hơn nếu bạn giải thích nó từ đây, vì vậy tôi sẽ giải thích điều này trước.

Đầu tiên, lặp qua TouchCollection foreach thu được để lấy từng phần thông tin.

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

Kiểm tra thuộc tính "TouchLocation.State" để cho biết rằng "TouchLocationState.Pressed" là thời điểm bạn chạm vào nó.

Trong mẫu này, nếu ID của thẻ là "0", nó được định nghĩa là không được sử dụng, vì vậy "thẻ. Trong đó(c => c.Id == 0). FirstOrDefault()" để tìm kiếm thẻ có ID 0 từ danh sách thẻ và truy xuất thẻ đó nếu tìm thấy. Nếu không tìm thấy, null được trả về. Ở đây, các phương thức mở rộng được LINQ gọi để đơn giản hóa mã, nhưng nếu bạn lo lắng về chi phí xử lý, bạn có thể tìm kiếm từng cái một bằng vòng lặp cho.

Khi bạn tìm thấy thẻ, hãy đặt touch ID và vị trí chạm trên thẻ.

Chương trình - xử lý thẻ trong khi chạm và khi chúng được phát hành

Giữ thẻ ở trạng thái kéo mọi lúc trong khi bạn chạm vào thẻ và khi bạn nhả thẻ, thẻ sẽ bị ngắt kết nối từ điểm tiếp xúc đến thẻ.

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

Lặp lại danh sách thẻ với foreach và xử lý từng thẻ. Nếu ID là bất kỳ thứ gì khác ngoài 0, nó được liên kết với điểm tiếp xúc và quá trình tiếp tục.

Cấu trúc TouchCollection cung cấp phương pháp "FindById" cho phép bạn truy xuất thông tin cảm ứng cho ID được chỉ định, nếu có ID. Nếu thuộc tính Card.Id không phải là 0, chúng ta có thể giả định rằng nó được liên kết với một số điểm tiếp xúc, vì vậy chúng ta sẽ cố gắng lấy thông tin cảm ứng bằng phương thức FindById.

Nếu phương thức FindById trả về true, nó vẫn ở trạng thái cảm ứng, vì vậy hãy lấy vị trí cảm ứng từ thuộc tính TouchLocation.Position và đặt nó trong lớp thẻ. Nếu phương thức FindById trả về false, cảm ứng sẽ được nhả ra, vì vậy hãy đặt Card.ID thành 0 và đặt nó thành không ai chạm vào nó.

Chương trình - Vẽ thẻ

Các tham số cần thiết để vẽ đã được đặt thành lớp Thẻ, vì vậy không có gì mới.

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

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

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

Tóm tắt mẫu này

Lần này, tôi đã cố gắng tạo ra một chương trình hình ảnh sử dụng cảm ứng đa điểm để thực sự di chuyển các đối tượng trong trò chơi. Chúng tôi cũng quan sát thấy rằng khi nhiều thẻ được kéo cùng một lúc bằng ID của thông tin cảm ứng, chuyển động của các thẻ vẫn nhất quán ngay cả khi ngón tay kia được nhấc lên hoặc chạm lại.

Mẫu này chỉ là một mẫu và chỉ xử lý đơn giản được thực hiện. Tuy nhiên, phần cơ bản của hoạt động cảm ứng đa điểm của bảng điều khiển cảm ứng phải được bao phủ bởi lập trình trò chơi thực tế, vì vậy vui lòng áp dụng nó để xử lý cảm ứng đa điểm phù hợp với trò chơi của bạn dựa trên điều này.