HTML5 est-il adapté pour les jeux ? Retour sur sa puissance et ses pièges

Le 28/11/2011, par Hinault Romaric, Chroniqueur Actualités

Le futur standard émergeant du Web HTML5, qui est « présenté comme la technologie devant repousser les limites du Web », a été disséqué lors de l’événement « New Game Conference».

Parrainé par Google et Microsoft, «New Game Conference» est le premier événement HTML5 pour les développeurs de jeux, qui s’est déroulé à San Francisco.

Les sessions qui ont été présentées lors de la conférence ont permis d’explorer à partir d’exemples concrets, la construction des jeux HTML5 en utilisant Canvas, WebGL et JavaScript. Le port des jeux natifs iOS sur le Web a été également à l’ordre du jour.

Il en ressort que le HTML5 serait de plus en plus adopté, avec l’apparition des nouveaux outils devant faciliter le développement. « Ce que nous voyons est un flot de nouveaux outils qui abaissent les barrières pour l’écriture du code HTML5 par les développeurs Web », note Richard Hilleman, directeur de « creative officer of game maker Electronic Arts » et conférencier principal de New Game Conference.

Le support des applications HTML5 serait également effectif sur la plupart des navigateurs. «Plus de 50% des navigateurs du marché peuvent maintenant exécuter la version HTML5 du célèbre jeu Angry Brids », remarque Advocate Seth Ladd développeur chez Google.

Google essaye de faire du Web une plateforme de jeux avec notamment sa galerie Chrome Web Store et son projet Native Client qui permet d’exécuter du code natif dans le navigateur. « Si le Web a vraiment gagné, il n’a commencé à gagner que récemment […] et l’ampleur de cette victoire continue d’être débattue » conclut Advocate Seth qui voit les applications Web remplacer les solutions natives.

Malgré l’enthousiasme des participants pour le HTML5, l’entreprise Quimby, de par son expérience pour le développement des Jeux HTML5, émet quelques réserves pour les solutions mobiles. « Le message que reçoivent les consommateurs sur HTML5 est qu’il fonctionne partout. Ce n’est pas fondamentalement vrai » note l’éditeur.

Quimby estime que pour cibler autant de périphériques que possible, y compris les vieilles versions d’Android qui sont encore très utilisées en dehors des USA, le développeur devrait s’abstenir d’utiliser des technologies populaires comme JQuery, WebGL et Canvas.

Quoi qu'il en soit, cet événement a permis de constater combien le HTML5 semble permettre le développement d’applications Web complexes. « Nous pensons que le HTML5 est grand, mais nous ne pouvons utiliser dans le monde du mobile que le plus petit dénominateur commun » conclut Quimby.

Source : New Game Conference

Et vous ?

Avez-vous déjà utilisé le HTML5 pour développer des jeux ? Qu’en pensez-vous ?

Les derniers commentaires postés :

Retrouver la discussion sur le forum

gouessej
Membre confirmé
le 05/12/2011

Bonjour

Citation:

Envoyé par zecreator

Aujourd'hui il y a de moins en moins de respect des standarts. Tout est ouvert et chacun peut faire son flash player ou sa jvm a sa sauce. Ca n'a plus de sens. Merci l'open source.

Cela relève plus de la science-fiction que de la réalité. Je ne connais que Gnash comme implémentation libre de Flash et ce n'est pas un player Flash qui cherche à se comporter différemment de l'implémentation propriétaire si on met de côté les bogues.

Quant à Java, la JVM d'Oracle et celle d'OpenJDK partagent une grande partie du code, c'est encore plus vrai dans Java 1.7. La fragmentation des JVM ne concerne pas l'environnement desktop, cela ne touche que l'environnement mobile pour les terminaux compatibles J2ME/MIDP. Je ne vois pas du tout le rapport avec l'open source. Votre remarque est donc sans fondement.

Citation:

Envoyé par zecreator

Je ne suis pas fan des systemes proprietaires, mais je pense que l'on va droit dans le mur avec tout c es framework livres en pature a des developpeurs qui ont chacum leur "standart"'.

Vous n'êtes pas obligé d'utiliser les frameworks en question. L'écosystème Java n'a pas attendu WebGL et Canvas pour permettre la création de jeux en 3D dans le navigateur (et aussi en dehors) notamment avec des bindings d'OpenGL/OpenGL-ES dont JOGL (cf. "Zoltar's Return" de Lilian Chamontin dès 2004). C'est bien sympa la 3D sans avoir à installer le moindre plug-in mais cela va poser encore plus de problèmes que le support des applets comme une partie plus importante des couches sous-jacentes réagira de manière potentiellement différente à la fois en fonction du système d'exploitation et du navigateur malgré les jolis standards. Essayez de réécrire Minecraft en Javascript; après, on en reparlera. Je ne suis pas une mauvaise langue, je pense juste que le couple Javascript + HTML5 + WebGL manque de maturité. La situation sera peut-être bien différente dans 5 à 10 ans.

zecreator
Membre actif
le 06/12/2011

Citation:

Envoyé par gouessej

