Discussion :

[Gordon Fowler]

JavaScript : Microsoft porte les 15 000 lignes de code « Cut The Rope »
Depuis Objective-C et rend disponibles les outils qui l’ont aidé


Si Cut the Rope ne vous dit rien, vous pouvez dès à présent aller voir à quoi ressemble ce « best seller » des jeux mobiles. Ses premiers niveaux sont à présent disponibles en applications Web.

Si vous le connaissez, vous serez peut-être étonnés d’apprendre que Microsoft vient en effet de porter le code initial (en Objetcive-C) en... JavaScript.

Le projet a été mené pour trois raisons : montrer la puissance de ces technologies, promouvoir IE 10 (même si le jeu fonctionne avec d’autres navigateurs) et mettre à la disposition des développeurs Web plusieurs outils utilisés dans ce portage.



Sur le papier l'idée est bonne. Mais dans la réalité, les problèmes n’ont visiblement pas manqué.

La différence est a priori énorme entre une application native en Objective-C et un mélange de canevas (pour accélérer le rendu des graphiques), de feuilles de style CSS3, de fontes WOFF, et d’audio et de vidéos joués par le navigateur.

Pourtant, l’équipe de développement a abattu les obstacles un à un.

Le premier concernait la vitesse du JavaScript. « Pendant longtemps, JavaScript a eu la réputation d'être un langage lent », écrit Microsoft. Un problème plus ou moins résolu par les navigateurs avec la compilation à la volée (ou JIT pour Just-In-Time). « 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. La fréquence d'affichage atteint 60 images par seconde »

Le deuxième défi, beaucoup plus difficile, concernait l’absence de structures dans JavaScript ce qui le rend très différent de la nature orientée objet d'Objective-C. « Ecrire en JavaScript est différent de l'écriture dans un langage compilé […] À la place d'un héritage d'objets traditionnel, JavaScript propose un héritage fondé 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 ».

Pour réussir son pari, l’équipe a utilisé diverses bibliothèques de classes (qui aident à écrire un code orienté objet pour JavaScript). Dont une écrite par « l’auteur réputé de jQuery ».

Troisième défi, porter le code graphique d'OpenGL vers l'API Canvas de HTML5. Et là surprise, la chose s’est faite sans grande difficultés. Mieux, « nous avons découvert 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 ». Et de citer l’exemple du dessin des lignes lissées.

Autre problème que les développeurs ont du affronter : une application web peut avoir un temps de chargement élevé. Une page Web 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. Et le jeu ne peut donc pas commencer.

« 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 », révèle Microsoft.

Le résultat s’appelle PxLoader, une bibliothèque JavaScript de chargement de ressources utilisable aussi bien dans les sites, que dans les jeux ou les applications HTML5. Petite précision, cette bibliothèque est open source et gratuite. Et disponible.

La version native iOS de « Cut The Rope » compte environ 15 000 lignes de code, hors bibliothèques. Son portage Web possède à peu de choses près le même nombre de lignes. Celles-ci 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 ». Au final, et pour donner un ordre de grandeur, « Cut The Rope pour Internet Explorer » pèse près de 6 Mo contre 200 à 300 Ko pour un site classique.

Bien que s’appelant « pour Internet Explorer », l’application est compatible avec d’autres navigateurs. Microsoft l’a même testé avec les produits de ses concurrents (Fireofx et Chrome) pendant le développement, preuve d’un esprit d’ouverture de plus en plus prononcé chez l’éditeur.

L’équipe a eu encore d’autres défis à relever lors de ce projet. Comme celui des performances globales du jeu. Un défi relevé grâce à un profiler spécifique. Et dont les détails sont expliqués sur le résumé de l’aventure.


Tester « Cut The Rope pour Internet Explorer » et télécharger les outils du portage


Et vous ?

Impressionné(e) par cette réalisation ?

[vampirella]

J'y vois surtout encore un moyen de promouvoir HTML5 et d'inciter les développeurs à regarder ailleurs que la programmation native, tout en leur facilitant la tâche. Un moyen comme un autre de couper l'herbe sous le pied d'Apple, qui si je ne me trompe pas, ne veut pas encore entendre parler de HTML5.

Après tout, ce n'est pas comme s'ils préparaient le terrain pour le Windows Phone, n'est-ce pas ?

Remarques acides à part, je reconnais que c'est une belle performance. Je serais curieux tout de même des ressources utilisées au total (temps et nombre de personnes), car le blog n'en parle pas (ou alors je suis aveugle )

[Niark13]

Un moyen comme un autre de couper l'herbe sous le pied d'Apple, qui si je ne me trompe pas, ne veut pas encore entendre parler de HTML5.

"HTML 5 l'emportera sur le mobile" - Steve Jobs, 2010

http://www.clubic.com/smartphone/iph...ra-mobile.html

[frfancha]

<<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é.>>

C'est une blague?

[amezghal]

ils ont fait un travail de chinois: le même visuel mais pas la même qualité(enfin pas le même framerate).

ici
http://www.cuttherope.ie/dev/notes-framerates.jpg
on voit bien que ça risque de larguer sur ipad.

mais bravo quand même très bon travail.

[Invité]

de constater qu' a chaque fois que l'on parle de javascript il n'y a pratiquement que des mauvaises langues.

[alex_vino]

<<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é.>>

C'est une blague?

Pourquoi une blague?
Former toute une tripoté d'ingénieur sur une version non éprouvée est tres couteux.

Bon boulot de leur part, quand je l'avais testé il y a quelques mois c'était presque injouable (lenteur, inprécision), aujourd'hui le résultat est vraiment bien.

Pour répondre a Mekal je dirais qu'il a raison, la plupart des gens ne savent que faire des opérations basiques en JS, peu de monde connait sa réelle puissance.
Mais ce que je trouve dommage en javascript est que ce language mérite d'etre amélioré, et pas qu'un peu. En tout cas personellement je trouve que c'est une horreur, mais qu'il est bien pratique.

Par contre je trouve dommage que Microsoft investisse tant dans ce language pour ses applications dites natives.