Schéma de l'immersion

Ce guide décrit les composants d'une expérience d'immersion simple sous la forme d'un jeu de Charades. Les jeux sont parfaits pour une immersion, car la plupart nécessitent une interface utilisateur personnalisée et des commandes de saisie.

Vous découvrirez également des conseils de conception, de développement et de distribution qui vous aideront à créer vos propres Glassware.

Avant de commencer

La version complète du jeu Charades est disponible sur GitHub. Importez-le dans Android Studio avant de commencer, car ce guide y fait beaucoup référence.

  1. Sur l'écran "Démarrage rapide", cliquez sur Règlement à partir de Version > Git.
  2. Copiez l'URL du clone à partir de Charades.
  3. Collez l'URL du clone dans l'URL du dépôt Vcs, puis cliquez sur Cloner.
  4. Cliquez sur Yes (Oui) sur l'écran suivant.
  5. Cliquez sur OK sur l'écran suivant.
  6. Créez le projet et exécutez-le sur votre Glass connecté en cliquant sur le bouton Play (Lire). Vérifiez les README de l'exemple pour en savoir plus sur l'appel.

Objectifs de l'atelier

Vous allez apprendre à utiliser les composants du SDK Android pour créer l'essentiel de l'immersion dans Charades, puis le GDK pour vous connecter à Glass. Voici une liste de sujets que vous allez découvrir:

  • Concevoir le flux de l'UI avec les ressources de conception que nous fournissons
  • Concevoir des déclencheurs vocaux pour démarrer Glassware
  • Utiliser les activités Android pour définir la structure de l'interface utilisateur du jeu
  • Créer des éléments de menu Android permettant aux utilisateurs de sélectionner des options de jeu
  • Intégration à l'expérience Glass avec un déclencheur vocal sur le menu principal
  • Utiliser des détecteurs de gestes GDK qui détectent les entrées utilisateur et effectuent des actions personnalisées
  • Découvrez des implémentations simples d'interface utilisateur Android qui améliorent le polissage et suivent le style Glass.
  • Découvrez le processus de distribution et ce que nous recherchons

Conception

Avant de commencer à développer, prenez le temps de concevoir votre Glassware. Cela vous donne une idée des flux d'interface utilisateur qui fonctionnent le mieux sur Glass, de la commande vocale que vous allez utiliser et de l'apparence de vos cartes.

Bien entendu, la conception de Glassware est un processus itératif. Certaines des choses que vous concevez maintenant vont changer, mais il est essentiel de mener une bonne partie de ce travail au début pour bénéficier d'une expérience optimale.

Flux de l'interface utilisateur

La conception du flux de l'interface utilisateur est un exercice simple qui vous permet de visualiser votre Glassware avant d'écrire une ligne de code. Nous le faisons tout le temps pour les lunettes Glassware que nous créons !

Examinons les principaux éléments d'interface utilisateur de l'immersion Charades. Vous comprendrez ainsi comment fonctionne l'interface utilisateur et comment ce processus peut être utile pour créer votre propre Glassware.

Écran de démarrage

Il s'agit du premier écran que les utilisateurs voient lorsqu'ils lancent l'immersion des charades. Elle permet aux utilisateurs de s'orienter avant de se lancer dans l'expérience de jeu. Il s'agit d'une construction de jeu générale que les utilisateurs connaissent.

Lorsque les utilisateurs appuient sur le pavé tactile, un système de menu contenant deux éléments s'affiche : Nouveau jeu et Instructions.

Mode Instructions

Lorsque les immersions sont créées, les mécanismes de saisie sont parfois nouveaux. Il est donc utile d'indiquer aux utilisateurs comment ils doivent interagir avec l'immersion, en particulier avec un jeu.

Cet ensemble de cartes contient les instructions du jeu, et explique aux utilisateurs comment jouer et quels gestes utiliser pour naviguer dans l'UI. Pour y accéder, appuyez sur l'élément de menu Instructions de l'écran d'accueil.

Mode Jeu

Ces écrans constituent le flux de jeu principal. Les utilisateurs peuvent y accéder en appuyant sur l'élément de menu New game (Nouveau jeu) de l'écran d'accueil.