La situation sera peut-être bien différente dans 5 à 10 ans.

C'est marrant, on disait la même chose... il y a 5 ou 10 ans.

lejuifnoir
Invité de passage
le 09/12/2011

Que de mots de bienvenue au HTML5 !

davrous
Membre confirmé
le 09/12/2011

Hello,

Je me permets de faire mon petit retour d'expérience sur le sujet des jeux 2D. Je me suis amusé à porter un jeu de platforme en XNA vers HTML5/Canvas grâce à l'utilisation de la librairie EaselJS. J'ai publié un article et le code complet du jeu ici : http://blogs.msdn.com/b/davrous/arch...4-easeljs.aspx et j'ai fait 1 heure de session autour du développement d'un jeu de plateforme en vidéo ici : http://blogs.msdn.com/b/davrous/arch...-en-html5.aspx

Mon objectif était de voir si l'on pouvait faire un jeu cross-navigateur et surtout cross-devices (iPad, Android & Windows Phone 7) grâce à HTML5.

La conclusion de mes tests et recherches sont les suivantes :

- HTML5/Canvas sont parfaitement adaptés aux jeux 2D sur les desktop grâce à l'accélération matérielle présente maintenant dans IE9, Firefox, Chrome et bientôt Opera. De plus, les GPU et CPU mangent assez facilement la charge. Ainsi, mon jeu tourne sans problème à 60 fps sur mon Vaio Z équipé d'une nVidia GT330m sous IE/FF/Chrome.
- C'est nettement moins le cas des mobiles! Le même jeu tourne dans les 10 fps sous iPad 2. Il tourne un chouilla mieux sous mon Windows Phone 7 (HD7) grâce à l'accélération matérielle d'IE9 dessus mais cela reste totalement injouable!

Bref, un canvas pleine page sur les mobiles n'est pas trop envisageable aujourd'hui. Par contre, rien n'empêche de faire des petits canvas et de les faire bouger à travers CSS. C'est ce que fait Angry Birds version HTML5 si vous regardez. CSS et CSS3 transitions & animations sont en effet matériellement accélérés sous iPad par exemple. Donc mieux vaut s'appuyer dessus pour faire bouger ses sprites plutôt que de balancer tout cela dans un gros canvas. J'ai commencé à faire des tests que l'on retrouve dans mon dernier article sur CSS3 Animation ici : http://blogs.msdn.com/b/davrous/arch...ions-css3.aspx . J'aimerais bien aller plus loin en réécrivant le jeu à base de plusieurs petits canvas + animations CSS mais c'est un boulot assez important (refaire les tests de collisions, etc.).

Je pense qu'il faut du coup une couche d'abstraction qui sera apportée bientôt par des frameworks de jeux comme EaselJS pour que l'on ne se galère pas dessus. Mais je pense aussi qu'HTML5 est une belle oppornité pour les petits jeux multi-plateformes. Il faut juste faire attention de développer son jeu en partant du mobile (Mobile First comme disent les américains) puis d'ajouter d'éventuels effets en montant sur les plateformes plus puissantes.

Bye,

David

DonQuiche
Membre Expert
le 09/12/2011

@Davrous
Merci à toi pour ce retour détaillé.

