Cut the Rope pour Internet Explorer

PartagezPartagez sur FacebookPartagez sur Twitter

Inspiration

Cut The Rope est pour nous la démonstration parfaite que HTML5/CSS3 et JavaScript forment un trio pouvant parfaitement rivaliser avec d’autres technologies dans le cadre de la réalisation de jeux vidéo sur le web.

Cut the Rope est immédiatement adopté par quiconque l'essaye. C'est un jeu drôle et adorable qui nous a donné une idée : et si nous le rendions accessible à une audience plus large en le développant en HTML5 pour le Web ?

Pour cela, l'équipe Internet Explorer de Microsoft a travaillé en partenariat avec ZeptoLab (les créateurs du jeu) et avec les spécialistes de Pixel Lab pour porter Cut the Rope dans un navigateur. Le résultat final est un portage sur le web très ressemblant au jeu sur Smartphone. Il démontre quelques-unes des plus grandes qualités du HTML5 : un canevas (Canvas) pour accélérer le rendu des graphiques, audio et vidéo joués par le navigateur, feuilles de style CSS3 et les fontes WOFF.

Vous pouvez jouer à la version HTML5 de Cut the Rope à l’adresse suivante : www.cuttherope.ie.

La version HTML5 rend le Web encore plus amusant et montre les avancées dans la prise en charge des standards par la dernière version d'Internet Explorer. Nous souhaitons maintenant vous faire partager certains détails techniques utilisés dans ce projet. Ils vous aideront à construire vos propres sites HTML5 et à être prêt pour le Windows 8 Store!

D'Objective-C à JavaScript

En portant Cut the Rope vers une nouvelle plateforme, nous voulions préserver la qualité des mouvements, l'application des lois de la physique et la personnalité de l'expérience. Par conséquent, nous avons, dès le départ,  envisagé un portage de cette application iOS plutôt qu'une réécriture. Nous avons commencé par une analyse approfondie du code d'origine, écrit en Objective-C. Nous avons découvert un jeu imposant et complexe. La version native iOS comporte environ 15 000 lignes de code, sans compter les bibliothèques ! Les parties les plus complexes correspondent à l'application des lois physiques, à l'animation et au moteur de dessin. Déjà, chacune est complexe mais, de plus, toutes sont étroitement imbriquées les unes dans les autres et fortement optimisées.

La tâche nous a paru immense : porter ce code dans un navigateur tout en conservant la personnalité unique et la qualité exceptionnelle auxquelles les joueurs sont accoutumés. Pour cela, nous avons misé sur JavaScript.

Pendant longtemps, JavaScript a eu la réputation d'être un langage lent. Et cette réputation était tout à fait justifiée à l'origine vu que les anciens moteurs JavaScript ne servaient qu'à interpréter des scripts assez simples. Aujourd'hui, les moteurs JavaScript ont fait d'immenses progrès et sont fortement optimisés. Grâce à des fonctionnalités comme la compilation JIT (Just-In-Time ou à la volée), JavaScript travaille à une vitesse proche de celle des exécutables compilés.

Mais nous savions aussi qu'écrire en JavaScript est différent de l'écriture dans un langage compilé. Le jeu ayant été écrit en Objective-C, nous savions que nous aurions des adaptations et des optimisations à faire.

L’absence de structures dans JavaScript est un des exemples les plus marquants Les structures sont des agrégations de propriétés. Il est facile d'utiliser un objet JavaScript pour regrouper des propriétés, mais d'importantes différences existent entre cette approche et une structure. La première différence est qu'une structure est copiée lorsqu'elle est assignée à une variable ou passée à une fonction. Ainsi, une fonction écrite dans un langage compilé comme Objective-C peut modifier une structure reçue en paramètre sans affecter la valeur de cette structure dans le code appelant. Même dans la fonction, l'affectation d'une structure à une autre variable reviendra à copier les valeurs. À l'inverse, les objets JavaScripts sont passés par référence. Aussi, lorsqu'une fonction modifie un paramètre de l'objet, le code appelant voit la modification.

Une façon assez simple de mimer la nature des structures consiste à copier les objets JavaScript avant de les assigner ou de les passer comme paramètres à une fonction. Dans un langage compilé, cette opération n'entraîne pas de surcharge importante lors de l'utilisation des structures. Mais en JavaScript, la création d'objets est plus coûteuse et nous avons dû réduire ce genre d'opération au minimum. Notamment, lors d'affectations, nous avons cherché à copier des propriétés individuelles plutôt que de créer une instance complètement nouvelle de l'objet.

