Interacciones táctiles en el desarrollo de juegos para Windows Phone 7, Parte 3 Operaciones de arrastre

¡Programación! - 3.Intenta mover la tarjeta al tacto

Acerca de este ejemplo

Esta vez, me gustaría crear un progran que coloque cuatro cartas en la pantalla y coloque y arrastre las tarjetas al lugar donde se tocan. Esta es una versión multitáctil del programa que primero arrastró un sprite con la clase Mouse. Hasta ahora, ha habido muchas explicaciones, así que esta vez me gustaría explicar principalmente sobre el programa.

Objetivos de este programa de muestra

Arrastra varias tarjetas al mismo tiempo que tocas con multitáctil.

Figura 1: Operación de arrastre multitáctil

Programa - Clases de tarjetas

Cuando se trata de multitáctil, se hace necesario tener múltiples objetos, por lo que aquí me gustaría crear una clase "Card" con el sprite para mover como una "tarjeta".

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

Para no complicar demasiado el código, la clase de tarjeta tiene tres propiedades: touch ID, posición y color. No hay ningún elemento en particular para entrar en detalles, pero "Touch ID" se utiliza para comprobar qué punto de contacto está vinculado.

Programa - Declaración de campos

No hay nada nuevo al respecto, aparte de tener una variedad de clases de tarjetas para contener la información de la tarjeta. Esta vez, es como una aplicación de las muestras anteriores. Hice cuatro tarjetas, cada una con un color diferente para que puedas ver la diferencia al dibujar.

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

Programática - Obtener información táctil

Dentro del método Game.Update. Esta área es formulista, por lo que no hay nada particularmente nuevo.

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

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

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

Programa: vincula un Touch ID a una tarjeta cuando se toca

En el programa de muestra, el orden se invierte desde el punto de vista del costo de procesamiento, pero es más fácil de entender si lo explica desde aquí, así que explicaré esto primero.

Primero, recorra la TouchCollection adquirida para obtener cada pieza de información.

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

Compruebe la propiedad "TouchLocation.State" para indicar que "TouchLocationState.Pressed" es el momento en que la tocó.

En este ejemplo, si el ID de la tarjeta es "0", se define como no se está utilizando, por lo que "tarjetas. Donde(c => c.Id == 0). FirstOrDefault()" para buscar una tarjeta con ID 0 de la lista de tarjetas y recuperar esa tarjeta si la encuentra. Si no se encuentra, se devuelve null. Aquí, LINQ llama a los métodos de extensión para simplificar el código, pero si le preocupan los costos de procesamiento, puede buscarlos uno por uno con un bucle for.

Cuando encuentre la tarjeta, establezca el ID táctil y la posición táctil en la tarjeta.

Programa: manejo de tarjetas durante el tacto y cuando se sueltan

Mantén la tarjeta en estado de arrastre en todo momento mientras la tocas, y cuando la sueltes, se desconectará del punto de contacto de la tarjeta.

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

Repita la lista de tarjetas con foreach y procese cada tarjeta. Si el ID es distinto de 0, se vincula al punto de contacto y el proceso continúa.

La estructura TouchCollection proporciona un método "FindById" que permite recuperar la información táctil para el identificador especificado, si existe. Si la propiedad Card.Id no es 0, podemos suponer que está asociada a algún punto de contacto, por lo que intentaremos obtener la información táctil con el método FindById.

Si el método FindById devuelve true, todavía está en el estado táctil, así que obtenga la posición táctil de la propiedad TouchLocation.Position y establézcala en la clase card. Si el método FindById devuelve false, se libera el toque, así que establezca Card.ID en 0 y establézcalo como si nadie lo tocara.

Programa - Tarjetas de dibujo

Los parámetros necesarios para dibujar ya deberían estar establecidos en la clase Card, por lo que no hay nada nuevo.

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

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

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

Resumen de este ejemplo

Esta vez, traté de crear un programa de imagen que utiliza multi-touch para mover objetos en el juego. También observamos que cuando se arrastraban varias tarjetas al mismo tiempo utilizando el ID de la información táctil, el movimiento de las tarjetas era consistente incluso si el otro dedo se levantaba o se tocaba de nuevo.

Esta muestra es solo una muestra y solo se realiza un procesamiento simple. Sin embargo, la parte básica de la operación multitáctil del panel táctil debe estar cubierta por la programación real del juego, así que aplíquela al procesamiento multitáctil que se adapte a su juego en función de esto.