Interactions tactiles dans le développement de jeux pour Windows Phone 7 Partie 2 Multitouch

Programmation! - 2.Essayez le multi-touch

À propos de cet exemple

Ici, je voudrais expliquer le programme pour réaliser l’entrée multi-touch. Dans Windows Phone 7, la saisie tactile multipoint via l’écran tactile est l’un des éléments les plus importants pour la saisie utilisateur. En effet, contrairement à Windows et Xbox 360, l’interface d’entrée principale est l’écran tactile. Il peut y avoir des téléphones Windows avec des claviers, mais bien sûr, ils n’en ont pas toujours. Donc, pour que le jeu fonctionne sur n’importe quel Windows Phone, il doit être tactile.

Si vous limitez l’écran tactile à « single touch » uniquement, les types de jeux qui peuvent être créés seront inévitablement limités lorsqu’il s’agira de créer des jeux. Pensez à une console de jeu portable (vous pouvez la laisser immobile). La plupart des consoles de jeux exigent que vous teniez le contrôleur de jeu (ou la console réelle) avec les deux mains et que vous appuyiez sur plusieurs boutons en même temps.

Windows Phone 7 n’a pas autant de boutons que les contrôleurs de jeu, et il n’a pas nécessairement de clavier. Par conséquent, des touches et des boutons virtuels peuvent être placés sur l’écran, et lorsque vous appuyez dessus, cela n’est pas pratique car ils ne peuvent pas être pressés simultanément avec une seule touche.

Bien sûr, en plus de l’exemple de bouton virtuel ci-dessus, le multi-touch est nécessaire pour les jeux où plusieurs personnes utilisent un écran, comme « pincer et étirer (déplacer deux points plus près ou plus loin l’un de l’autre) » qui est courant dans le multi-touch.

Soit dit en passant, l’introduction est longue, mais dans cet exemple, j’aimerais acquérir des informations multi-touch à l’aide d’une classe dédiée aux écrans tactiles. C’est amusant de créer un échantillon qui peut être joué avec le multi-touch soudainement, mais j’aimerais d’abord savoir quel type d’information peut être obtenu avec le multi-touch. Il y a certaines habitudes, donc en les connaissant d’abord, vous pouvez réduire le temps passé à enquêter sur la cause, par exemple lorsque cela ne fonctionne pas bien dans la programmation plus tard.

Objectifs de cet exemple de programme

Affichez et confirmez les informations lorsque l’interaction tactile multipoint est effectuée.

Figure 1 : les informations tactiles s’affichent sous forme de texte lorsque vous appuyez sur

Programme - Déclaration de champs

Les champs doivent être intitulés TouchPanelCapabilities Structure et TouchCollection Structure.

/// <summary>
///  スプライトでテキストを描画するためのフォント
/// </summary>
SpriteFont font;

/// <summary>
///  タッチパネルの機能情報
/// </summary>
TouchPanelCapabilities capabilities;

/// <summary>
///  取得したタッチ情報の一覧
/// </summary>
TouchCollection touches;

La « structure TouchPanelCapabilities » est une structure qui peut avoir les fonctions de l’écran tactile lui-même comme paramètres. Il est utilisé pour vérifier si l’écran tactile peut être utilisé lors de la mise à jour.

La structure TouchCollection contient une liste d’informations sur l’état actuellement touché. Si plusieurs touches sont détectées, plusieurs « structures TouchLocation » peuvent être récupérées. Nous y reviendrons plus tard.

Programme - Chargement des polices

Avant de dessiner du texte à l’écran, ajoutez la définition de police à votre projet de contenu et chargez-le avec la méthode Game.LoadContent. Ce n’est pas directement lié aux écrans tactiles, donc je vais omettre une explication détaillée.

Figure 2: Ajouter « Font.spritefont » à votre projet de contenu

// フォントをコンテンツパイプラインから読み込む
font = Content.Load<SpriteFont>("Font");

Programme - Obtenir des informations sur l’écran tactile

Obtenez les informations de l’écran tactile dans la méthode Game.Update.

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

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

Vous pouvez appeler la méthode « TouchPanel.GetCapabilities » pour obtenir les informations de fonction de l’écran tactile. Deux types d’informations peuvent être acquises : « L’écran tactile peut-il être utilisé ? » et « Nombre maximal de points de contact pouvant être acquis par l’écran tactile ». Aucun d’eux ne change pendant le jeu, donc je pense qu’il n’y a pas de problème si vous l’obtenez selon la méthode Game.Initialize, mais à l’avenir, les périphériques qui peuvent supprimer l’écran tactile (écran tactile qui peut être connecté à USB ou à des périphériques réels autres que Windows Phone) apparaissent, et il est décrit dans la méthode de mise à jour.