Un autre exemple est la nature orientée objet d'Objective-C. À la place d'un héritage d'objets traditionnel, JavaScript propose un héritage basé sur la propriété Prototype. C'est une forme d'héritage très simplifiée qui n'est pas vraiment compatible avec un langage orienté objet traditionnel comme Objective-C. Heureusement, il existe diverses bibliothèques de classes qui aident à écrire un code orienté objet pour JavaScript ; nous en avons utilisé une très simplequi a été écrite par John Ressig (auteur réputé de jQuery). (Notez que ECMAScript5, la spécification de la toute dernière version de JavaScript, prend mieux en charge les classes mais nous avons choisi de ne pas l'utiliser pour ce portage car nous la connaissons moins et le temps nous était compté.)

En plus du portage d'Objective-C vers JavaScript, nous avons dû aussi porter le code graphique d'OpenGL vers l'API Canvas de HTML5. En fait, cela s'est passé sans grandes difficultés. L'API Canvas permet d'afficher très rapidement les graphiques, notamment si l'API du navigateur bénéficie de l'accélération matérielle (comme sur  Internet Explorer 9).

Prenons par exemple le dessin des cordes avec des lignes lissées via l'API Canvas.

Nous avons découvert avec surprise que Canvas fournit davantage de fonctionnalités dans certains domaines que la version OpenGL ES utilisée dans la version iOS de Cut the Rope. C'est notamment le cas pour le dessin des lignes lissées. Pour dessiner des lignes lissées (anti-aliasées) dans OpenGL, il faut dessiner une mosaïque de triangles et faire des dégradés de l'opacité jusqu'à transparence complète pour affiner le bord des lignes. Le canevas HTML5 gère automatiquement l'anti-aliasing des lignes tracées via son API. Sur ce point, nous avons donc au final allégé le code par rapport à la version OpenGL. En supprimant les mosaïques de triangles du code OpenGL et en adoptant une autre façon de tracer les lignes, nous avons gagné en performance.

À la fin du portage, le code dans le navigateur compte environ 15 000 lignes qui ont ensuite été regroupées et optimisées si bien que si vous regardez le code source dans le navigateur, vous en trouverez moins que cela. Anticipant sur la complexité associée à ce portage, Denis Morozov (Directeur du développement chez ZeptoLab) a posé dès le départ une question importante : HTML5 permettrait-il la vitesse et les performances dont nous avons besoin pour ce jeu ?

Pour répondre à cela, nous avons créé un prototype orienté performance, c'est-à-dire une version minimale qui permettait de tester les parties les plus importantes du jeu. Nous voulions voir s'il était possible de conserver l'aspect dynamique des cordes et si nous pouvions porter le moteur des effets physiques dans le navigateur.

Performance

Trois semaines plus tard, nous avions mis en place les bases des comportements physiques et des moteurs de dessin avec un simple compteur de temps pour régler l'animation. Nous pouvions afficher les sprites de deux cordes, d'une étoile et d'un Om Nom sur la scène du jeu. Nous progressions ! Au cours de la quatrième semaine, nous avons inclus des interactions de base à la souris afin de pouvoir commencer à jouer ! Nous mesurions les performances à chaque étape mais nous voulions que l'équipe de ZeptoLab nous donne son avis.

Lorsque nous avons montré le résultat à ZeptoLab, ils ont été agréablement surpris par les performances (notamment la vitesse et le fonctionnement sans à-coups du jeu) obtenues dans des navigateurs modernes. Pour être honnêtes, nous retenions quelque peu notre respiration... Nous savions que JavaScript serait rapide mais le programme nécessite beaucoup de calculs en temps réel. Nous sommes parvenus à de très bons résultats, ce qui prouve que la réputation de lenteur de JavaScript fait désormais partie du passé. La dernière génération de moteurs JavaScript est particulièrement rapide.

Dans notre cas, nous avons affiché le jeu dans Internet Explorer 9. Lors du chargement du jeu, le moteur JavaScript d'Internet Explorer 9, Chakra, précompile le code en arrière-plan, comme un compilateur compilerait un langage comme Objective-C ou C++. Puis le résultat compilé est ensuite exécuté en temps réel. Le résultat est très proche de la vitesse d'exécution d'un code natif compilé. Tout cela est dû au moteur JavaScript, sans que nous ayons eu à faire quelque chose de spécial dans le code.

La fréquence d'affichage atteint 60 images par seconde.



Cut the Rope en tant qu'application HTML5 fonctionnant dans IE9, portée depuis le code source d'origine iOS.



Une capture d'écran d'un des niveaux spécialement conçu pour cette version.



Prenons par exemple le dessin des cordes avec des lignes lissées via l'API Canvas.

Notre pari sur JavaScript a été gagné. Nous avons ensuite étudié le matériel et les navigateurs. Avec le rendu accéléré par le matériel d'Internet Explorer, et notre expérience de Tron de Disney et d'autres sites en HTML5, nous n'avons rencontré aucun problème pour exécuter parfaitement ce jeu sur nos machines de test. Nous avons facilement atteint notre objectif de 60 images par seconde. Toutefois, nous voulions être sûrs que le jeu fonctionnerait bien sur d'autres matériels avec d'autres navigateurs. Voici les résultats que nous avons obtenus après quelques tests préliminaires.

Nous constatons une vitesse minimale de 30 images par seconde. Nous avons décidé qu'en-dessous de ce seuil, nous afficherions un avertissement à destination du joueur. Il pourrait toujours jouer mais le jeu serait un peu lent et moins réactif.  Nous prenons donc en charge la grande majorité des matériels et des logiciels existants et nous proposons la meilleure expérience possible à tous les visiteurs du site.

Encore deux choses à signaler. Tout d'abord, la version actuelle du jeu fonctionne mieux sur les Mac et les PC de bureau avec une souris. Actuellement, nous ne prenons pas en compte les écrans tactiles mais nous l'envisagerons dans une prochaine version.

Deuxièmement, la version actuelle de Chrome (version 16) présente  des problèmes connus pour la lecture de certains médias qui donnent un résultat instable dans Cut the Rope. Nous avons cherché des moyens de contourner ces problèmes et nous avons essayé différents formats (y compris WebM), mais nous n'avons trouvé aucun format ni aucune configuration MIME ni aucune astuce qui nous permettent de résoudre de façon fiable ces problèmes. Il s'agit de problèmes et de bugs connus. Heureusement, le jeu continue d'être jouable malgré un son intermittent. Au final, nous pouvons affirmer que les utilisateurs d'Internet Explorer 9 bénéficieront d'une excellente expérience sans qu'il soit nécessaire d'ajouter des modules complémentaires. Les utilisateurs de Chrome et de Firefox rencontreront quelques problèmes de sons mais nous avons créé un composant additionnel Flash pour que la musique et les effets sonores puissent fonctionner correctement.

Outils

L'un des grands avantages du HTML5 est que nous n'avons pas besoin d'apprendre un nouveau langage pour exploiter toute la puissance de cette nouvelle technologie. Si vous connaissez déjà JavaScript, vous avez déjà accès à tout ce qu'un navigateur moderne peut vous offrir. Vous pouvez même créer vos propres jeux de ce genre !



La fréquence d'affichage atteint 60 images par seconde.

Éditeur de code et environnement de développement

Visual Web Developer 2010 Express est un produit en téléchargement gratuit et un grand éditeur de code mis à la disposition des développeurs Web, expérimentés ou non.

Capture d'écran du profileur qui montre le temps important passé dans Calc2PointBezier, une fonction utilisée pour calculer les positions des segments d'une corde.

De nombreux outils gratuits existent pour faciliter le travail en JavaScript avec HTML5. La majeure partie de notre développement a été réalisé avec Visual Web Developer 2010. (La version « express » est disponible gratuitement ici.) Cet éditeur Web propose de nombreuses fonctionnalités, notamment l'autocomplétion pour JavaScript et CSS. En plus la version Express est gratuite ! Nous avons réalisé la plupart de nos tests avec Internet Explorer 9 sur Windows 7 et de temps à autre, nous avons aussi essayé Firefox, Chrome, Safari et la version en cours de développement en interne d'Internet Explorer 10. En général, tous les principaux navigateurs implémentent correctement les fonctionnalités HTML5 et dans la plupart des cas, tout ce que nous avons testé sur Internet Explorer 9 fonctionnait également sur d'autres plateformes.

Utilisez notre chargeur de ressources !

Cut the Rope a un style visuel très particulier avec beaucoup d'images, de sons et de vidéos. Le jeu complet est bien plus grand qu'un site Web ordinaire. Au total, il utilise près de 6 Mo (contre 200 à 300 Ko pour un site classique). Par conséquent, le temps de chargement est long et nous ne pouvons pas commencer le jeu tant que tout n'a pas été chargé. Une page Web traditionnelle peut s'afficher même si une ou deux images sont manquantes mais l'API Canvas de HTML5 n'affiche rien tant qu'une seule image est encore manquante.

Pour améliorer les choses, nous avons créé un chargeur de ressources qui télécharge tout le contenu nécessaire et indique clairement ce qui est en cours de chargement. Ce code remplit différentes fonctions :

  1. Il tient compte des particularités des différents navigateurs lors des téléchargements, et de leurs façons de vous informer de l'avancement du chargement.
  2. Il vous permet de choisir le mode de téléchargement (par exemple, commencer par les gros fichiers ou télécharger les images des menus avant les images du jeu).
  3. Enfin, il signale certains événements qui permettent d'afficher une barre d'avancement réaliste ou même de démarrer certaines parties du jeu avant que tout le chargement soit terminé.

Construire ce genre de bibliothèque n'est pas simple. Le résultat étant intéressant, nous souhaitons vous donner accès au code de ce chargeur de ressources. Le résultat final est PxLoader, une bibliothèque JavaScript de chargement de ressources que vous pouvez utiliser dans vos sites, jeux et applications HTML5. Cette bibliothèque est open source et gratuite. Vous pouvez l'obtenir dans le haut de cette page ou en cliquant ici.

Outils de performance dans Internet Explorer

Le profileur JavaScript d'Internet Explorer 9 a été un outil indispensable tout au long du processus de développement. Le profilage permet de détecter les goulets d'étranglement et les points critiques dans le code. Lors de nos premiers tests de performance, nous étions prêts à abandonner quand nous avons constaté que nous ne parvenions pas à dépasser 20 à 30 images par seconde.

Nous avons analysé notre code mais rien ne semblait anormal. Nous avons chargé le jeu dans le profiler et nous avons immédiatement constaté que nous passions trop de temps dans la fonction satisfyConstraints(). Cette fonction réalise des calculs pour le comportement physique des cordes. L'implémentation Objective-C que nous avions portée opérait de façon récursive, passant un nouveau objet à chaque nouvel appel.

Sur les conseils de Microsoft, nous avons décidé de remplacer la fonction récursive par une version itérative du même code. Les résultats ont été stupéfiants. Nous avons constaté une amélioration d'un facteur 10 dans chaque navigateur ! Franchement, nous n'aurions jamais obtenu ce résultat sans les outils de profilage d'Internet Explorer 9.

Et ensuite ?

Lors du BUILD en septembre dernier, Microsoft a montré une version en avant-première de Windows 8. Avec cette annonce, le HTML5 devient encore plus intéressant car des applications de style Metro peuvent être créées en utilisant de nombreux outils à la disposition des développeurs, notamment HTML5. Ainsi, les développeurs peuvent reprendre du code qui a été écrit pour le Web et le porter facilement sur Windows 8. L'investissement dans des expériences immersives en ligne peut devenir très rentable dans le Windows Store.

En fait, avec très peu de travail supplémentaire, nous avons pu porter cette expérience HTML5 dans une application de style Metro pour Windows 8. Pour connaître tous les détails de Cut the Rope et son intégration dans le Windows Store, lisez ce blog.

Nous sommes passionnés par tout ce que les développeurs peuvent construire aujourd'hui avec HTML5. Vous pouvez télécharger Internet Explorer 9 et découvrir de nombreux autres sites sur www.beautyoftheweb.com, ou télécharger l'avant-première en cours de développement de Windows 8 sur la page dev.windows.com.

Et c'est juste le commencement.. De nombreuses surprises apparaîtront prochainement !



Visual Web Developer 2010 Express est un produit en téléchargement gratuit et un grand éditeur de code mis à la disposition des développeurs Web, expérimentés ou non.



Capture d'écran du profileur qui montre le temps important passé dans Calc2PointBezier, une fonction utilisée pour calculer les positions des segments d'une corde.