Motivo ad immersione

Questa guida descrive i componenti di una semplice esperienza di immersione sotto forma di un gioco Charades. I giochi sono un caso d'uso perfetto per le immersioni, perché la maggior parte richiede un'interfaccia utente e controlli di input personalizzati.

Lungo il percorso troverai anche suggerimenti su progettazione, sviluppo e distribuzione importanti per la creazione del tuo Glassware.

Prima di iniziare

La fonte completa del gioco Charades è disponibile su GitHub. Importala in Android Studio prima di iniziare, perché questa guida fa riferimento a questo riferimento in modo significativo.

  1. Nella schermata di avvio rapido, fai clic su Checkout dalla versione di controllo > Git.
  2. Copia l'URL da clone da Charades.
  3. Incolla l'URL da clonare nell'URL repository VCS e fai clic su Clona.
  4. Fai clic su Sì nella schermata successiva.
  5. Fai clic su OK nella schermata successiva.
  6. Crea il progetto ed eseguilo sul tuo Glass collegato facendo clic sul pulsante Riproduci. Assicurati di controllare README nell'esempio per vedere i dettagli della chiamata.

Obiettivi didattici

Imparerai a utilizzare i componenti dell'SDK Android per creare la maggior parte dell'immersione Chades e poi il GDK da collegare all'esperienza Glass. Ecco un elenco di argomenti che imparerai a conoscere:

  • Progettazione del flusso dell'interfaccia utente con le risorse di progettazione fornite
  • Progettazione di trigger vocali per l'avvio di Glassware
  • Utilizzo di attività Android per definire la struttura dell'interfaccia utente del gioco
  • Creazione di voci di menu Android che consentono agli utenti di selezionare le opzioni di gioco
  • Integrazione nell'esperienza Glass con un attivatore vocale nel menu principale
  • Utilizzo di rilevatori di gesti GDK che rilevano l'input utente e compiono azioni personalizzate
  • Scopri semplici implementazioni dell'interfaccia utente Android che aggiungono uno smalto aggiuntivo e seguono lo stile di Glass
  • Conoscere il processo di distribuzione e ciò che cerchiamo quando rilasciano i complementi in vetro

Design

Prima di iniziare lo sviluppo, prenditi un po' di tempo e progetta il tuo Glassware. In questo modo avrai una buona idea di quali flussi di UI funzionano meglio su Glass, quali comandi vocali utilizzerai e come appariranno le tue schede.

Naturalmente, la progettazione di Glassware è un processo iterativo e alcune delle cose che progetti ora cambieranno, ma una buona parte del lavoro svolto all'inizio è fondamentale per costruire un'esperienza fantastica.

Flusso UI

Progettare il flusso dell'interfaccia utente è un esercizio semplice che ti consente di visualizzare il tuo Glassware prima di scrivere una riga di codice. Ci occupiamo sempre degli articoli in vetro che creiamo!

Esaminiamo gli elementi principali dell'interfaccia utente dell'immersione di Charades per farti un'idea di come funziona e di quanto questo processo possa essere utile per la creazione del tuo Glassware.

Schermata iniziale

Questa è la prima schermata visualizzata dagli utenti quando iniziano l'immersione di Charades. Consente agli utenti di orientarsi prima di dover iniziare l'esperienza di gioco ed è una strategia di gioco generale con cui gli utenti hanno dimestichezza.

Quando gli utenti toccano il touchpad, viene visualizzato un sistema di menu con due elementi: Nuovo gioco e Istruzioni.

Modalità Istruzioni

Durante la creazione di coinvolgimenti, a volte i meccanismi di input sono nuovi, quindi è utile comunicare agli utenti come dovrebbero interagire con il componente, in particolare con un gioco.

Questo set di carte mostra le istruzioni per il gioco e indica agli utenti come giocare e quali gesti usare per navigare nell'interfaccia utente. Per accedere agli utenti, tocca la voce di menu Istruzioni nella schermata iniziale.

Modalità di gameplay

Queste schermate comprendono il flusso di gameplay principale. Gli utenti possono accedere a questa procedura toccando la voce di menu Nuovo gioco nella schermata iniziale.

Questo insieme di schede mostra una parola casuale (fino a 10). Gli utenti saltano una parola scorrendo verso l'alto e toccando il touchpad quando la descrivono correttamente.

Schermata dei risultati del gioco

Questa schermata mostra i risultati della partita. Inizialmente viene visualizzata la schermata "Game over" e gli utenti possono scorrere in avanti per visualizzare i risultati del gioco. Quando gli utenti toccano una qualsiasi delle schede dei risultati, viene visualizzata la voce di menu Nuovo gioco per consentire agli utenti di avviare un altro gioco.

