Pixonic a augmenté l'engagement de 25% sur ChromeOS en optimisant son application pour les grands écrans

Arrière-plan

Pixonic une équipe de développeurs de jeux vidéo basée à Moscou, saisir chaque occasion de mettre à niveau ses applications mobiles et de toucher une audience un public de gamers. L'un des produits les plus populaires de l'entreprise est War Robots, un jeu de type joueur contre joueur (JcJ) opposant 12 combattants dans des duels de robots personnalisables sur un champ de bataille.

Sorti en 2014, War Robots était initialement disponible sur les appareils Android de premières générations dotés des fonctionnalités de déplacement à l'aide du pavé tactile, mais ne proposant pas de commandes par souris. La L'équipe Pixonic, qui est elle-même passionnée de jeux vidéo, a compris que l'application en manquait des modifications pour offrir une expérience utilisateur optimale sur une plus large gamme d'appareils, comme les ordinateurs portables et les tablettes. War Robots était déjà utilisable sur n'importe quel appareil Android car les Chromebooks exécutent une version complète du framework Android à l'intérieur d'un conteneur. En apportant quelques ajustements au codage, Pixonic a pu prendre tout le potentiel de ChromeOS toutes les fonctionnalités disponibles.

Voici comment l'équipe Pixonic a optimisé War Robots pour les navigateurs sur les grands écrans.

Ce qu'ils ont fait

Pour lancer les optimisations, Pixonic a ajouté une balise de métadonnées dans Fichier AndroidManifest.xml indiquant au système qu'il est prêt à être entièrement compatible avec ChromeOS et doit désactiver l'émulation tactile:

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

Pixonic définit également le minSdk de l'application sur 24 afin que le moteur de jeu Unity puisse recevoir directement les clics de souris et tous les événements de l'API liés aux mouvements (pas seulement événements du pavé tactile).

Compatibilité avec le clavier et la souris

Déplacez-vous et visez beaucoup plus facilement dans les jeux JcJ à la troisième personne comme War Robots à l'aide d'un clavier et d'une souris, en particulier sur les appareils à grand écran. Donc, la prochaine a été de réécrire le code pour la prise en charge du clavier et de la souris pour le jeu mode combat, tout en conservant les commandes tactiles.

L'équipe Pixonic a écrit un nouveau code pour offrir les commandes appropriées au bon moment pour vérifier le mode de jeu actuel de l'utilisateur:

@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();
    }
}

Si un clavier QWERTY est détecté, le jeu s'adapte au mode bureau. La le joystick de navigation situé dans le coin inférieur gauche disparaît, et toutes les données disponibles les actions (comme trier les armes, les capacités et les menus) sont étiquetées avec les raccourcis clavier.

War Robots en mode ordinateur portable

Si aucun clavier n'est détecté, le joystick de déplacement apparaît en bas à gauche. et les raccourcis clavier sont masqués sur les boutons de menu en bas à droite.

War Robots est en mode jeu sur tablette/mobile.

Ensuite, Pixonic voulait s'assurer que le curseur reste masqué lorsqu'un joueur utilise sa souris pour faire pivoter la caméra. En ciblant Android 7.0 (niveau d'API 24) ou plus haut, l'équipe peut définir n'importe quelle icône de pointeur. Dans ce cas, l'équipe a utilisé un bitmap transparent pour rendre le curseur invisible pendant le jeu:

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

Le curseur était ainsi désactivé et invisible lorsque toutes les autres fenêtres sont fermés et qu'une bataille est en cours. Si des fenêtres pop-up s'affichent, par exemple le menu Pause, Pixonic a rendu le curseur visible, affichant son icône par défaut.

Adaptation de tutoriels et de mécaniques de jeu

Afin d'améliorer l'expérience utilisateur, Pixonic a également écrit un nouveau code pour afficher différents des tutoriels de jeux vidéo en fonction du mode de l'appareil actuel de l'utilisateur. Si un joueur change entre tablette et ordinateur portable pendant la bataille et qu'ils n'ont pas encore vu tutoriel pour le mode différent, il s'affiche avant la reprise de la partie.

Tutoriels sur les commandes par clavier et souris en mode ordinateur portable.

Tutoriel sur le gameplay en mode tablette avec commandes tactiles.

Lorsque les joueurs sont en mode ordinateur portable, Pixonic désactive également la caméra tactile (puisque les joueurs contrôlent la caméra à l'aide de la souris) alors que tous les boutons de gameplay fonctionnent normalement. Pour différencier les gestes des mouvements de la souris, l'équipe utilise la propriété Input.touchCount (dans les scripts Unity):

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

Compatibilité avec le mode multifenêtre

Pour la dernière étape, Pixonic voulait s'assurer que le jeu ne s'enfermait pas automatiquement mode plein écran une fois lancé. Grâce à la possibilité de jouer en mode fenêtre sous ChromeOS, les utilisateurs peuvent regarder leurs streamers préférés tout en jouant, faire passer leurs robots au niveau supérieur et consulter leurs nouvelles capacités sur le site Web du jeu, ou voir un combat en mode passif tout en regardant une autre vidéo.

Pour ce faire, Pixonic a marqué UnityPlayerActivity comme redimensionnable:

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

N'oubliez pas que l'interface du jeu ne peut être utilisée que dans une certaine plage de dimensions, l'équipe définit les tailles de fenêtre minimales prises en charge:

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

Pixonic a utilisé des balises Meta pour définir le mode plein écran afin d'offrir une expérience de jeu plus immersive. par défaut et l'orientation paysage comme souhaitable.

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

War Robots a été lancé en mode fenêtre.

Ces optimisations ont également permis de s'assurer que le jeu ne se mettait pas en pause et que la bataille Le HUD s'adapte en conséquence à mesure que les joueurs élargissent ou réduisent leur fenêtre de jeu.

Résultats

Grâce à la vaste bibliothèque de ressources en ligne, l'intégralité n'a pris que deux semaines pour l'équipe de développement de Pixonic, composée de cinq membres.

Plus de 100 000 joueurs ont déjà joué à War Robots sur ChromeOS depuis Pixonic a déployé les dernières optimisations. Parce que le gameplay peut maintenant de l'espace supplémentaire sur les écrans plus grands, les combats War Robots sont même plus immersive et attrayante qu'auparavant. En effet, les sessions utilisateur sont 25% plus longues sur les Chromebooks par rapport à d'autres appareils Android. Les premiers retours ont été extrêmement positifs, et certains joueurs ont même remarqué que le jeu optimisé pour Chromebook fonctionne mieux que l'émulateur de BlueStacks.

Forts de leur succès, les développeurs de Pixonic prévoient de mettre à jour le jeu graphismes sur tous les appareils Android pour vous offrir un gameplay encore plus proche de celui d'un PC. expérience.

Découvrez quelques bonnes pratiques pour optimiser vos applications pour ChromeOS.