Cela dit, j'aimerais y apporter un gros bémol. Je dispose encore ce soir d'une "veille" machine (2008) - la nouvelle arrive demain. A l'époque il s'agissait d'une configuration haut de gamme et donc vraisemblablement encore supérieure à ce dont dispose le pur casual gamer moyen aujourd'hui (c2d E6850 - et ati 5700 mais c'est le CPU qui compte ici). En fait, elle fait encore tourner sans accroc presque n'importe quelle grosse production 3D moderne avec des options graphiques en medium, voire parfois élevées.

J'ai donc testé ton jeu. Verdict : sous Firefox (dernière version, alors que le pékin moyen en est resté à la 3.x), j'ai bien 60fps la très grande majorité du temps... Sauf lors de ces quelques pics de 0,5s où l'on passe soudain à 4 ou 5 fps (20 fps affichés). Ce qui, pour un jeu de plateforme est calamiteux, les ralentissements se produisant bien sûr pile au moment où l'on ajuste le saut. Quant à Chrome (dernière version), pourtant plus rapide en général sur ce genre d'exercices, il bute à 20fps en permanence. Tous les tests ont été faits avec un PC au repos, etc.

Du coup, pour des jeux qui viseraient le casual gamer, en tout cas des gens qui ne renouvellent pas leur machine tous les 18 mois et dont le CPU n'est pas un foudre de guerre, les performances de la solution canvas me semblent au contraire totalement inadaptées pour tous les jeux réclamant une certaine fluidité (plateforme, etc).

En somme, si la limite est bien le CPU comme je le pense, l'utilisation de frameworks risque malheureusement d'empirer les choses. Je pense plutôt qu'il faut vraiment s'appuyer très peu sur le canvas, aussi peu que possible et tenir compte de cette limite dans le game design, même si c'est limitatif. Accessoirement, il doit sans doute être possible et préférable d'exécuter la logique du jeu (collisions, etc) indépendamment du système de rendu. Enfin, sous Firefox j'ai activé l'option "search as you type" ce qui m'interdit d'utiliser les touches du clavier dans des jeux en html (pas de pb avec flash par contre), un facteur tout de même très limitant.

davrous
Membre confirmé
le 12/12/2011

Citation:

Envoyé par DonQuiche

J'ai donc testé ton jeu. Verdict : sous Firefox (dernière version, alors que le pékin moyen en est resté à la 3.x), j'ai bien 60fps la très grande majorité du temps... Sauf lors de ces quelques pics de 0,5s où l'on passe soudain à 4 ou 5 fps (20 fps affichés). Ce qui, pour un jeu de plateforme est calamiteux, les ralentissements se produisant bien sûr pile au moment où l'on ajuste le saut. Quant à Chrome (dernière version), pourtant plus rapide en général sur ce genre d'exercices, il bute à 20fps en permanence. Tous les tests ont été faits avec un PC au repos, etc.

Salut DonQuiche,

J'aurais bien envie de te donner une réponse trollesque en te disant de tester sous IE9/10 ;-). Plus sérieusement, il y a vraiment des différences entre les navigateurs pour l'instant à ce sujet. Cela a été illustré dans cet article : http://www.phoboslab.org/log/2011/08/are-we-fast-yet par le développeur du site de benchmark suivant: http://www.phoboslab.org/log/2011/08/are-we-fast-yet . Pour Chrome, tu as essayé d'activer l'accélération matérielle en allant dans about:flags?

Sinon, ton retour est intéressant. J'ai pourtant testé sur différentes machines mais je n'avais pas eu de différences aussi importantes de FPS. J'avais vu que pour tous les navigateurs utilisant l'accélération matérielle par défaut ou non, il faut bien faire gaffe à la qualité de ses drivers. J'ai eu beaucoup de problèmes avec des chipset ATI par exemple, donc je ne recommande plus que des nVidia pour mes démos.

Bye,

David

DonQuiche
Membre Expert
le 12/12/2011

Bonjour Davrous.

Oui, Chrome et Firefox bénéficient tous deux de l'accélération matérielle (j'avais déjà vérifié dans about:flags sous Chrome et about:support sous Firefox). Note cependant que ce n'est pas le cas de la majorité des utilisateurs : Do users actually get hardware acceleration ?, mieux vaut donc ne pas compter dessus. Qui plus est, mes drivers ont été mis à jour il y a un ou deux mois. Et, surtout, je n'observe de problème nul part de ce côté-ci, que ce soit en jouant à un jeu ou en lorsque je code pour OGL ou D3D, ce qui me met naturellement aux premiers rangs pour connaître les capacités de la CG de ma machine.

Toutefois, je pense que tu as tort de regarder du côté de l'accélération matérielle. Pour un jeu de cette taille, avec au plus quelques dizaines de sprites, je parie que l'on pourrait très bien faire le rendu en GDI+ avec plusieurs centaines de fps. A mon avis, on voit plutôt les limites d'un système qui n'est pas prévu pour ça à l'origine, d'un langage relativement lent et de couches empilées les unes au-dessus des autres.

davrous
Membre confirmé
le 23/12/2011

Hello,

Pour continuer à tester HTML5 et les jeux, je me suis amusé à porter mon jeu sur Windows Phone avec PhoneGap dans cet article : http://blogs.msdn.com/b/davrous/arch...-phonegap.aspx

Pour le coup, on est encore très loin d'égaler le natif sur mobile pour les jeux pour l'instant même si je n'ai pas utilisé les meilleurs techniques d'optimisations.

Bye,

David

davrous
Membre confirmé
le 11/01/2012

Hello,

Nous avons aidé récemment à porter le jeu Cut the Rope d'Objective-C vers HTML5. Je vous invite à lire le retour d'expérience ici : http://origin.cuttherope.ie/dev/ . Il est intéressant et pile poil dans la thémarique de ce thread!

Bye,

David

zecreator
Membre actif
le 22/01/2012

Citation:

Envoyé par davrous

Bye,

David

Malheureusement,

Il faut voir ce même développement tourné sur mobile. C'est très lent. l'accélération matérielle des desktop aide énormément pour ce type de dev. Mais sur mobile, c'est une catastrophe.

C'est un constat. Aujourd'hui, quand on parle de HTML5, on parle aussi (et surtout?) de plateforme mobile.

Quand un client vous demande de faire un dev de jeu sous HTML5, il s'attend à voir le jeu tourné aussi bien que s'il avait été développé avec objective-C ou Android.

Prenez mon jeu :
http://www.freetalent.fr/demos/bubbleblast2

Il tourne très bien sous Firefox et IE. Mais sur mobile, c'est une catastrophe. Pourtant, techniquement c'est pas une usine à gaz. C'est optimizé.

Retrouvez la suite de la discussion

HTML5 est-il adapté pour les jeux ? Retour sur sa puissance et ses pièges

Best Of

Actualités les plus lues

Developpez.com

Communauté

Formez-vous

Evénements

Décideurs

Téléchargez