Comando vocale

Ti conviene trovare un comando vocale abbastanza presto nel processo di progettazione. I comandi vocali consentono agli utenti di avviare Glassware dal menu vocale della Glass Home (scheda orologio), se necessario, e costituiscono una parte importante della progettazione di Glassware.

Ad esempio, il comando Post a update (Pubblica un aggiornamento) funziona bene in un modello "fire-and-get", in cui gli utenti pronunciano il comando e del testo e il Glassware lo elabora senza alcun intervento aggiuntivo da parte dell'utente. In questo modo gli utenti possono tornare velocemente a ciò che stanno facendo.

D'altra parte, ad esempio per giocare a un gioco, in genere è meglio attirare gli utenti su una schermata iniziale in modo da orientarsi per primi. Dato che molto probabilmente questo comando vocale avvia un'immersione, puoi aspettarti che gli utenti si sentano a loro agio vedere altre schermate e menu per iniziare il gioco. L'invio diretto degli utenti a un'esperienza di gioco subito dopo il comando vocale è in genere un'esperienza negativa per i giochi.

Charades utilizza il comando vocale Gioca a . Dopo che gli utenti hanno richiamato il comando vocale, viene visualizzata la schermata iniziale di Charades che chiede agli utenti di toccare altre opzioni (Nuovo gioco o Istruzioni in questo caso).

Layout delle schede

Che tu stia creando immersioni o schede pubblicate, se possibile devi utilizzare i layout CardBuilder o XML.

Spesso, è comunque necessario creare un layout personalizzato, quindi segui le nostre linee guida per l'interfaccia utente per ottenere il miglior aspetto di Glass.

Il cronometro segue le linee guida generali per il layout, ma dispone di layout dell'interfaccia utente personalizzati che utilizzano componenti Android standard come visualizzazioni e layout.

Sviluppa

Per sviluppare le immersioni, usa gli stessi strumenti che utilizzeresti per lo sviluppo di Android per creare la maggior parte dei Glassware, quindi usa le API nel componente aggiuntivo di GDK per accedere alla funzionalità specifica di Glass, come i rilevatori dei gesti e i comandi vocali.

Utilizzi spesso componenti Android comuni per creare Glassware, ma ricorda che a volte alcuni concetti sono diversi. Ad esempio, non equiparare un'immersione a un'attività Android. Le immersive sono esperienze pensate per Glass progettate con una o più attività Android, nonché con molti altri componenti di GDK e SDK Android.

Il resto delle sezioni Sviluppo riguarda la struttura del gioco Charades e i componenti principali del progetto che hai importato in precedenza. È utile avere Android Studio attivo ora per poterli seguire. Il codice sorgente stesso viene commentato, quindi questa sezione riguarda lo scopo generale di ogni file e suggerimenti utili che puoi applicare ai tuoi Glassware.

Ecco una breve panoramica dei principali componenti di Charades:

  • Dichiarazione dell'attivazione vocale per agganciarsi al menu della voce principale di Glass.
  • Schermata iniziale per consentire agli utenti di avviare un gioco o di visualizzare le istruzioni. Questa attività lancia l'attività di istruzioni o l'attività di gameplay
  • L'attività del tutorial mostra agli utenti come si gioca usufruendo delle azioni principali del gioco
  • L'attività di gameplay consente agli utenti di giocare
  • L'attività dei risultati mostra il punteggio della partita e un elenco di parole congettate e non stimate. Consente inoltre agli utenti di iniziare un nuovo gioco con una voce di menu.

Comando vocale

Puoi creare comandi vocali con un file di risorse XML che specifica il comando che stai utilizzando e quindi specificando la risorsa XML nel file AndroidManifest.xml.

I seguenti file sono associati al comando vocale Charades:

  • res/xml/voice_trigger_play_a_game .xml: dichiara il comando vocale da utilizzare.
  • AndroidManifest.xml: dichiara l'attività da avviare quando viene pronunciato il comando vocale.

Attività schermata iniziale

La schermata iniziale è la prima cosa che gli utenti vedono quando iniziano Charades e lo orientano prima di iniziare il gioco.

I seguenti file sono associati a questa attività:

  • res/layout/activity_start_game.xml: dichiara il layout della schermata iniziale.
  • res/menu/start_game.xml: dichiara il sistema di menu della schermata iniziale, che contiene le voci del menu Istruzioni e Nuovo gioco.
  • res/values/dimens.xml: dichiara le dimensioni e la spaziatura interna standard della scheda che le attività di questo progetto utilizzano per seguire lo stile Glass.
  • src/com/google/android/glass/sample/charades/StartGameActivity.java: la classe principale per la schermata iniziale.
  • res/drawable-hdpi/ic_game_50.png: l'icona del menu Nuovo gioco.
  • res/drawable-hdpi/ic_help_50.png: l'icona del menu per Istruzioni.

