Patrón de inmersión

En esta guía, se describen los componentes que conforman una experiencia de inmersión simple en forma de juego de Charades. Los juegos son un caso de uso perfecto para la inmersión, ya que la mayoría requiere una IU personalizada y controles de entrada.

Durante el proceso, también aprenderás sugerencias de diseño, desarrollo y distribución que son importantes para la compilación de tu propia Glassware.

Antes de comenzar

La fuente completa del juego Charades está disponible en GitHub. Impórtalo a Android Studio antes de comenzar, ya que esta guía hace referencia a él en gran medida.

  1. En la pantalla de inicio rápido, haz clic en Revisar desde el control de versiones > Git.
  2. Copia la URL de clonación de Charas.
  3. Pega la URL de clonación en la URL del repositorio de Vcs y haz clic en Clone (Clonar).
  4. Haz clic en Sí en la siguiente pantalla.
  5. Haz clic en Aceptar en la siguiente pantalla.
  6. Para compilar el proyecto y ejecutarlo en tu Glass conectado, haz clic en el botón Play (Reproducir). Asegúrate de verificar el README de la muestra para obtener los detalles de invocación.

Qué aprenderás

Aprenderás a usar componentes del SDK de Android para compilar la mayor parte de la inmersión en las Charades y, luego, GDK a fin de conectarla a la experiencia de Glass. A continuación, le presentamos una lista de los temas sobre los que aprenderá:

  • Cómo diseñar el flujo de la IU con los recursos de diseño que proporcionamos
  • Diseño de activadores de voz para iniciar Glassware
  • Cómo usar las actividades de Android para definir la estructura de la IU del juego
  • Cómo crear elementos de menú de Android que permiten a los usuarios seleccionar opciones de juego
  • Integración en la experiencia de Glass con un activador de voz en el menú principal
  • Uso de detectores de gestos de GDK que detectan entradas del usuario y llevan a cabo acciones personalizadas
  • Aprender implementaciones sencillas de la IU de Android que mejoran el estilo y siguen el estilo de Glass
  • Aprender sobre el proceso de distribución y lo que buscamos cuando lanzamos Glassware

Diseño

Antes de empezar a programar, tómate un tiempo y diseña tu Glassware. De esta manera, podrás saber qué flujos de la IU funcionan mejor en Glass, qué comando por voz usarás y cómo se verán tus tarjetas.

Por supuesto, diseñar Glassware es un proceso iterativo y algunas de las cosas que diseñes ahora cambiarán, pero tener una buena parte de este trabajo al principio es fundamental para crear una experiencia excelente.

Flujo de IU

Diseñar el flujo de la IU es un ejercicio simple y te permite visualizar tu Glassware antes de escribir una línea de código. Lo hacemos todo el tiempo para los vasos que creamos.

Veamos los principales elementos de la IU de la inmersión en Charades para que tengas una idea de cómo funciona la IU y lo útil que puede ser este proceso cuando creas tu propia Glassware.

Pantalla de presentación

Esta pantalla es la primera que ven los usuarios cuando comienzan la inmersión en las Charades. Permite a los usuarios orientarse antes de tener que saltar a la experiencia de juego y es una construcción general de videojuegos que los usuarios conocen.

Cuando los usuarios presionan el panel táctil, aparece un sistema de menú con dos elementos: New Game y Instructions.

Modo de instrucciones

Cuando se crean inmersiones, los mecanismos de entrada a veces son novedosos, por lo que es útil informar a los usuarios cómo deben interactuar con la inmersión, especialmente con un juego.

Este conjunto de cartas muestra las instrucciones para el juego y guía a los usuarios sobre cómo jugar y qué gestos utilizar para navegar por la IU. Para acceder a ella, los usuarios deben presionar el elemento de menú Instrucciones en la pantalla de presentación.

Modo de juego

Estas pantallas conforman el flujo principal del juego. Para llegar a este flujo, los usuarios pueden presionar el elemento de menú Nuevo juego en la pantalla de presentación.

Este conjunto de tarjetas muestra una palabra aleatoria (hasta 10). Los usuarios pueden omitir una palabra deslizando el dedo hacia adelante y presionando el panel táctil cuando describen la palabra correctamente.

Pantalla de resultados de juego

Esta pantalla muestra los resultados del partido. Inicialmente, aparece la pantalla "Game over" y el usuario puede deslizar el dedo hacia adelante para ver los resultados. Cuando los usuarios presionan cualquiera de las tarjetas de resultados, aparece el elemento de menú Nuevo juego para que los usuarios puedan iniciar otro juego.

