Padrão de imersão

Este guia descreve os componentes que compõem uma experiência de imersão simples, na forma de um jogo Charades. Os jogos são um caso de uso perfeito para imersões, porque a maioria exige uma IU personalizada e controles de entrada.

Você também vai aprender dicas de design, desenvolvimento e distribuição que são importantes para criar seu próprio Glassware.

Antes de começar

A fonte completa do jogo Charades está disponível no GitHub. Importe-a para o Android Studio antes de começar, porque este guia faz referência a ela.

  1. Na tela de início rápido, clique em Check out from version Control > Git.
  2. Copie o URL clone de Charades.
  3. Cole o URL do clone no URL do repositório do Vcs e clique em Clone.
  4. Clique em Yes na tela seguinte.
  5. Clique em OK na tela seguinte.
  6. Crie e execute o projeto no seu Google Glass conectado clicando no botão Play. Verifique o README da amostra para ver os detalhes da invocação.

O que você vai aprender

Você vai aprender a usar componentes do SDK do Android para criar a maior parte da imersão de Chardes e o GDK para vincular à experiência do Google Glass. Veja uma lista de tópicos que você vai aprender:

  • Projetar o fluxo da IU com os recursos de design que fornecemos
  • Como projetar gatilhos de voz para iniciar o Glassware
  • Como usar as atividades do Android para definir a estrutura da IU do jogo
  • Criar itens de menu do Android que permitam que os usuários selecionem opções do jogo
  • Integração à experiência do Google Glass com um gatilho de voz no menu principal
  • Uso de detectores de gesto GDK que detectam a entrada do usuário e realizam ações personalizadas
  • Aprenda implementações simples da IU do Android que adicionam mais ajustes e seguem o estilo do Google Glass
  • Aprender sobre o processo de distribuição e o que procuramos ao liberar o Glassware

Design

Antes de começar a desenvolver, dedique um tempo e crie seu Glassware. Isso dá uma boa ideia de quais fluxos de IU funcionam melhor no Glass, qual comando de voz você vai usar e qual vai ser a aparência dos seus cards.

Obviamente, projetar o Glassware é um processo iterativo, e algumas coisas que você vai criar agora mudarão, mas ter uma boa parte desse trabalho no início é essencial para criar uma ótima experiência.

Fluxo da IU

Projetar o fluxo da IU é um exercício simples e permite que você visualize seu Glassware antes de escrever uma linha de código. Fazemos isso o tempo todo para o Glassware que criamos!

Vamos analisar os principais elementos da IU da imersão do Charades, para ter uma ideia de como a IU funciona e como esse processo pode ser útil ao criar seu próprio Glassware.

Tela de apresentação

Essa tela é a primeira que os usuários veem ao iniciar a imersão do Charades. Ele permite que os usuários se orientem antes de entrar na experiência de jogo e é uma construção de jogos com que os usuários já estão familiarizados.

Quando os usuários tocam no touchpad, aparece um sistema de menu com dois itens, Novo jogo e Instruções.

Modo de instruções

Ao criar imersões, os mecanismos de entrada às vezes são novos. Portanto, é útil informar aos usuários como eles devem interagir com a imersão, especialmente com um jogo.

Esse conjunto de cards mostra as instruções do jogo e orienta os usuários sobre como jogar e quais gestos usar para navegar pela IU. Para acessá-la, toque no item de menu Instruções na tela de apresentação.

Modo jogo

Essas telas são o principal fluxo de jogabilidade. Os usuários podem acessar esse fluxo tocando no item de menu Novo jogo na tela de apresentação.

Este conjunto de cards mostra uma palavra aleatória (até 10). Os usuários pulam uma palavra deslizando para frente e tocando no touchpad quando a descrevem corretamente.

Tela de resultados do jogo

Essa tela mostra os resultados do jogo. Inicialmente, a tela "Game over" aparece e os usuários podem deslizar para frente para ver os resultados do jogo. Quando os usuários tocam em um card de resultados, o item de menu New Game é exibido para que os usuários comecem outro jogo.

Comando de voz

Você precisa descobrir um comando de voz no início do processo de design. Os comandos de voz permitem que os usuários iniciem o Glassware no menu de voz do Google Home (cartão de relógio), se necessário, e são uma parte importante de como você cria o Glassware.