Modello di gioco

È sempre opportuno separare il modello di un gioco (lo stato del gioco) dall'interfaccia utente. Il corso CharadesModel tiene traccia del punteggio del gioco e del numero di frasi che sono state indovinate nella modalità di gameplay, nonché delle varie istruzioni e degli utenti che le hanno eseguite in modalità di istruzioni.

I seguenti file sono associati al modello di gioco:

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

Attività di base sul gioco

Poiché le modalità di tutorial e gameplay del gioco condividono funzionalità e UI molto simili, questa classe base definisce la funzionalità comune per entrambi. Le attività relative alle istruzioni e alle modalità di gameplay estendono questo corso.

I seguenti file sono associati a questa attività:

  • res/layout/activity_game_play.xml: definisce il layout condiviso dalle modalità di gameplay e di istruzione di Charades.
  • src/com/google/android/glass/sample/charades/BaseGameActivity.java: definisce la funzionalità di base del gameplay e le modalità di istruzioni di Charades, che è condivisa.

Attività delle istruzioni

L'attività delle istruzioni mostra tre schede che spiegano come utilizzare il gioco. e rileva se gli utenti eseguono o meno l'azione visualizzata sulla scheda prima di continuare.

I seguenti file sono associati a questa attività:

  • src/com/google/android/glass/sample/charades/TutorialActivity.java: estende BaseGameActivity e definisce quale testo di istruzioni mostrare e come gestire i gesti nel momento in cui gli utenti utilizzano le istruzioni per il gioco.

Attività di gameplay

L'attività di gameplay definisce il flusso principale del gioco. Cerca di capire quali parole mostrare, come mantenere il punteggio, usare un rilevatore di gesti per gestire i gesti e avviare i risultati dei risultati al termine del gioco.

I seguenti file sono associati a questa attività:

  • GamePlayActivity: estende BaseGameActivity e contiene la logica principale del flusso di gioco.

L'attività dei risultati

L'attività dei risultati mostra le parole congetture, le parole ipotetiche e il punteggio del gioco. Contiene anche una voce di menu che consente agli utenti di iniziare un nuovo gioco.

I seguenti file sono associati a questa attività:

  • res/layout/game_results.xml: definisce il layout della scheda "Game over"
  • res/layout/card_results_summary.xml: definisce il layout per mostrare le parole congettate e non stimate in un elenco.
  • res/layout/table_row_result.xml: definisce il layout di una singola riga per il riepilogo dei risultati.
  • src/com/google/android/glass/sample/charades/GameResultsActivity.java: definisce l'attività effettiva che mostra i layout e i menu definiti dalle risorse XML indicate sopra.
  • res/raw/sad_trombone.ogg: il suono da riprodurre quando gli utenti non sanno con tutte le parole.
  • res/raw/triumph.ogg: il suono da riprodurre quando gli utenti leggono tutte le 10 parole.
  • res/drawable-hdpi/ic_done_50.png: il segno di spunta visualizzato da parole che vengono indovinate correttamente.

Risorse di animazione

Queste risorse di animazione aggiungono uno smalto aggiuntivo a Charades:

  • res/anim/slide_out_left.xml: anima una visualizzazione in uscita per scorrere verso sinistra (ad esempio, quando si passa una parola).
  • res/anim/slide_in_right.xml: anima la visualizzazione di un utente che entra nella diapositiva da destra (ad esempio, quando si apre una nuova parola).
  • res/anim/tug_right.xml: definisce un'animazione di scorrimento se scorri su una visualizzazione che non consente lo scorrimento. In questo modo gli utenti possono sapere che lo scorrimento non ha avuto alcun effetto.

Manifest per Android

Il file AndroidManifest.xml descrive i componenti principali del tuo Glassware in modo che il sistema sappia come eseguirlo. Nel file manifest di Charades vengono dichiarate le seguenti informazioni:

  • Icona e nome di Glassware. Glass mostra queste informazioni nel menu touch principale se più strumenti Glassware rispondono allo stesso comando vocale.
  • Tutte le attività associate a Charades. Questo passaggio è necessario affinché il sistema sappia come avviare le attività del tuo Glassware.
  • Il comando vocale e un filtro per intent che avvia un'attività specifica quando viene pronunciato.
  • Un codice versione per il Glassware. Questo codice deve essere aggiornato (in genere anche il nome della versione) ogni volta che viene caricata una nuova versione di questo APK in MyGlass.