Roll It est un test Chrome qui revisite un jeu de plage classique en utilisant uniquement le navigateur sur votre téléphone et votre ordinateur. Le navigateur de votre téléphone vous permet de viser et de lancer la bille d'un geste de poignet, tandis que le navigateur de votre ordinateur affiche les graphismes en temps réel de la piste de Roll It avec WebGL et Canvas. Les deux appareils communiquent via des Websockets. Aucune application Aucun téléchargement Aucun jeton. Tout ce dont vous avez besoin, c'est d'un navigateur moderne.
Sous la direction de Google Creative Lab, Legwork a développé l'expérience utilisateur, les interfaces et l'environnement de jeu, puis s'est associé à son partenaire de développement, Mode Set, pour créer Roll It. Au cours du projet, nous avons rencontré un certain nombre de défis uniques. Cet article présente certaines des techniques que nous avons utilisées, les astuces que nous avons découvertes et les leçons que nous avons tirées de la création de Roll It.
Workflow 3D
L'un des défis rencontrés au début était de trouver le meilleur moyen de convertir les modèles 3D de notre logiciel en format de fichier compatible avec le Web. Après avoir créé les éléments dans Cinema 4D, les modèles ont été simplifiés et convertis en maillages à faible nombre de polygones. Chaque maillage a reçu certaines balises de sélection de polygones pour différencier les parties de l'objet afin de les colorer et de les texturer. Nous avons ensuite pu exporter le fichier au format Collada 1.5 (.dae) et l'importer dans Blender, un programme 3D Open Source, afin de créer des fichiers compatibles avec three.js. Une fois que nous nous sommes assurés que nos modèles ont été correctement importés, nous avons exporté le maillage au format JSON et l'éclairage a été appliqué à l'aide de code. Voici un aperçu plus détaillé des étapes que nous avons suivies:
Écrire le code
Roll It a été développé avec des bibliothèques Open Source et s'exécute nativement dans les navigateurs modernes. Grâce à des technologies telles que WebGL et WebSockets, le Web se rapproche de plus en plus des expériences multimédias et de jeu de qualité console. La facilité et le confort avec lesquels les développeurs peuvent créer ces expériences ont fait un bond en avant avec l'arrivée d'outils plus modernes pour le développement HTML.
Environnement de développement
La majeure partie du code d'origine de Roll It a été écrite en CoffeeScript, un langage clair et concis qui se transcompile en code JavaScript bien formé et linté. CoffeeScript est idéal pour le développement orienté objet grâce à son excellent modèle d'héritage et à une gestion plus claire de la portée. Le CSS a été écrit avec le framework SASS, qui fournit au développeur un certain nombre d'excellents outils pour améliorer et gérer les feuilles de style d'un projet. L'ajout de ces systèmes au processus de compilation prend un peu de temps à configurer, mais le résultat en vaut vraiment la peine, en particulier pour un projet plus important comme Roll It. Nous avons configuré un serveur Ruby on Rails pour compiler automatiquement nos composants pendant le développement. Toutes ces étapes de compilation sont donc devenues transparentes.
En plus de créer un environnement de codage simplifié et confortable, nous avons optimisé manuellement les composants afin de réduire les requêtes et de charger le site plus rapidement. Nous avons soumis chaque image à deux programmes de compression : ImageOptim et ImageAlpha. Chaque programme optimise les images à sa manière, sans perte et avec perte, respectivement. Avec la bonne combinaison de paramètres, ils peuvent réduire considérablement la taille de fichier d'une image. Cela permet non seulement d'économiser de la bande passante lors du chargement d'images externes, mais une fois optimisées, vos images se traduiront par des chaînes encodées en base64 beaucoup plus petites pour l'intégration en ligne dans HTML, CSS et JavaScript. En parlant de l'encodage base64, nous avons également intégré nos fichiers de polices WOFF et SVG Open Sans directement dans le CSS à l'aide de cette technique, ce qui a permis de réduire encore le nombre total de requêtes.
Scène 3D avec simulation physique
THREE.js est la bibliothèque JavaScript 3D omniprésente pour le Web. Il regroupe les mathématiques 3D de bas niveau et les optimisations WebGL basées sur le matériel qui permettent aux simples mortels de créer facilement des scènes 3D interactives et attrayantes bien éclairées, sans avoir à écrire de nuanceurs personnalisés ni à effectuer de transformations matricielles manuelles. Physijs est un wrapper spécifique à THREE.js pour une bibliothèque de physique C++ populaire qui a été traduite en JavaScript. Nous avons utilisé cette bibliothèque pour simuler le roulement, le saut et le rebond de la balle vers sa destination en 3D.
Dès le départ, nous avons voulu non seulement rendre l'expérience physique de faire rouler la balle réaliste, mais aussi nous assurer que les objets du jeu semblaient réels. Pour ce faire, nous avons dû ajuster la gravité globale de la scène Physijs, la vitesse de la balle lorsqu'elle roule après le lancer du joueur, l'inclinaison du saut de la piste, ainsi que les propriétés de friction et de restitution (élasticité) des matériaux de la balle et de la piste. La combinaison de plus de gravité et de plus de vitesse a permis d'obtenir une expérience de jeu plus réaliste.
Lissage
La plupart des combinaisons de navigateur et de carte vidéo modernes devraient tirer parti de l'anticrénelage natif basé sur le matériel dans l'environnement WebGL, mais certaines ne sont pas compatibles. Si l'anticrénelage ne fonctionne pas en mode natif, les bords nets et contrastés de la scène THREE.js seront déformés et laids (à nos yeux, du moins).
Heureusement, il existe une solution: grâce à un extrait de code, nous pouvons détecter si la plate-forme est compatible nativement avec l'anticrénelage. Si c'est le cas, nous pouvons continuer. Sinon, une série de nuanceurs de post-traitement fournis avec THREE.js peut nous aider. Il s'agit du filtre anticrénelage FXAA. En redessinant la scène affichée à chaque frame avec ce nuanceur, nous obtenons généralement un rendu beaucoup plus fluide de nos lignes et de nos bords. Regardez la démonstration ci-dessous:
// Check for native platform antialias support via the THREE renderer
// from: http://codeflow.org/entries/2013/feb/22/how-to-write-portable-webgl/#antialiasing
var nativeAntialiasSupport = (renderer.context.getParameter(renderer.context.SAMPLES) == 0) ? false : true;
Commandes de jeu basées sur l'accéléromètre
La magie de Roll It repose en grande partie sur le geste de faire rouler la balle que le joueur effectue avec un téléphone. Les appareils mobiles ont accès à l'accéléromètre dans le navigateur depuis un certain temps, mais notre secteur ne fait que commencer à explorer la reconnaissance des gestes basée sur les mouvements sur le Web. Nous sommes quelque peu limités par les données fournies par l'accéléromètre du téléphone, mais avec un peu de créativité, nous pouvons créer de nouvelles expériences exceptionnelles.
La détection du geste principal de "défilement " de Roll It commence par le suivi des 10 dernières mises à jour de l'accéléromètre provenant de l'événement deviceorientation de la fenêtre. En soustrayant la valeur d'inclinaison précédente de la valeur d'inclinaison actuelle, nous stockons la différence angulaire entre les événements. Ensuite, en additionnant constamment les dix derniers deltas d'angle, nous pouvons détecter la rotation continue lorsque le téléphone se déplace dans l'espace. Lorsque le téléphone dépasse un seuil de changement d'angle de balayage, nous déclenchons un roulis. Ensuite, en déterminant le plus grand delta d'inclinaison unique de ce balayage, nous pouvons estimer la vitesse de la balle. Dans Roll It, cette vitesse est normalisée à l'aide d'horodatages que nous associons à chaque mise à jour de l'accéléromètre. Cela permet d'atténuer la vitesse variable à laquelle les mises à jour de l'accéléromètre sont transmises au navigateur sur différents appareils.
Communication WebSockets
Une fois que le joueur fait rouler la balle avec son téléphone, un message est envoyé du téléphone à l'ordinateur portable pour lui demander de lancer la balle. Ce message "roll" est envoyé via un objet de données JSON via une connexion WebSocket entre les deux machines. Les données JSON sont de petite taille et consistent principalement en un type de message, une vitesse de lancer et une direction de visée.
{
"type": "device:ball-thrown",
"speed": 0.5,
"aim": 0.1
}
Toutes les communications entre l'ordinateur portable et le téléphone s'effectuent via de petits messages JSON comme celui-ci. Chaque fois que le jeu met à jour son état sur l'ordinateur, ou que l'utilisateur incline ou appuie sur un bouton sur le téléphone, un message WebSocket est transmis entre les machines. Pour que cette communication reste simple et facile à gérer, les messages WebSockets sont diffusés à l'aide d'un seul point de sortie à partir de l'un ou l'autre navigateur. À l'inverse, il n'existe qu'un seul point d'entrée dans le navigateur destinataire, avec un seul objet WebSocket qui gère tous les messages entrants et sortants des deux côtés. Lorsqu'un message WebSocket est reçu, les données JSON sont rediffusées dans l'application JavaScript à l'aide de la méthode trigger() de jQuery. À ce stade, les données entrantes se comportent comme n'importe quel autre événement DOM personnalisé et peuvent être récupérées et traitées par n'importe quel autre objet de l'application.
var websocket = new WebSocket(serverIPAddress);
// rebroadcast incoming WebSocket messages with a global event via jQuery
websocket.onmessage = function(e) {
if (e.data) {
var obj = JSON.parse(e.data);
$(document).trigger(data.type, obj);
}
};
// broadcast outgoing WebSocket messages by passing in a native .js object
var broadcast = function(obj) {
websocket.send(JSON.stringify(obj));
};
Les serveurs WebSocket de Roll It sont créés instantanément lorsque deux appareils sont synchronisés avec un code de jeu. Le backend de Roll It a été créé sur la plate-forme Google Compute Engine et App Engine à l'aide de Go.
Écrans de menu inclinables
En plus des messages WebSocket basés sur les événements utilisés pendant le jeu, les menus de Roll It sont contrôlés en inclinant le téléphone et en appuyant sur un bouton pour confirmer une sélection. Pour ce faire, un flux de données d'inclinaison plus cohérent doit être transmis du téléphone à l'ordinateur portable. Afin de réduire la bande passante et d'éviter d'envoyer des mises à jour inutiles, ces messages ne sont envoyés que si l'inclinaison de l'appareil a changé de plus de quelques degrés. Il n'est pas utile d'envoyer un flux de données d'inclinaison si le téléphone est posé à plat sur une table. Le débit de transmission est également limité : pas plus de 15 messages WebSockets ne sont envoyés par seconde dans Roll It, même si l'appareil est en train d'être incliné.
Une fois les valeurs d'inclinaison détectées sur l'ordinateur, elles sont interpolées au fil du temps à l'aide de requestAnimationFrame pour assurer une expérience fluide. Le résultat final est un menu rotatif et une balle qui roule pour indiquer la sélection de l'utilisateur. Lorsque le téléphone envoie des données d'inclinaison, ces éléments DOM sont mis à jour en temps réel en recalculant une transformation CSS dans la boucle requestAnimationFrame. Le conteneur du menu tourne simplement, mais la balle semble rouler sur le sol. Pour obtenir cet effet, nous implémentons des principes de trigonométrie de base pour relier la coordonnée X des boules à leur rotation. La formule simple est la suivante: rotations = x / (diamètre * π)
Conclusion
Roll It est un signe des temps. Entre les projets Open Source qui ont alimenté son développement, la puissance de traitement des appareils sur nos bureaux et dans nos poches, et l'état du Web en tant que plate-forme, c'est une période passionnante et transformatrice pour être connecté sur le Web ouvert. Il y a quelques années à peine, une grande partie de cette technologie n'existait que dans des systèmes propriétaires, qui n'étaient pas disponibles à l'utilisation et à la distribution. Aujourd'hui, les expériences complexes peuvent être réalisées avec moins d'efforts et plus d'imagination, car nous créons et partageons chaque jour de nouvelles pièces du puzzle. Alors, qu'attendez-vous ? Créez quelque chose d'extraordinaire et partagez-le avec le monde entier !