Comando por voz

Debes comprender un comando por voz apenas comienza el proceso de diseño. Los comandos por voz permiten a los usuarios iniciar Glassware desde el menú de voz de la pantalla principal (tarjeta de reloj) si es necesario, y son una parte importante del diseño de Glassware.

Por ejemplo, el comando Publicar una actualización funciona bien en un modelo que activa y olvida, en el que los usuarios hablan el comando y parte del texto, y Glassware lo procesa sin ninguna intervención del usuario. Esto permite que los usuarios regresen a lo que están haciendo con rapidez.

Por otro lado, para algo como Jugar un juego, normalmente querrás dirigir a los usuarios a una pantalla de presentación para que puedan orientarse primero. Debido a que lo más probable es que este comando por voz inicie una inmersión, puedes esperar que los usuarios estén de acuerdo con ver pantallas y menús adicionales para iniciar el juego. Colocarlos de inmediato en una experiencia de juego justo después de que el comando por voz suele ser una mala experiencia para juegos.

Charades usa el comando por voz Jugar un juego . Después de que los usuarios invoquen el comando por voz, aparecerá la pantalla de presentación de Charades, que les solicitará a los usuarios que Presionen para ver más opciones (en este caso, New game o Instructions).

Diseños de tarjetas

Ya sea que compiles inmersiones o tarjetas en vivo, debes usar CardBuilder o diseños XML siempre que sea posible.

A menudo, deberás compilar tu propio diseño, por lo que debes seguir nuestros lineamientos de IU para tener la apariencia de Glassware más atractiva.

El cronómetro sigue los lineamientos de diseño generales, pero tiene diseños personalizados de la IU con componentes estándar de Android, como vistas y diseños.

Desarrollo

A fin de desarrollar inmersiones, usa las mismas herramientas que usarías para el desarrollo de Android a fin de compilar la mayoría de los componentes de Glassware y, luego, usa las API del complemento de GDK a fin de acceder a funciones específicas de Glass, como los detectores de gestos y los comandos por voz.

Con frecuencia, usarás componentes comunes de Android para crear Glassware, pero ten en cuenta que algunos conceptos a veces son diferentes. Por ejemplo, no incluyas una inmersión en una actividad de Android. Las inmersiones son experiencias diseñadas para Glass que se compilan con una o varias actividades de Android, así como muchos otros componentes del SDK de GDK y Android.

En el resto de las secciones de Desarrollo, se explica cómo se estructura el juego Charades y los componentes principales del proyecto que importaste antes. Es útil contar con Android Studio ahora mismo para que puedas seguir el camino. Se comenta el código fuente, por lo que esta sección revisa el propósito de alto nivel de cada archivo y sugerencias útiles que puedes aplicar a tu propia Glassware.

A continuación, se incluye una breve descripción general de los principales componentes de los Charades:

  • Declaración del activador de voz para conectarse al menú de voz principal de Glass.
  • Actividad de la pantalla de presentación que permite a los usuarios iniciar un juego o ver instrucciones. Esta actividad inicia la actividad de instrucciones o la actividad de juego.
  • La actividad del instructivo muestra a los usuarios cómo jugar mediante la realización de las acciones principales del juego.
  • La actividad del juego permite a los usuarios jugar el juego real.
  • La actividad de resultados muestra la puntuación del juego y una lista de palabras adivinadas y que no se pueden adivinar. También permite a los usuarios iniciar un nuevo juego con un elemento de menú.

Comando por voz

Creas comandos por voz con un archivo de recursos XML que especifique el comando que usas y, luego, especifica el recurso XML en el archivo AndroidManifest.xml.

Los siguientes archivos están asociados con el comando por voz Charades:

  • res/xml/voice_trigger_play_a_game .xml: declara el comando por voz que se usará.
  • AndroidManifest.xml: Declara la actividad que se debe iniciar cuando se pronuncia el comando por voz.

Actividad de la pantalla de presentación

La pantalla de presentación es lo primero que ven los usuarios cuando inician Charades y los orienta antes de iniciar el juego.

Los siguientes archivos están asociados con esta actividad:

  • res/layout/activity_start_game.xml: Declara el diseño de la pantalla de presentación.
  • res/menu/start_game.xml: Declara el sistema de menú para la pantalla de presentación, que contiene los elementos de menú Instrucciones y Juego nuevo.
  • res/values/dimens.xml: declara las dimensiones y el relleno estándar de la tarjeta que usan las actividades de este proyecto para seguir el estilo de Glass.
  • src/com/google/android/glass/sample/charades/StartGameActivity.java: Es la clase principal para la pantalla de presentación.
  • res/drawable-hdpi/ic_game_50.png: es el ícono de menú de Juego nuevo.
  • res/drawable-hdpi/ic_help_50.png: Es el ícono de menú de Instrucciones.