En outre, il n’est pas nécessaire de vérifier si l’écran tactile peut être utilisé car il peut toujours être utilisé sur Windows Phone 7, mais lors du partage de code avec Windows et Xbox 360, ces matériels ne sont pas des interfaces d’entrée requises et doivent être vérifiés.

Si vous pouvez confirmer que l’écran tactile est disponible dans la propriété « TouchPanelCapabilities.IsConnected », la méthode « TouchPanel.GetState » obtient l’état tactile actuel.

À l’origine, certains traitements d’opération sont effectués après l’acquisition d’informations tactiles, mais dans cet exemple, les informations sont uniquement affichées, de sorte qu’aucun traitement supplémentaire n’est effectué dans la méthode Game.Update.

Programme - Obtenez le nombre maximum de points de contact que vous pouvez obtenir

Le nombre maximal de points de contact pouvant être récupérés est approximativement fixe, il n’est donc pas souvent nécessaire de les récupérer pendant le jeu, mais vous pouvez obtenir le nombre maximal de points de contact pouvant être récupérés à partir de la propriété TouchPanelCapabilities.MaximumTouchCount. Par exemple, si la propriété MaximumTouchCount est « 4 », vous ne pouvez pas obtenir les informations de cinquième position en touchant l’écran tactile avec cinq doigts.

Le nombre d’acquisitions pour le smartphone « HTC 7 Trophy » utilisé dans cet échantillon était de « 4 ». (Soit dit en passant, XNA Game Studio 4.0 est défini pour toujours renvoyer 4.) La spécification Windows Phone 7 indique qu’il est supérieur à 4 points, il ne renvoie donc pas moins de 4.)

// タッチ可能な最大数を表示
spriteBatch.DrawString(font,  
                       "MaximumTouchCount : " +
                         capabilities.MaximumTouchCount,
                       new Vector2(20, 50),
                       Color.LightGreen);

Figure 3 : Nombre de propriétés TouchPanelCapabilities.MaximumTouchCount

Programme - Obtenir des informations tactiles

La structure TouchCollection récupérée contient plusieurs informations tactiles. Par exemple, si vous touchez avec deux doigts, il contient généralement deux touches.

Le nombre d’informations tactiles peut être récupéré dans la propriété TouchCollection.Count. Les informations tactiles sont affichées à plusieurs reprises dans l’instruction for autant de fois qu’elles sont obtenues. À l’origine, il n’y a pas de problème à boucler avec foreach, mais comme nous utiliserons l’index de tableau (int index) dans l’explication ultérieure, nous le bouclerons avec for.

// タッチ情報の数だけループする
for (int index = 0; index < touches.Count; index++)
{
  // 指定したインデックスのタッチ情報取得
  TouchLocation tl = touches[index];

  // タッチ情報を可視化
  string mes = "Index : " + index + Environment.NewLine +
               "Id : " + tl.Id + Environment.NewLine +
               "Position : " + tl.Position + Environment.NewLine +
               "State : " + tl.State;

  // 文字の描画
  spriteBatch.DrawString(font,
                         mes,
                         new Vector2(30 + (index % 4) * 10,
                                     80 + index * 140),
                         Color.White);
}

Maintenant, chaque information tactile est obtenue sous la forme d’une structure « TouchLocation ». S’il est en boucle avec for, il peut être obtenu avec « TouchCollection[index] ». (Vous pouvez également obtenir la structure « TouchLocation » directement dans foreach.)

Les quatre types d’informations suivants peuvent être obtenus à partir de la structure « TouchLocation », et chaque information est affichée dans l’exemple.

Lorsque vous l’exécutez réellement, les informations tactiles sont affichées comme indiqué ci-dessous. Puisque vous touchez avec trois doigts, vous pouvez voir trois touches. Soit dit en passant, si vous touchez avec cinq doigts, vous n’en verrez que quatre. (Parce que le nombre maximum d’acquisitions est de 4)

Figure 4 : Toucher avec trois doigts

Programme - Éléments à surveiller lors de la récupération des informations tactiles 1 (index et ID)

J’ai mentionné ci-dessus qu’il y a des choses à garder à l’esprit lorsqu’il s’agit d’informations tactiles, mais le premier est « index » et « ID ». Un index fait simplement référence à un index de tableau.

Je pense qu’il est plus facile de comprendre si vous l’essayez sur une machine réelle que de l’expliquer par écrit. Par exemple, disons que vous opérez avec deux doigts, « index » et « majeur », et que vous touchez d’abord avec votre index.

Figure 5 : toucher avec l’index

Comme indiqué à l’écran, l’index sera « 0 ». Puis touchez-le avec votre majeur.

Figure 6 : toucher du majeur

