Immersionsmuster

In diesem Leitfaden werden die Komponenten beschrieben, die ein einfaches immersives Erlebnis in Form eines Charades-Spiels bieten. Spiele sind ein perfekter Anwendungsfall für das Immersieren, da die meisten eine benutzerdefinierte UI und Eingabesteuerelemente erfordern.

Außerdem erhalten Sie Tipps für das Design, die Entwicklung und den Vertrieb, die für den Aufbau Ihrer eigenen Glassware wichtig sind.

Hinweis

Die vollständige Quelle des Spiels „Charades“ ist auf GitHub verfügbar. Du solltest sie vorerst in Android Studio importieren, da in diesem Leitfaden stark darauf verwiesen wird.

  1. Klicken Sie im Schnelleinstieg auf Check out from version Control > Git (Über die Versionsverwaltung > Git auschecken).
  2. Kopieren Sie die Klon-URL aus Charades.
  3. Fügen Sie die Klon-URL in die Vcs-Repository-URL ein und klicken Sie auf Klonen.
  4. Klicken Sie auf dem folgenden Bildschirm auf Ja.
  5. Klicken Sie auf dem folgenden Bildschirm auf OK.
  6. Erstellen Sie das Projekt und führen Sie es auf Ihrem verbundenen Glass aus. Klicken Sie dazu auf die Schaltfläche Play. Prüfen Sie auf jeden Fall die README des Beispiels auf Details zum Aufruf.

Lerninhalte

Sie erfahren, wie Sie Komponenten aus dem Android SDK verwenden, um den Großteil der Charades-Übung zu erstellen, und wie sich das GDK in Glass einbinden lässt. Hier finden Sie eine Liste der Themen, über die Sie sich informieren werden:

  • Design der Benutzeroberfläche mit den von uns bereitgestellten Designressourcen
  • Sprachbefehle zum Starten von Glassware entwerfen
  • Mit Android-Aktivitäten die Benutzeroberflächenstruktur des Spiels definieren
  • Android-Menüelemente erstellen, mit denen Nutzer Spieloptionen auswählen können
  • Einbindung in Glass mit einem Sprachbefehl im Hauptmenü
  • GDK-Touch-Detektoren verwenden, die Nutzereingaben erkennen und benutzerdefinierte Aktionen ausführen
  • Einfache Implementierungen der Android-Benutzeroberfläche, die den Look des Glass-Designs optimieren
  • Informationen zum Vertrieb und worauf wir bei der Freigabe von Glassware achten

Design

Nehmen Sie sich vor der Entwicklung Zeit, die Glassware zu entwerfen. Dadurch erhalten Sie eine gute Vorstellung davon, welche UI-Abläufe in Glass am besten funktionieren, welchen Sprachbefehl Sie verwenden und wie Ihre Karten aussehen werden.

Das Entwerfen von Glassware ist natürlich ein iterativer Prozess und einige der Dinge, die Sie jetzt entwerfen, werden sich ändern. Aber ein guter Teil dieser Arbeit zu Beginn ist für den Aufbau einer großartigen Erfahrung entscheidend.

UI-Ablauf

Das Entwerfen des UI-Ablaufs ist eine einfache Übung, bei der Sie Ihre Glassware vor dem Schreiben einer Codezeile visualisieren können. Wir arbeiten ständig an der Entwicklung unserer Glassware.

Sehen wir uns die wichtigsten Elemente der Benutzeroberfläche von Charades einmal genauer an.

Startbildschirm

Dieser Bildschirm wird als Erstes angezeigt, wenn Nutzer die Charades-Wiedergabe starten. Nutzer können sich damit vertraut machen, bevor sie das Spielerlebnis in Angriff nehmen. Es ist ein allgemeines Spielekonstrukt, mit dem Nutzer vertraut sind.

Wenn Nutzer auf das Touchpad tippen, wird ein Menüsystem mit zwei Elementen eingeblendet: Neues Spiel und Anleitung.

Anleitungsmodus

Bei der Erstellung von Immersionen sind die Eingabemechanismen manchmal neu. Daher sollten Sie Nutzern mitteilen, wie sie mit der Immersion interagieren sollten, insbesondere mit einem Spiel.