Por exemplo, o comando Post a update funciona bem em um modelo de disparar e esquecer, em que os usuários falam o comando e parte do texto, e o Glassware o processa sem nenhuma outra intervenção. Isso permite que os usuários retomem a ação rapidamente.

Por outro lado, para algo como Jogar, geralmente é preciso colocar os usuários em uma tela de apresentação para que eles possam ter uma orientação inicial. Como esse comando de voz provavelmente inicia uma imersão, é esperado que os usuários não se importem em ver telas e menus extras para iniciar o jogo. Jogar imediatamente os usuários em uma experiência de jogo logo após o comando de voz normalmente é uma experiência ruim para jogos.

O Charades usa o comando de voz Jogar . Depois que os usuários invocam o comando de voz, a tela de apresentação do Charades aparece, pedindo que os usuários cliquem em Toque para ver mais opções (Novo jogo ou Instruções, neste caso).

Layouts de card

Ao criar imersões ou cards ao vivo, use os CardBuilder ou layouts XML sempre que possível.

Muitas vezes, ainda será necessário criar seu próprio layout, siga as diretrizes da IU para ter o Glassware mais bonito.

O cronômetro segue as diretrizes gerais de layout, mas tem layouts de IU personalizados usando componentes padrão do Android, como visualizações e layouts.

Desenvolvimento

Para desenvolver imersões, use as mesmas ferramentas que você usaria no desenvolvimento para Android para criar a maior parte do Glassware e, em seguida, use as APIs no complemento GDK para acessar funcionalidades específicas do Glas, como detectores de gestos e comandos de voz.

Você vai usar componentes comuns do Android para criar Glassware, mas lembre-se de que alguns conceitos são às vezes diferentes. Por exemplo, não equivale a uma imersão em uma atividade no Android. As imersões são experiências projetadas para o Glass criadas com uma ou várias atividades do Android, bem como muitos outros componentes do SDK do GDK e do Android.

O restante das seções "Desenvolver" aborda a estrutura do jogo Charades e os principais componentes do projeto que você importou anteriormente. É útil usar o Android Studio agora para que você possa acompanhá-lo. O próprio código-fonte é comentado. Portanto, esta seção aborda a finalidade geral de cada arquivo e dicas úteis que você pode aplicar ao seu próprio Glassware.

Confira uma breve visão geral dos principais componentes do Charades:

  • Declaração de gatilho de voz para conectar ao menu de voz principal do Google Glass.
  • Atividade de tela de apresentação para permitir que os usuários comecem um jogo ou vejam as instruções. Essa atividade inicia as atividades de instruções ou de jogabilidade.
  • A atividade do tutorial mostra aos usuários como jogar o jogo realizando as principais ações dele.
  • A atividade de jogabilidade permite que o usuário jogue
  • A atividade de resultados mostra a pontuação do jogo e uma lista de palavras adivinhadas e não adivinhadas. Ele também permite que os usuários comecem um novo jogo com um item de menu.

Comando de voz

Crie comandos de voz com um arquivo de recurso XML que especifique o comando que você está usando e, em seguida, especifique o recurso XML no arquivo AndroidManifest.xml.

Os arquivos a seguir estão associados ao comando de voz do Charades:

  • res/xml/voice_trigger_play_a_game .xml: declara o comando de voz a ser usado.
  • AndroidManifest.xml: declara a atividade que será iniciada quando o comando de voz for falado.

Atividade de tela de apresentação

A tela de apresentação é a primeira coisa que os usuários veem ao iniciar Charades e as orienta antes de iniciar o jogo.

Os seguintes arquivos estão associados a esta atividade:

  • res/layout/activity_start_game.xml: declara o layout da tela de apresentação.
  • res/menu/start_game.xml: declara o sistema de menus da tela de apresentação, que contém itens de instruções Instruções e Novo jogo.
  • res/values/dimens.xml: declara as dimensões padrão do card e o padding que as atividades do projeto usam para seguir o estilo do Google Glass.
  • src/com/google/android/glass/sample/charades/StartGameActivity.java: a classe principal da tela de apresentação.
  • res/drawable-hdpi/ic_game_50.png: o ícone de menu de Novo jogo.
  • res/drawable-hdpi/ic_help_50.png: ícone de menu para Instruções.