Dans cet état, vous touchez avec deux doigts, donc deux informations sont affichées. L’index touché avec le majeur est « 1 ».

Levons notre index ici. Ensuite, les informations tactiles ressembleront à ce qui suit.

Figure 7 : relâchez votre index

Comme vous l’avez peut-être déjà remarqué, l’index de l’information que vous touchez avec votre majeur est « 0 ». Si vous gérez le caractère par index lorsque vous le déplacez, l’opération ci-dessus entraînera les actions suivantes.

・ Déplacez le caractère « A » avec votre index
↓
・ Déplacez le caractère « B » avec le majeur dans cet état.
↓
・ Relâchez l’index tout en déplaçant le personnage avec le majeur
↓
・ Le caractère contrôlé par le majeur passe soudainement à « A »

Un autre phénomène est que si vous relâchez ou touchez à plusieurs reprises l’un des deux doigts tout en les touchant, le texte de dessin de la première information tactile peut scintiller. C’est parce que le deuxième doigt interrompt l’index « 0 » au moment où vous le touchez ou le relâchez.

Comme mentionné ci-dessus, l’index et l’ordre des informations tactiles lorsque l’interaction tactile multipoint ne correspondent pas à l’ordre dans lequel elles sont touchées. Par conséquent, si vous souhaitez effectuer des opérations, ne les gérez pas dans l’index TouchCollection.

Ce qui devrait être géré, c’est que la structure « TouchLocation » a une propriété « Id », et l’ID est réécrit avec une nouvelle valeur chaque fois qu’il est touché, mais la relation entre le point de contact et l’ID est garantie lors du toucher, donc nous allons le gérer.

Bien sûr, cela ne signifie pas que vous devez le gérer par ID, et dans certains cas, la position tactile seule est suffisante. Par exemple, si vous touchez simplement un bouton à l’écran, vous pouvez déterminer que vous avez appuyé sur un bouton en vérifiant la position tactile, quel que soit l’identifiant. Cependant, lors de l’inclusion du traitement de glissement, la position change toujours, donc je pense qu’elle devrait toujours être déterminée par ID.

Programme - Éléments à garder à l’esprit lors de l’acquisition d’informations tactiles 2 (nombre d’informations tactiles acquises)

Bien qu’il ne soit pas inclus dans le programme de l’article, l’exemple dessine la chaîne « GetMaxTouchCount » en bas de l’écran et « le nombre maximum d’informations tactiles acquises en même temps ». Cela a affiché le nombre maximal d’informations tactiles acquises par la méthode « TouchPanel.GetState » dans le passé, mais dans cet ordinateur de test, la propriété « TouchPanelCapabilities.MaximumTouchCount » est 4, donc la valeur maximale affichée ici devrait généralement être 4. Si vous mettez cinq doigts dessus, ce sera toujours 4.

Figure 8 : Nombre à cinq doigts

Faisons une petite expérience. Essayez de répéter l’écran tactile avec plusieurs doigts à grande vitesse. Cela dépend de la machine de test, mais le nombre peut dépasser 4 avant que vous ne le sachiez.

Figure 9 : GetMaxTouchCount est supérieur à 4

En fait, les informations tactiles acquises par la méthode « TouchPanel.GetState » ne sont pas les informations tactiles au moment de l’appel de la méthode « TouchPanel.GetState », mais le moment où vous le touchez et le moment où vous le libérez de la dernière mise à jour sont mis en cache. Par conséquent, même si jusqu’à quatre touches peuvent être détectées en même temps, toucher à nouveau le même doigt est traité comme un toucher distinct, de sorte que plus d’informations tactiles peuvent être obtenues que TouchPanelCapabilities.MaximumTouchCount.

Par conséquent, même si TouchPanelCapabilities.MaximumTouchCount est égal à 4, si le nombre d’éléments de tableau de données tactiles est fixé à 4, une erreur de dépassement d’index peut se produire en fonction de la méthode de traitement.

Soit dit en passant, à l’aide de XNA Game Studio, la valeur maximale de la propriété TouchCollection.Count est décrite comme « 8 », donc si vous souhaitez fixer le nombre d’éléments dans le tableau, vous devez définir le nombre d’éléments à au moins 8. (Si vous envisagez de futures mises à niveau de version, vous pouvez inclure une clause de garde afin que l’index ne dépasse pas.)

Résumé de cet exemple

Cette fois, nous avons examiné divers paramètres pour les informations obtenues à partir du multi-touch. Nous avons également confirmé qu’il y a certains points à garder à l’esprit lors de l’acquisition d’informations sur l’écran tactile. Sur la base de ces connaissances, j’aimerais expliquer un échantillon qui utilise réellement le multi-touch.