Diese Karten zeigen die Anleitung für das Spiel und zeigen Nutzern, wie sie spielen und welche Gesten sie verwenden können. Nutzer gelangen dazu, indem sie auf dem Startbildschirm auf den Menüpunkt Anleitung tippen.

Spielmodus

Diese Bildschirme stellen den Hauptablauf des Spiels dar. Nutzer können diesen Ablauf aufrufen, indem sie auf dem Startbildschirm auf das Menüelement Neues Spiel tippen.

Diese Karten enthalten ein zufälliges Wort (bis zu 10). Nutzer überspringen Wörter, indem sie vorwärts wischen und auf das Touchpad tippen, wenn sie das Wort richtig beschreiben.

Bildschirm mit Spielergebnissen

Auf diesem Bildschirm werden die Ergebnisse des Spiels angezeigt. Der Bildschirm „Game over“ wird angezeigt und Nutzer können nach vorne wischen, um die Spielergebnisse zu sehen. Wenn Nutzer auf eine der Ergebniskarten tippen, wird der Menüpunkt Neues Spiel angezeigt, damit Nutzer ein anderes Spiel starten können.

Sprachbefehl

Sie sollten einen Sprachbefehl schon früh im Designprozess herausfinden. Mit Sprachbefehlen können Nutzer Glassware bei Bedarf über das Sprachmenü von Glass Home (Uhrkarte) starten. Dies ist ein wesentlicher Bestandteil der Entwicklung von Glassware.

Der Befehl Update aktualisieren funktioniert beispielsweise gut mit einem Fire-and-Forget-Modell, bei dem Nutzer den Befehl und etwas Text sprechen und von Glassware ohne weitere Eingriffe verarbeitet werden. So können die Nutzer schnell wieder zu dem gelangen, was sie tun.

Andererseits möchten Sie für Nutzer, die ein Spiel spielen, normalerweise auf einen Startbildschirm geleitet werden, damit sie zuerst den Überblick erhalten. Da durch diesen Sprachbefehl höchstwahrscheinlich eine immersive Wiedergabe ausgelöst wird, können Sie davon ausgehen, dass den Nutzern zusätzliche Bildschirme und Menüs angezeigt werden, um das Spiel zu starten. Es ist in der Regel schlecht, Nutzer sofort in ein Spielerlebnis aufzunehmen, direkt nach dem Sprachbefehl.

Charades verwendet den Sprachbefehl Spiel ein Spiel . Nachdem Nutzer den Sprachbefehl aufgerufen haben, wird der Startbildschirm von Charades angezeigt und die Nutzer werden aufgefordert, auf Für weitere Optionen tippen zu tippen (in diesem Fall auf Neues Spiel oder Anleitung).

Kartenlayouts

Unabhängig davon, ob du Immersionen oder Live-Karten erstellst, solltest du nach Möglichkeit CardBuilder oder XML-Layouts verwenden.

Oftmals müssen Sie jedoch Ihr eigenes Layout erstellen. Beachten Sie daher unsere UI-Richtlinien, um die beste Glassware zu erhalten.

Die Stoppuhr folgt den allgemeinen Layoutrichtlinien, hat aber benutzerdefinierte Layouts für die Benutzeroberfläche, die mit Android-Standardkomponenten wie Ansichten und Layouts verwendet werden.

Entwickeln

Zum Eintauchen in die Anwendung verwenden Sie dieselben Tools, die Sie für die Android-Entwicklung verwenden, um den Großteil der Glassware zu erstellen. Mit den APIs im GDK-Add-on können Sie dann auf Glass-spezifische Funktionen wie Gesten- und Sprachbefehle zugreifen.

Sie verwenden häufig gängige Android-Komponenten, um Glassware zu erstellen. Beachten Sie jedoch, dass einige Konzepte manchmal anders sind. Eine Immersion mit einer Android-Aktivität ist beispielsweise nicht gleichzusetzen. Immersionen sind für Glass konzipierte Umgebungen mit einer oder mehreren Android-Aktivitäten sowie vielen anderen Komponenten des GDK und des Android SDK.

