Windows Phone 7용 게임 개발의 터치 조작, 3부 끌기 작업

프로그래밍! - 3.카드를 터치로 이동해 보세요.

이 샘플 정보

이번에는 화면에 4 장의 카드를 놓고 카드를 터치하는 곳으로 카드를 배치하고 드래그하는 progran을 만들고 싶습니다. 이것은 Mouse 클래스로 스프라이트를 처음 드래그 한 프로그램의 멀티 터치 버전입니다. 지금까지 많은 설명이 있었기 때문에 이번에는 주로 프로그램에 대해 설명하고 싶습니다.

이 샘플 프로그램의 목표

멀티 터치로 터치하는 동시에 여러 카드를 드래그합니다.

그림 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; }
}

코드를 너무 복잡하게 만들지 않기 위해 카드 클래스에는 터치 ID, 위치 및 색의 세 가지 속성이 있습니다. 특별히 자세히 설명할 항목은 없지만, 'Touch ID'를 사용하여 어떤 터치포인트가 연동되어 있는지 확인할 수 있습니다.

프로그램 - 필드 선언

카드 정보를 보유 할 Card 클래스 배열을 갖는 것 외에는 새로운 것이 없습니다. 이번에는 이전 샘플의 응용 프로그램과 같습니다. 그림을 그릴 때 차이점을 볼 수 있도록 각각 다른 색상의 4 장의 카드를 만들었습니다.

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

프로그래밍 방식 - 터치 정보 가져오기

Game.Update 메서드 내부. 이 영역은 공식적이므로 특별히 새로운 것은 없습니다.

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

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

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

프로그램 - 터치 시 터치 ID를 카드에 연결

샘플 프로그램에서는 처리 비용의 관점에서 순서가 바뀌었지만 여기에서 설명하면 이해하기 쉽기 때문에 먼저 설명하겠습니다.

먼저 획득한 TouchCollection foreach를 반복하여 각 정보를 가져옵니다.

/// タッチ情報の処理を行う
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()"를 사용하여 카드 목록에서 ID가 0인 카드를 검색하고 발견되면 해당 카드를 검색합니다. 찾을 수 없으면 null이 반환됩니다. 여기서 확장 메서드는 코드를 단순화하기 위해 LINQ에서 호출되지만 처리 비용이 우려되는 경우 for 루프를 사용하여 하나씩 검색할 수 있습니다.

카드를 찾으면 카드의 터치 ID와 터치 위치를 설정합니다.

프로그램 - 터치 중 및 해제 할 때 카드 처리

카드를 터치하는 동안 항상 드래그 상태를 유지하다가 놓으면 터치 포인트에서 카드까지 연결이 끊어집니다.

// 各カードの情報を調べる
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로 카드 목록을 반복하고 각 카드를 처리합니다. ID가 0이 아닌 경우 터치포인트에 연결되고 프로세스가 계속됩니다.

구조체는 지정된 ID에 대한 터치 정보(있는 경우)를 검색할 수 있는 "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();

이 샘플의 요약

이번에는 멀티 터치를 사용하여 게임에서 실제로 개체를 이동하는 이미지 프로그램을 만들려고했습니다. 또한 터치 정보의 ID를 사용하여 여러 카드를 동시에 드래그할 때 다른 손가락을 떼거나 다시 터치하더라도 카드의 움직임이 일관되는 것을 관찰했습니다.

이 샘플은 샘플일 뿐이며 간단한 처리만 수행됩니다. 다만, 터치 패널에 의한 멀티 터치 조작의 기본 부분은 실제 게임 프로그래밍으로 다루어져야 하므로, 이를 바탕으로 자신의 게임에 맞는 멀티 터치 처리에 적용하시기 바랍니다.