Pixonic aumentou o engajamento em 25% no ChromeOS otimizando o app para telas grandes

Contexto

A Pixonic, uma equipe de desenvolvedores de videogames com sede em Moscou, procura aproveitar todas oportunidades de atualizar os apps para dispositivos móveis e alcançar um público-alvo ainda maior. Um dos títulos mais conhecidos da empresa é o War Robots, uma experiência de jogador contra jogador (PvP, na sigla em inglês) de 12 pessoas, em que os jogadores controlam e duelam com robôs personalizados ao vivo em um campo de batalha.

Lançado em 2014, o War Robots foi originalmente projetado para os primeiros dispositivos Android, com movimento baseado no touchpad e sem entrada de mouse. A equipe da Pixonic, composta por gamers ávidos, reconheceu que o app precisava de algumas modificações para oferecer uma ótima experiência do usuário em uma maior variedade de dispositivos, como laptops e tablets. O War robots já podia ser jogado em qualquer dispositivo Android porque os Chromebooks executam uma versão completa do framework do Android em um contêiner. Com mais alguns ajustes na programação, a Pixonic conseguiu os benefícios do ChromeOS recursos completos.

Vamos analisar como a equipe da Pixonic otimizou o War Robots para oferecer experiências ideais em telas maiores.

O que a equipe fez

Para iniciar as otimizações, a Pixonic adicionou uma tag de metadados no AndroidManifest.xml que informa ao sistema que ele está pronto para ser totalmente compatível com o ChromeOS e precisa desativar a emulação de toque:

<uses-feature android:name="android.hardware.type.pc" android:required="false" />

A Pixonic também definiu o minSdk do app como 24, para que o mecanismo de jogo do Unity pudesse receber diretamente cliques do mouse e todos os eventos de API relacionados a movimentos e não somente eventos do touchpad.

Compatibilidade com teclado e mouse

Em jogos de PvP em terceira pessoa, como o War Robots, é muito mais fácil se mover e mirar usando um teclado e um mouse, principalmente em dispositivos com tela maior. Assim, a próxima etapa foi reprogramar o código para oferecer compatibilidade com teclado e mouse no modo de batalha do jogo, mantendo os controles de touchscreen.

Para oferecer os controles certos no momento certo, a equipe da Pixonic programou um novo código para verificar o modo de jogo atual do usuário:

@Override
public void onConfigurationChanged(Configuration newConfig) {
    boolean hasQwertyKeyboard = newConfig.keyboard == Configuration.KEYBOARD_QWERTY && newConfig.hardKeyboardHidden == Configuration.HARDKEYBOARDHIDDEN_NO;
    try {
        UnityPlayer.UnitySendMessage("Receiver", "ConfigChange", new JSONObject().put("keyboard", hasQwertyKeyboard).toString());
    } catch (JSONException e) {
        e.printStackTrace();
    }
}

Se um teclado QWERTY for detectado, o jogo será adaptado para o modo computador. O joystick de movimento no canto inferior esquerdo desaparece e todas as ações disponíveis (como selecionar armas, habilidades e menus) são marcadas com atalhos do teclado.

Se um teclado não for detectado, o joystick de movimento aparecerá no canto inferior esquerdo e os atalhos do teclado ficarão ocultos nos botões de menu do canto inferior direito.

Em seguida, a Pixonic queria garantir que o cursor ficasse oculto quando o jogador usasse o mouse para girar a câmera. Ao destinar o jogo para o Android 7.0 (API de nível 24) ou versões mais recentes, foi possível configurar qualquer ícone de ponteiro. Nesse caso, a equipe usou um bitmap transparente para deixar o cursor invisível durante o jogo:

public boolean setPointerVisibility(boolean visible) {
    View = activity.findViewById(android.R.id.content);
    view.setPointerIcon(PointerIcon.getSystemIcon(activity, visible ? PointerIcon.TYPE_DEFAULT : PointerIcon.TYPE_NULL));
}

Isso garantiu que o cursor fosse desativado e ficasse invisível quando todas as outras janelas fossem fechadas e uma batalha estivesse em andamento. A Pixonic deixou o cursor visível para os casos de exibição de uma janela pop-up, como o menu "Pausar", exibindo o ícone padrão.

Adaptação de tutoriais e mecânica do jogo

Para proporcionar uma melhor experiência do usuário, a Pixonic também programou um novo código para exibir diferentes tutoriais do jogo com base no modo de dispositivo atual do usuário. Caso um jogador alterne entre jogar em um tablet e um laptop durante a batalha e ainda não tenha visto o tutorial para o modo diferente, ele será exibido antes de retomar o jogo.

Quando os jogadores estão no modo laptop, a Pixonic também desativa o controle da câmera por touchscreen, já que ela será controlada com o mouse, e todos os botões do jogo funcionam normalmente. Para diferenciar os toques dos movimentos do mouse, a equipe usa a propriedade Input.touchCount (em scripts do Unity):

if(Input.touchCount > 0) {
    // this is screen touch event
} else {
    // this is mouse (touchpad) event
}

Suporte a várias janelas

Na etapa final, a Pixonic queria garantir que o jogo não travasse no modo tela cheia após iniciado. Ao ativar a jogabilidade em janela no ChromeOS, os usuários possam assistir seus streamingers favoritos simultaneamente enquanto jogam, fazer upgrade seus robôs enquanto lia sobre novas habilidades site desse jogo ou assistir a uma batalha no modo passivo enquanto assistem a um vídeo separado.

Para fazer isso, a Pixonic marcou UnityPlayerActivity como redimensionável:

<activity android:name="com.unity3d.player.UnityPlayerActivity" ....
    android:resizeableActivity="true">

Considerando que a interface do jogo só é executável dentro de um intervalo de dimensões específico, a equipe definiu os tamanhos mínimos de janela compatíveis:

<activity … >
    <layout android:gravity="center" android:minHeight="800dp" android:minWidth="1200dp" />
</activity>

Para proporcionar uma jogabilidade mais imersiva, a Pixonic usou metatags para definir o modo de tela cheia como padrão e a orientação paisagem como desejável.

<application>
    <meta-data android:name="WindowManagerPreference:FreeformWindowSize" android:value="maximize" />
    <meta-data android:name="WindowManagerPreference:FreeformWindowOrientation" android:value="landscape" />
    ….
</application>

Essas otimizações também garantem que o jogo não seja pausado e que a HUD das batalhas seja dimensionada adequadamente, à medida que o jogador expande e diminui as janelas do jogo.

Resultados

Graças a uma extensa biblioteca de recursos on-line, a equipe de cinco desenvolvedores da Pixonic levou somente duas semanas para completar todo esse processo.

Mais de 100 mil jogadores já jogaram o War Robots no ChromeOS desde que a Pixonic lançou as otimizações mais recentes. Como agora o jogo pode aproveitar o espaço extra em telas maiores, as batalhas do War Robots são ainda mais imersivas e envolventes. Na verdade, as sessões dos usuários são 25% mais longas nos Chromebooks comparado a outros dispositivos Android. O feedback inicial tem sido bastante positivo, e alguns jogadores já perceberam que o jogo otimizado para o Chromebook funciona melhor que o emulador do BlueStacks.

Com base nesse sucesso, os desenvolvedores da Pixonic planejam atualizar os gráficos do War Robots em todos os dispositivos Android, a fim de deixar a jogabilidade ainda mais próxima de uma experiência de qualidade para PC.

Confira algumas práticas recomendadas para otimizar seus apps para o ChromeOS.