In den restlichen Abschnitten zum Entwickeln wird erläutert, wie das Spiel „Charades“ strukturiert ist und welche Hauptkomponenten des Projekts Sie zuvor importiert haben. Es ist nützlich, jetzt Android Studio zu haben, damit du dem Verlauf folgen kannst. Der Quellcode selbst ist kommentiert. In diesem Abschnitt werden der allgemeine Zweck jeder Datei und hilfreiche Tipps für Ihre eigene Glassware beschrieben.

Hier eine kurze Übersicht über die wichtigsten Komponenten von Charades:

  • Erklärung zur Auslösung des Sprachbefehls, um sich in das Haupt-Sprachmenü von Glass einzuschalten.
  • Splash-Screen-Aktivität, mit der Nutzer ein Spiel starten oder eine Anleitung ansehen können Diese Aktivität startet die Anleitungsaktivität oder die Gameplay-Aktivität
  • In der Anleitung lernen Sie, wie die wichtigsten Aktionen des Spiels ausgeführt werden.
  • Mit der Spielaktivität können Nutzer das Spiel selbst spielen
  • Die Ergebnisaktivität zeigt die Punktzahl des Spiels und eine Liste mit erratenen und nicht erratenen Wörtern. Außerdem können Nutzer ein neues Spiel mit einem Menüpunkt starten.

Sprachbefehl

Sie erstellen Sprachbefehle mit einer XML-Ressourcendatei, die den von Ihnen verwendeten Befehl angibt. Geben Sie dann die XML-Ressource in der Datei AndroidManifest.xml an.

Die folgenden Dateien sind mit dem Charades-Sprachbefehl verknüpft:

  • res/xml/voice_trigger_play_a_game .xml: Gibt den zu verwendenden Sprachbefehl an.
  • AndroidManifest.xml: Gibt die Aktivität an, die gestartet werden soll, wenn der Sprachbefehl gesprochen wird.

Aktivität auf dem Startbildschirm

Der Startbildschirm ist das Erste, was Nutzer sehen, wenn sie "Charades" starten und vor dem Spielen orientieren.

Die folgenden Dateien sind mit dieser Aktivität verknüpft:

  • res/layout/activity_start_game.xml: Hiermit wird das Layout des Startbildschirms deklariert.
  • res/menu/start_game.xml: Gibt das Menüsystem für den Startbildschirm an, das die Menüelemente Instructions (Anleitung) und New game (Neues Spiel) enthält.
  • res/values/dimens.xml: Gibt die Standardkartenabmessungen und -abstände an, die von den Aktivitäten dieses Projekts gemäß dem Glass-Stil verwendet werden.
  • src/com/google/android/glass/sample/charades/StartGameActivity.java: Die Hauptklasse für den Startbildschirm.
  • res/drawable-hdpi/ic_game_50.png: Das Menüsymbol für Neues Spiel.
  • res/drawable-hdpi/ic_help_50.png: Das Menüsymbol für die Anleitung.

Spielmodell

Es ist immer eine gute Idee, ein Modellmodell (den Spielstatus) von der Benutzeroberfläche zu trennen. Die Klasse CharadesModel verfolgt die Punktzahl des Spiels und wie viele Wortgruppen im Spielmodus erraten wurden, sowie die verschiedenen Anleitungen und ob die Nutzer sie im Anleitungsmodus durchlaufen haben.

Die folgenden Dateien sind dem Spielmodell zugeordnet:

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

Basisspielaktivität

Da die Anleitungen und Spielmodi des Spiels sehr ähnliche Funktionen und UIs haben, definiert diese Basisklasse die gemeinsamen Funktionen für beide. Die Aktivitäten für die Anleitung und die Spielmodi erweitern diese Klasse.

Die folgenden Dateien sind mit dieser Aktivität verknüpft:

  • res/layout/activity_game_play.xml: Definiert das Layout, das von den Spiel- und Anleitungsmodi von Charades verwendet wird.
  • src/com/google/android/glass/sample/charades/BaseGameActivity.java: Definiert die Grundfunktionen des Gameplay- und der Anleitungsmodi Charades, die gemeinsam genutzt werden.