Modelo del juego

Siempre es una buena idea separar el modelo de un juego (el estado del juego) de la IU. La clase CharadesModel hace un seguimiento de la puntuación del juego y de cuántas frases se adivinaron en el modo de juego y las diversas instrucciones, y si los usuarios las revisaron o no en el modo de instrucciones.

Los siguientes archivos están asociados con el modelo de juego:

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

Actividad de juegos básica

Debido a que el instructivo y los modos de juego comparten la funcionalidad y las IU muy similares, esta clase base define la funcionalidad común para ambos. Las actividades para las instrucciones y los modos de juego extienden esta clase.

Los siguientes archivos están asociados con esta actividad:

  • res/layout/activity_game_play.xml: Define el diseño que comparten los modos de instrucciones y juego de Charades.
  • src/com/google/android/glass/sample/charades/BaseGameActivity.java: Define la funcionalidad base del modo de juego y los modos de instrucciones de Charades, que se comparte.

Actividad con instrucciones

La actividad de instrucciones muestra tres tarjetas que explican cómo jugar. Detecta si los usuarios realizan o no la acción que se muestra en la tarjeta antes de continuar.

Los siguientes archivos están asociados con esta actividad:

  • src/com/google/android/glass/sample/charades/TutorialActivity.java: Extiende BaseGameActivity y define qué texto de instrucciones mostrar y cómo controlar los gestos a medida que los usuarios siguen las instrucciones del juego.

Actividad de juego

La actividad del juego define el flujo principal del juego. Determina qué palabras mostrar, cómo mantener la puntuación, tiene un detector de gestos para controlar los gestos e inicia la actividad de resultados cuando el juego termina.

Los siguientes archivos están asociados con esta actividad:

  • GamePlayActivity: Extiende BaseGameActivity y contiene la lógica principal del flujo de juego.

La actividad de resultados

En la actividad del resultado, se muestran las palabras adivinadas, las que no se adivinaron y la puntuación del juego. También contiene un elemento de menú que permite a los usuarios iniciar un juego nuevo.

Los siguientes archivos están asociados con esta actividad:

  • res/layout/game_results.xml: Define el diseño de la tarjeta "Game over".
  • res/layout/card_results_summary.xml: Define el diseño para mostrar las palabras adivinadas y no adivinadas en una lista.
  • res/layout/table_row_result.xml: Define un diseño de fila individual para el resumen de resultados.
  • src/com/google/android/glass/sample/charades/GameResultsActivity.java: Define la actividad real que muestra los diseños y menús definidos por los recursos XML antes mencionados.
  • res/raw/sad_trombone.ogg: Es el sonido que se reproduce cuando los usuarios no escuchan todas las palabras.
  • res/raw/triumph.ogg: Es el sonido que se reproduce cuando los usuarios atraviesan las 10 palabras.
  • res/drawable-hdpi/ic_done_50.png: es el ícono de marca de verificación que aparece junto a las palabras que se adivinan correctamente.

Recursos de animación

Estos recursos de animación agregan más brillo a las charadas:

  • res/anim/slide_out_left.xml: esto anima una vista saliente para deslizarse hacia la izquierda (por ejemplo, cuando se pasa una palabra).
  • res/anim/slide_in_right.xml: esto anima una vista que ingresa para deslizarse desde la derecha (por ejemplo, cuando una palabra nueva entra en vista).
  • res/anim/tug_right.xml: Define una animación de ajuste si deslizas el dedo sobre una vista que no consume el deslizamiento. Esto permite que los usuarios sepan que el deslizamiento no tuvo efecto.

Manifiesto de Android

El archivo AndroidManifest.xml describe los componentes principales de tu Glassware para que el sistema sepa cómo ejecutarlo. El manifiesto de Charades declara lo siguiente:

  • El ícono y el nombre de Glassware Glass muestra esta información en el menú táctil principal si más de un Glassware responde al mismo comando de voz.
  • Todas las actividades asociadas con las charadas. Esto es necesario para que el sistema sepa cómo iniciar las actividades de tu Glassware.
  • El comando por voz y un filtro de intents que inicia una actividad específica cuando se pronuncia el comando por voz.
  • Un código de versión para Glassware. Este código se debe actualizar (y, por lo general, también el nombre de la versión) cada vez que se sube una versión nueva de este APK a MyGlass.