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 reproduzido em qualquer dispositivo Android, já que os Chromebooks executam uma versão completa do framework do Android em um contêiner. Ao fazer mais alguns ajustes na programação, a Pixonic conseguiu aproveitar todos os recursos do ChromeOS.

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 em AndroidManifest.xml que informa ao sistema que está pronto para suporte total ao 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 janelas no ChromeOS, os usuários podem assistir os streamers favoritos enquanto jogam, fazer upgrade dos robôs enquanto leem sobre novas habilidades no site do jogo ou assistir uma batalha no modo passivo enquanto assistem outro vídeo.

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 o lançamento das otimizações mais recentes pela Pixonic. 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.