Aktivität in der Anleitung

In der Anleitungsaktivität werden drei Karten angezeigt, die erklären, wie das Spiel gespielt wird. Er erkennt, ob Nutzer die auf der Karte angezeigte Aktion ausführen, bevor sie fortfahren können.

Die folgenden Dateien sind mit dieser Aktivität verknüpft:

  • src/com/google/android/glass/sample/charades/TutorialActivity.java: erweitert BaseGameActivity und definiert, welcher Anweisungstext angezeigt werden soll und wie Gesten gehandhabt werden sollen, wenn Nutzer die Anleitung für das Spiel durchgehen.

Spielaktivität

Die Spielaktivität definiert den Hauptablauf des Spiels. Es wird ermittelt, welche Wörter angezeigt werden, wie die Punktzahl ermittelt wird, wie ein Touch-Gesten-Gestenberührungstyp verwendet wird, und die Ergebnisaktivität wird gestartet, wenn das Spiel vorbei ist.

Die folgenden Dateien sind mit dieser Aktivität verknüpft:

  • GamePlayActivity: erweitert BaseGameActivity und enthält die Haupt-Gameflow-Logik.

Ergebnisaktivität

Die Ergebnisaktivität zeigt die erratenen, nicht erratenen Wörter und die Punktzahl für das Spiel. Es enthält auch einen Menüpunkt, mit dem Nutzer ein neues Spiel starten können.

Die folgenden Dateien sind mit dieser Aktivität verknüpft:

  • res/layout/game_results.xml: definiert das Layout der Karte „Game over“
  • res/layout/card_results_summary.xml: Definiert das Layout zum Anzeigen der erratenen und nicht erratenen Wörter in einer Liste.
  • res/layout/table_row_result.xml: Definiert ein einzelnes Zeilenlayout für die Ergebniszusammenfassung.
  • src/com/google/android/glass/sample/charades/GameResultsActivity.java: Definiert die tatsächliche Aktivität, die die Layouts und Menüs anzeigt, die durch die oben genannten XML-Ressourcen definiert werden.
  • res/raw/sad_trombone.ogg: Der Ton, der wiedergegeben wird, wenn Nutzer nicht alle Wörter verstehen.
  • res/raw/triumph.ogg: Der Ton, der abgespielt wird, wenn Nutzer alle zehn Wörter durchgehen.
  • res/drawable-hdpi/ic_done_50.png: Das Häkchen neben richtig erratenen Wörtern.

Animationsressourcen

Mit diesen Animationsressourcen kannst du Charades noch mehr Schwung verleihen:

  • res/anim/slide_out_left.xml: Damit wird eine Exit-Ansicht animiert, um nach links zu scrollen (z. B. wenn ein Wort übergeben wird).
  • res/anim/slide_in_right.xml: Damit wird eine Eingabeansicht animiert, sodass sie von rechts nach innen verschoben wird, z. B. wenn ein neues Wort in die Ansicht gelangt.
  • res/anim/tug_right.xml: definiert eine Ziehbewegung, wenn Sie über eine Ansicht wischen, die nicht wischbar ist. So wissen Nutzer, dass die Wischbewegung keine Auswirkung hatte.

Android-Manifest

In der Datei AndroidManifest.xml werden die wichtigsten Komponenten Ihrer Glassware beschrieben, damit das System weiß, wie es ausgeführt wird. Das Manifest für Charades deklariert Folgendes:

  • Symbol und Name der Glassware In Glass werden diese Informationen im Haupt-Touch-Menü angezeigt, wenn mehr als eine Glassware auf denselben Sprachbefehl reagiert.
  • Alle Aktivitäten im Zusammenhang mit Charades. Dies ist erforderlich, damit das System weiß, wie die Glassware-Aktivitäten gestartet werden.
  • Der Sprachbefehl und ein Intent-Filter, der eine bestimmte Aktivität startet, wenn der Sprachbefehl gesprochen wird.
  • Ein Versionscode für die Glassware Dieser Code muss jedes Mal aktualisiert werden (und normalerweise auch der Versionsname), wenn eine neue Version dieses APKs in MyGlass hochgeladen wird.