Interactions tactiles dans le développement de jeux pour Windows Phone 7, partie 3 Opérations de glissement

Programmation! - 3.Essayez de déplacer la carte au toucher

À propos de cet exemple

Cette fois, j’aimerais créer un progran qui place quatre cartes sur l’écran et place et fait glisser les cartes à l’endroit où elles sont touchées. Il s’agit d’une version multipoint du programme qui a d’abord fait glisser un sprite avec la classe Mouse. Jusqu’à présent, il y a eu beaucoup d’explications, donc cette fois je voudrais expliquer principalement sur le programme.

Objectifs de cet exemple de programme

Faites glisser plusieurs cartes en même temps que vous touchez avec l’interaction tactile multipoint.

Figure 1 : Opération de glissement multipoint

Programme - Cours de cartes

Quand il s’agit de multi-touch, il devient nécessaire d’avoir plusieurs objets, donc ici je voudrais créer une classe « Card » avec le sprite à déplacer comme une « carte ».

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

Afin de ne pas rendre le code trop compliqué, la classe de carte possède trois propriétés : touch ID, position et couleur. Il n’y a pas d’élément particulier pour entrer dans les détails, mais « Touch ID » est utilisé pour vérifier quel point de contact est lié.

Programme - Déclaration de champs

Il n’y a rien de nouveau à ce sujet si ce n’est d’avoir un éventail de classes de cartes pour contenir des informations de carte. Cette fois, c’est comme une application des échantillons précédents. J’ai fait quatre cartes, chacune avec une couleur différente pour que vous puissiez voir la différence lorsque vous dessinez.

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

Programmatique - Obtenir des informations tactiles

Dans la méthode Game.Update. Ce domaine est une formule, il n’y a donc rien de particulièrement nouveau.

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

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

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

Programme - Associer un Touch ID à une carte lorsque vous le touchez

Dans l’exemple de programme, l’ordre est inversé du point de vue du coût de traitement, mais il est plus facile à comprendre si vous l’expliquez à partir d’ici, alors je vais d’abord expliquer cela.

Tout d’abord, parcourez la TouchCollection acquise pour obtenir chaque information.

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

Vérifiez la propriété « TouchLocation.State » pour indiquer que « TouchLocationState.Pressed » est le moment où vous l’avez touché.

Dans cet exemple, si l’ID de la carte est « 0 », elle est définie comme n’étant pas utilisée, donc « cartes. Où(c => c.Id == 0). FirstOrDefault() » pour rechercher une carte avec l’ID 0 dans la liste des cartes et récupérer cette carte si elle est trouvée. S’il est introuvable, null est renvoyé. Ici, les méthodes d’extension sont appelées par LINQ pour simplifier le code, mais si vous êtes préoccupé par les coûts de traitement, vous pouvez les rechercher une par une avec une boucle for.

Lorsque vous trouvez la carte, définissez l’ID tactile et la position tactile sur la carte.

Programme - manipulation des cartes au toucher et lors de leur sortie

Maintenez la carte dans un état de glissement à tout moment pendant que vous la touchez, et lorsque vous la relâchez, elle sera déconnectée du point de contact à la carte.

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

Bouclez la liste des cartes avec foreach et traitez chaque carte. Si l’ID est autre que 0, il est lié au point de contact et le processus se poursuit.

La structure TouchCollection fournit une méthode « FindById » qui vous permet de récupérer les informations tactiles pour l’ID spécifié, le cas échéant. Si la propriété Card.Id n’est pas 0, nous pouvons supposer qu’elle est associée à un point de contact, nous allons donc essayer d’obtenir les informations tactiles avec la méthode FindById.

Si la méthode FindById retourne true, elle est toujours à l’état tactile, donc obtenez la position tactile à partir de la propriété TouchLocation.Position et définissez-la dans la classe de carte. Si la méthode FindById renvoie false, la touche est relâchée, définissez Card.ID sur 0 et définissez-la comme personne ne la touche.

Programme - Cartes de dessin

Les paramètres nécessaires au dessin doivent déjà être définis sur la classe Card, il n’y a donc rien de nouveau.

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

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

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

Résumé de cet exemple

Cette fois, j’ai essayé de créer un programme d’image qui utilise le multi-touch pour déplacer des objets dans le jeu. Nous avons également observé que lorsque plusieurs cartes étaient glissées en même temps à l’aide de l’ID des informations tactiles, le mouvement des cartes était cohérent même si l’autre doigt était levé ou touché à nouveau.

Cet échantillon n’est qu’un échantillon et seul un traitement simple est effectué. Cependant, la partie de base du fonctionnement multi-touch par l’écran tactile doit être couverte par la programmation de jeu réelle, veuillez donc l’appliquer au traitement multi-touch qui convient à votre jeu en fonction de cela.