Cet ensemble de fiches affiche un mot aléatoire (jusqu'à 10). Les utilisateurs ignorent un mot en balayant l'écran vers l'avant et appuient sur le pavé tactile lorsqu'ils décrivent correctement le mot.

Écran des résultats du jeu

Cet écran affiche les résultats du jeu. L'écran "Partie terminée" s'affiche, et les utilisateurs peuvent balayer l'écran vers l'avant pour afficher les résultats. Lorsque les utilisateurs appuient sur l'une des cartes de résultats, l'élément de menu New Game (Nouveau jeu) s'affiche pour leur permettre de démarrer une autre partie.

Une commande vocale

Vous devez trouver une commande vocale assez tôt dans le processus de conception. Les commandes vocales permettent aux utilisateurs de démarrer Glassware à partir du menu vocal Glass Home (carte de l'horloge), si nécessaire. Elles sont essentielles à la conception de Glassware.

Par exemple, la commande Publier une mise à jour fonctionne bien dans un modèle de type "fire and forget", dans lequel les utilisateurs prononcent la commande et du texte, et le Glassware la traite sans aucune autre intervention de l'utilisateur. Les utilisateurs peuvent ainsi revenir rapidement à ce qu'ils font.

D'un autre côté, pour un élément comme Jouer à un jeu, vous voudrez généralement amener les utilisateurs sur un écran d'accueil pour qu'ils puissent commencer par s'orienter. Étant donné que cette commande vocale lance très probablement une immersion, vous pouvez vous attendre à ce que les utilisateurs voient s'afficher des écrans et des menus supplémentaires pour démarrer le jeu. Lancer immédiatement une expérience de jeu après une commande vocale est souvent déconseillé.

Charades utilise la commande vocale Jouer à un jeu . Une fois que l'utilisateur a appelé la commande vocale, l'écran d'accueil Charades s'affiche, l'invitant à Appuyer pour obtenir plus d'options (New game (Nouveau jeu) ou Instructions dans ce cas).

Disposition des fiches

Que vous créiez des immersions ou des fiches actives, vous devez utiliser les mises en page CardBuilder ou XML lorsque cela est possible.

Bien souvent, vous devrez créer votre propre mise en page. Vous devez donc suivre nos consignes relatives à l'interface utilisateur pour avoir l'apparence de Glassware la plus aboutie.

Le chronomètre respecte les consignes générales de mise en page, mais dispose de mises en page d'interface utilisateur personnalisées utilisant des composants Android standards tels que des vues et des mises en page.

Développer

Pour développer des immersions, vous devez utiliser les mêmes outils que ceux que vous utiliseriez pour le développement Android afin de créer la majeure partie de Glassware, puis utiliser les API du module complémentaire GDK pour accéder aux fonctionnalités spécifiques à Glass, telles que les détecteurs de gestes et les commandes vocales.

Vous allez souvent utiliser des composants Android courants pour créer des Glassware, mais gardez à l'esprit que certains concepts sont parfois différents. Par exemple, n'équivaut pas à une immersion dans une activité Android. Les expériences immersives sont conçues pour Glass. Elles sont associées à une ou plusieurs activités Android, ainsi qu'à de nombreux autres composants du SDK GDK et Android.

Le reste des sections de développement détaille la structure du jeu Charades et les principaux composants du projet que vous avez importé précédemment. Il est utile d'installer Android Studio maintenant afin de pouvoir continuer. Le code source lui-même est commenté. Cette section décrit l'objectif général de chaque fichier et fournit des conseils utiles que vous pouvez appliquer à votre propre Glassware.

Voici une brève présentation des principaux composants de Charades:

  • Déclaration de déclencheur vocal pour l'accrocher dans le menu vocal principal de Glass.
  • Activité sur l'écran de démarrage permettant aux utilisateurs de démarrer un jeu ou de voir les instructions. Cette activité lance les instructions ou l'activité de jeu
  • L'activité du tutoriel montre aux utilisateurs comment jouer au jeu en effectuant les actions principales.
  • L'activité de jeu permet aux utilisateurs de jouer au jeu
  • L'activité des résultats affiche le score du jeu et une liste de mots devinés ou devinés. Elle permet également aux utilisateurs de commencer une nouvelle partie avec un élément de menu.

Une commande vocale

Vous créez des commandes vocales avec un fichier de ressources XML qui spécifie la commande que vous utilisez, puis en spécifiant la ressource XML dans le fichier AndroidManifest.xml.

Les fichiers suivants sont associés à la commande vocale Charades:

  • res/xml/voice_trigger_play_a_game .xml : déclare la commande vocale à utiliser.
  • AndroidManifest.xml : déclare l'activité à démarrer lorsque la commande vocale est prononcée.

Activité sur l'écran de démarrage

L'écran d'accueil est la première chose que voient les utilisateurs lorsqu'ils lancent des Charades et les guident avant de commencer le jeu.

Les fichiers suivants sont associés à cette activité:

  • res/layout/activity_start_game.xml : déclare la mise en page de l'écran d'accueil.
  • res/menu/start_game.xml : déclare le système de menus de l'écran d'accueil, qui contient des éléments de menu Instructions et New game.
  • res/values/dimens.xml : déclare les dimensions et les marges de carte standards que les activités de ce projet utilisent pour suivre le style Glass.
  • src/com/google/android/glass/sample/charades/StartGameActivity.java : classe principale de l'écran d'accueil.
  • res/drawable-hdpi/ic_game_50.png : icône de menu pour Nouveau jeu.
  • res/drawable-hdpi/ic_help_50.png : icône de menu pour Instructions.

Modèle de jeu

Il est toujours judicieux de séparer le modèle d'un jeu (l'état du jeu) de l'UI. La classe CharadesModel suit le score du jeu, le nombre d'expressions qui ont été devinées en mode de jeu et les différentes instructions, et si les utilisateurs les ont suivies ou non en mode d'instructions.

Les fichiers suivants sont associés au modèle de jeu:

  • src/com/google/android/glass/sample/charades/CharadesModel.java

Activité de base du jeu

Étant donné que les tutoriels et les modes de jeu du jeu partagent des fonctionnalités et des interfaces utilisateur très similaires, cette classe de base définit les deux. Les activités pour les instructions et les modes de jeu viennent compléter cette leçon.

Les fichiers suivants sont associés à cette activité:

  • res/layout/activity_game_play.xml : définit la mise en page partagée par les modes de jeu et d'instructions de Charades.
  • src/com/google/android/glass/sample/charades/BaseGameActivity.java : définit les fonctionnalités de base du mode de jeu et les instructions du mode Charades, partagées.

Activité des instructions

L'activité des instructions affiche trois fiches qui expliquent comment jouer. Il détecte si les utilisateurs effectuent l'action affichée sur la fiche avant de continuer.

Les fichiers suivants sont associés à cette activité:

  • src/com/google/android/glass/sample/charades/TutorialActivity.java : étend BaseGameActivity et définit le texte d'instruction à afficher et la façon de gérer les gestes lorsque les utilisateurs suivent les instructions du jeu.

Activité relative aux jeux

L'activité de jeu définit le flux principal du jeu. Elle identifie les mots à afficher et le score à suivre, dispose d'un détecteur pour gérer les gestes et lance les résultats une fois le jeu terminé.

Les fichiers suivants sont associés à cette activité:

  • GamePlayActivity : étend BaseGameActivity et contient la logique de flux de jeu principal.

Activité des résultats

L'activité résultante affiche les mots devinés ou devinés, ainsi que le score du jeu. Il contient également un élément de menu permettant aux utilisateurs de commencer une nouvelle partie.

Les fichiers suivants sont associés à cette activité:

  • res/layout/game_results.xml : définit la mise en page pour la fiche "Game over".
  • res/layout/card_results_summary.xml : définit la mise en page pour l'affichage des mots devinés ou devinés dans une liste.
  • res/layout/table_row_result.xml : définit une mise en page de ligne individuelle pour le résumé des résultats.
  • src/com/google/android/glass/sample/charades/GameResultsActivity.java : définit l'activité qui affiche les mises en page et les menus définis par les ressources XML mentionnées ci-dessus.
  • res/raw/sad_trombone.ogg : son à énoncer lorsque les utilisateurs ne comprennent pas tous les mots.
  • res/raw/triumph.ogg : son émis par l'utilisateur lorsque les 10 mots sont définis.
  • res/drawable-hdpi/ic_done_50.png : icône en forme de coche qui s'affiche avec des mots bien devinés.

Ressources d'animation

Ces ressources d'animation ajoutent du vernis supplémentaire aux Charades:

  • res/anim/slide_out_left.xml : cette option anime une vue de sortie à faire glisser vers la gauche (par exemple, lorsqu'un mot est transmis).
  • res/anim/slide_in_right.xml : anime une vue d'entrée à faire glisser depuis la droite (par exemple, lorsqu'un nouveau mot entre en vue).
  • res/anim/tug_right.xml : cette option définit une animation de tirage si vous balayez l'écran sans afficher la vue correspondante. Les utilisateurs savent ainsi que le balayage n'a eu aucun effet.

Fichier manifeste Android

Le fichier AndroidManifest.xml décrit les principaux composants de votre Glassware afin que le système sache comment l'exécuter. Le fichier manifeste de Charades déclare les éléments suivants:

  • L'icône et le nom du Glassware Glass affiche ces informations dans le menu tactile principal si plusieurs Glassware répondent à la même commande vocale.
  • Toutes les activités associées à Charades. Cela permet au système de savoir comment démarrer les activités de Glassware.
  • La commande vocale et un filtre d'intent qui démarre une activité spécifique lorsque la commande vocale est prononcée.
  • Code de version du Glassware. Ce code doit être mis à jour (et généralement le nom de la version) chaque fois qu'une nouvelle version de cet APK est importée dans MyGlass.