Modelo do jogo

É sempre recomendável separar o modelo de um jogo (o estado do jogo) da IU. A classe CharadesModel monitora a pontuação do jogo e quantas frases foram adivinhadas no modo de jogo, as várias instruções e se os usuários passaram ou não por elas no modo de instruções.

Os seguintes arquivos estão associados ao modelo de jogo:

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

Atividade de jogo base

Como os modos de tutorial e jogabilidade do jogo compartilham funcionalidades e IUs muito semelhantes, essa classe básica define a funcionalidade comum para ambos. As atividades dos modos de instruções e jogabilidade estendem essa classe.

Os seguintes arquivos estão associados a esta atividade:

  • res/layout/activity_game_play.xml: define o layout que é compartilhado pelos modos de jogo e instruções de Charades.
  • src/com/google/android/glass/sample/charades/BaseGameActivity.java: define a funcionalidade básica dos modos de jogo e instruções de Charades, que são compartilhados.

Atividade das instruções

A atividade de instruções mostra três cards que explicam como jogar o jogo. Ele detecta se os usuários realizam ou não a ação exibida no card antes de continuar.

Os seguintes arquivos estão associados a esta atividade:

  • src/com/google/android/glass/sample/charades/TutorialActivity.java: estende BaseGameActivity e define qual texto de instrução vai ser mostrado e como processar os gestos à medida que os usuários seguirem as instruções do jogo.

Atividade de jogo

A atividade do jogo define o fluxo principal do jogo. Ele descobre quais palavras mostrar, como manter a pontuação, tem um detector de gestos para processar gestos e inicia a atividade de resultados quando o jogo termina.

Os seguintes arquivos estão associados a esta atividade:

  • GamePlayActivity: estende BaseGameActivity e contém a lógica principal do fluxo de jogo.

A atividade de resultados

A atividade resultante mostra as palavras adivinhadas, as palavras não adivinhadas e a pontuação do jogo. Ele também contém um item de menu que permite aos usuários iniciar um novo jogo.

Os seguintes arquivos estão associados a esta atividade:

  • res/layout/game_results.xml: define o layout do card "Game over".
  • res/layout/card_results_summary.xml: define o layout para mostrar as palavras adivinhadas e não adivinhadas em uma lista.
  • res/layout/table_row_result.xml: define um layout de linha individual para o resumo dos resultados.
  • src/com/google/android/glass/sample/charades/GameResultsActivity.java: define a atividade real que mostra os layouts e menus definidos pelos recursos XML mencionados acima.
  • res/raw/sad_trombone.ogg: o som que será reproduzido quando os usuários não lerem todas as palavras.
  • res/raw/triumph.ogg: o som que será reproduzido quando os usuários lerem as 10 palavras.
  • res/drawable-hdpi/ic_done_50.png: o ícone de marca de seleção exibido por palavras adivinhadas corretamente.

Recursos de animação

Estes recursos de animação dão um toque a mais a Charades:

  • res/anim/slide_out_left.xml: anima uma visualização de saída para deslizar para a esquerda, por exemplo, quando uma palavra é transmitida.
  • res/anim/slide_in_right.xml: anima uma visualização de entrada para deslizar da direita (por exemplo, quando uma nova palavra entra na visualização).
  • res/anim/tug_right.xml: define uma animação em movimento se você deslizar em uma visualização que não consome o gesto de deslizar. Isso informa aos usuários que o gesto de deslizar não teve efeito.

Manifesto do Android

O arquivo AndroidManifest.xml descreve os principais componentes do seu Glassware para que o sistema saiba como executá-lo. O manifesto de Charades declara o seguinte:

  • O nome e o ícone do Glassware. O Glass mostra essas informações no menu de toque principal se mais de um Glassware responder ao mesmo comando de voz.
  • Todas as atividades associadas ao Charades. Isso é necessário para que o sistema saiba como iniciar as atividades do Glassware.
  • O comando de voz e um filtro de intent que inicia uma atividade específica quando o comando de voz é falado.
  • Um código de versão para o Glassware. Esse código precisa ser atualizado (e normalmente o nome da versão) sempre que uma nova versão desse APK for enviada para o MyGlass.