Navigation▲
I. Introduction▲
Bytro Labs a été créée en 2009 à Hambourg en Allemagne. Elle se spécialise dans le développement de jeux multiplateformes en ligne. Actuellement, 18 employés composent les effectifs de l'entreprise.
Depuis 2011, les jeux de Bytro Labs sont développés en HTML 5. Jusqu'à novembre 2013, le studio était complètement indépendant, mais est maintenant rattaché à Stillfront Group.
I-A. Jeux▲
Les jeux développés par Bytro Labs sont :
- Supremacy 1914 (HTML 5/Java) ;
- PanzerWars (iOS) ;
- Topia Island (HTML 5).
II. Pourquoi le HTML 5 ?▲
L'avantage d'utiliser le HTML 5 est qu'il n'est pas nécessaire d'avoir un module supplémentaire pour jouer à un jeu. De plus, les performances pour les graphismes 2D sont plutôt bonnes, et la technologie est multiplateforme (que ce soit pour les mobiles ou les PC).
Bytro Labs est maintenant entièrement dédié au développement avec le HTML 5. Les jeux sont par essence multi plateformes.
III. Qu'est-ce que le HTML 5 ?▲
Le HTML 5 est un ensemble de standards, d'extensions et de technologies qui ont notamment apporté les nouvelles balises <audio> et <video>. De plus, le HTML 5 vient avec une nouvelle version pour les feuilles de styles : CSS 3. Finalement, de nouvelles bibliothèques JavaScript sont elles aussi disponibles : Canvas2D, WebSockets, Web Audio et d'autres se spécialisent dans les sites compatibles entre les navigateurs : JQuery. Toutes ces technologies sont hautement répandues grâce à la faculté des navigateurs à se mettre à jour automatiquement.
III-A. Outils▲
De nombreux outils existent pour travailler avec le HTML 5. Chacun des navigateurs modernes propose un débogueur et un profileur. Les périphériques mobiles possèdent aussi leurs solutions : « iOS WebInspector » ou « Chrome remote debugging ». Vous pouvez aussi utiliser un éditeur de développement intégré tel que « Webstorm ».
III-B. Support▲
Le support du HTML 5 est bon sur PC et Mac. Les mobiles possèdent aussi un support de qualité et bénéficient d'une meilleure accélération matérielle et des bibliothèques audio. D'autant que cette accélération est maintenant présente sur Windows 8. Finalement, iOS et Android peuvent même proposer une application appelée « hybride » exposant votre jeu HTML 5 telle une application native (grâce à PhoneGap ou CocoonJS).
III-C. Les choix de Bytro Labs▲
Parmi l'ensemble des nouveautés apportées par le HTML 5, il est nécessaire de faire un choix. Bytro Labs utilise pour ses jeux les technologies suivantes :
- Canvas2D (graphismes) ;
- CSS 3 (quelques animations) ;
- Web Sockets (communication basse latence) ;
- Web Storage (stockage de données dans le navigateur) ;
- la balise <audio>.
De plus, le studio regarde les différentes évolutions des bibliothèques suivantes :
- Web Audio ;
- Web Worker (parallélisme).
IV. Graphismes hautes performances▲
Grâce à la bibliothèque JavaScript : Canvas2D, les manipulations basées sur les pixels sont possibles. Le CSS 3 possède un support plutôt bon pour les animations, mais aucune fonctionnalité sur la manipulation de pixels. Toutefois, le rendu est potentiellement rapide sur les PC et les mobiles. Le format SVG, format d'image vectoriel en XML, dont le standard est ancien, ne répond pas aux besoins, car il ne gère que très difficilement les scènes dynamiques et les scènes avec des sprites. Le WebGL est aussi une solution envisageable, ses spécifications proviennent de Khronos et non plus du W3C. Le support bureau s'améliore (avec le récent support d'IE 11) et il existe des surcourches pour les mobiles. Malheureusement, le support dépend énormément des pilotes.
IV-A. Canvas2D▲
IV-A-1. Boucle de rendu▲
Voici la boucle de rendu proposée et utilisée par Bytro Labs :
IV-A-2. Feuilles de sprites▲
Les feuilles de sprites sont essentielles pour économiser des requêtes HTTP. En CSS, il faut utiliser compass pour les feuilles de sprites. Afin de toujours bénéficier de l'accélération graphique, il faut conserver des tailles d'images ayant des dimensions en puissance de deux. Les tailles maximales disponibles pour les mobiles sont :
|
Iphone 2, 3 |
1024 x 1024 |
|
Iphone 3GS, 4, iPad 1 |
2048 x 2048 |
|
Iphone 4, 5, iPad 2,3,4 |
4096 x 4096 |
Si vous les dépassez, vous risquez d'avoir de très forts ralentissements.
IV-A-3. Animations▲
Vous devez faire vous-même les animations à l'aide d'une feuille de sprite et de la fonction drawImage(image, source, dest). Il est possible de facilement appliquer les transformations 2D classiques (translation, rotation, redimensionnement). Pour la transparence, il n'y a aucune solution rapide en place, il est donc conseillé de se limiter à une transparence sur un bit (opaque ou transparent).
IV-A-4. Conserver l'accélération matérielle▲
Il arrive très facilement que le navigateur n'utilise pas l'accélération matérielle. Il faut donc prendre quelques précautions afin de conserver de bonnes performances.
Par exemple, lors d'un masquage de sprites, l'opération canvas.compositOperation = 'destination-out' est correcte, mais il n'y aura plus d'accélération pour le sprite caché.
Un autre exemple est qu'il ne faut surtout pas effectuer de ctx.getImageData() dans la boucle de rendu. La fonction prend trop de temps à s'exécuter.
IV-A-5. Intégration dans la page Web▲
Il faut utiliser avec parcimonie le CSS et le HTML. Le HTML doit être utilisé uniquement pour les éléments d'interface statique, SASS/compass pour le style et pour créer de simples feuilles de sprite CSS puis Canvas2D pour toutes les animations avec les sprites. Il y a même quelques moteurs (LimeJS) qui évitent complètement le HTML.
Il est aussi à éviter les animations de l'arbre DOM, détruisant complètement les performances sur les mobiles.
Utilisez les animations CSS 3 dans les contextes statiques et le HTML pour les champs d'insertion.
IV-A-6. Canvas et iOS▲
Le support de Canvas dans iOS est très rapide. À partir de iOS 5, l'accélération matérielle a été ajoutée, augmentant les performances d'un facteur de 8. iOS 7 a rendu le moteur encore plus rapide, mais le DOM est plus lent.
IV-A-6-a. Affichage Retina▲
En interne, le navigateur Safari double la taille des canvas, faisant que les performances sont mauvaises. Pour contourner cela, vous devez diviser la taille du canvas par deux.
IV-A-7. Comportements par défaut▲
Il est nécessaire de désactiver les comportements par défaut. Une bonne technique est de définir vous-même tous les paramètres à une valeur par défaut. Par exemple, dans un jeu, vous souhaitez certainement désactiver la surbrillance du touché.
IV-B. Multi touch▲
Il n'y a pas de fonctionnalités de multi touch en HTML 5, vous devez donc le gérer vous-même. Il faut garder en tête que la réactivité d'une application est primordiale. Les événements liés à la souris ont une latence et aucune des bibliothèques n'a convaincu l'équipe de Bytro Labs.
Une solution est de traiter les événements de touché directement :
- 'touch-start' pour les clics immédiats ;
- des gestionnaires de clics personnalisés pour les boutons ;
- des gestionnaires de multi touch personnalisés pour les interactions avec la carte ;
- et surtout, utiliser Event.preventDefault().
V. Développer avec HTML et JavaScript▲
Pour le code du client et du serveur, la première solution chez Bytro Labs a été d'utiliser du Java et du JavaScript, où les structures de données doivent être synchronisées. Pour cela, ils utilisaient GWT, mais ils ont abandonné cette solution.
Ensuite, ils auraient pu utiliser Node.js où tout était en JavaScript, mais bien que cela était prometteur, ils n'ont pas finalisé cette solution.
La solution finale a été d'utiliser ST-JS, offrant un code JavaScript fortement typé compilé à partir d'un code Java. Cette solution a permis d'éviter le surcoût d'une abstraction du côté client.
V-A. Structure et gestion d'un code JavaScript▲
Un outil très pratique lors du développement d'un jeu en JavaScript est le Google Closure Compiler, permettant de réduire la taille de la page et de l'exécuter plus vite.
De plus, Tobias Kringe nous conseille le livre : « JavaScript – The good parts » de Douglas Crockford.
Finalement, durant leur développement, ils ont été obligés de désactiver require.js qui provoquait des messages d'erreur.
V-B. Support par les outils▲
Le JavaScript n'est pas toujours bien supporté par les outils. L'autocomplétion et la coloration syntaxique cassent facilement.
V-C. Bibliothèques aimées par Bytro Labs▲
L'équipe de développement utilise différentes techniques durant les projets :
- patron HTML : mustache/handlebars ;
- une localisation du style de gettext personnalisée : {{tr 'traduit-moi'}} ;
- JQuery 2 pour les accès à l'arbre DOM (IE > 9 bien plus rapide).
Pour la stylisation par le CSS :
V-D. Les outils▲
Bytro Labs utilise :
- WebStorm ;
- GIT ;
- les boites à outils de développeurs des navigateurs ;
- Jenkins (outils de gestion et de déploiement) ;
- Google Closure Compiler
- TypeScript (ajout des types dans JavaScript).
VI. Audio▲
Dans le HTML 5, il existe deux standards pour l'audio :
- la bibliothèque Web Audio, très flexible, proposant un chronométrage exact du filtrage, est disponible depuis iOS 6, mais son support des PC et d'Android est mauvais et n'est donc pas adéquat pour un large usage ;
- la balise audio, qui joue de simples fichiers son, avec laquelle il est possible de jouer des sons multicanaux, mais pour les effets, il faut utiliser des cartes son (comme des spritesmap, mais pour le son).
VI-A. Mise en garde▲
Le support de l'audio est compliqué. Il est préférable d'utiliser une bibliothèque multiplateforme telle que SoundJS. En effet, pour Firefox, seul le format OGG est lu. Pour Internet Explorer c'est uniquement du MP3. Sous iOS, le son ne démarre qu'après un événement de touché qui peut être contourné en ajoutant une mention « appuyer pour démarrer ». Sous Android, le son bogue lors d'un déplacement dans le fichier.
VII. Déploiement de jeux HTML 5▲
Vous pouvez déployer vos jeux de deux manières différentes :
- telle une page dans le navigateur ;
- telle une application de bureau. Pour ce cas, vous devrez créer une icône de bureau et pour Windows 8, vous devrez adopter les principes d'interface utilisateur de Windows.
Le JavaScript peut être inclus dans les applications natives vous permettant de réutiliser le code de la logique du jeu entre le client et le serveur. Il peut aussi être avantageux de créer une interface utilisateur native pour gagner en performance.
Pour iOS, il existe un pont entre JavaScript et Objective C. Il en est de même pour Android et le Java.
Vous pouvez aussi utiliser l'une de ces surcouches natives :
- PhoneGap/appMobi : grande boite à outils avec plein de fonctionnalités, processus de construction complexe, possède des problèmes de performance avec Canvas2D ;
- CocoonJS : surcouche offrant une bibliothèque Web normale, implémentation de canvas rapide, support WebGL depuis la version 1.4.
Les applications Web ont l'avantage de ne pas avoir à subir les processus de revue d'Apple ou de Google, vous pouvez choisir votre propre système de paiement, vous pouvez partager la base de données avec les jeux par navigateur, mais le support hors ligne demande plus de précautions (utilisez Construct 2).
Quant aux applications hybrides ou natives, les avantages sont qu'elles possèdent leur propre service de distribution et que la solution de paiement est intégrée.
VIII. Conclusion▲
Le HTML 5 permet de faire des jeux en HD et le support des navigateurs s'améliore rapidement. Il est aussi possible d'intégrer du son dans les applications et des solutions multiplateformes sont aussi possibles. Toutefois, pour y arriver, il faut être strict dans le développement et ne pas avoir peur de se salir les mains.
D'un point de vue marketing, le HTML 5 est toujours un pas en arrière des applications natives sachant qu'il faut toujours mettre en place des contournements pour gérer les problèmes. Une autre solution se présente : Emscripten.