Développer des jeux web sans flash

Introduction
Il y a quelques années encore, lorsque l’on parlait jeux, il fallait lancer son Macromedia Flash (depuis racheté par Adobe)
Ensuite sont apparus des libraries et autres compilateur pour générer des fichiers swf (flash) sans le logiciel propriétaire (Mstasc, Haxe…)
Aujourd’hui, on peut développer de petits jeux 2D sans flash, grâce à l’HTML5, et pour cela, je vais vous faire découvrir quelques outils/librairies bien pratique

note: je ferais prochainement un article sur Haxe (pas le déodorant)
Mise à jour: billet publié http://blog.developpez.com/ducodeetdulibre/p12151/non-classe/haxe-coder-une-fois-deployer-partout-ou-presque

Le logiciel Construct2
Certains logiciels permettent de faire du wysiwig* à base de drag and drop et de popup de paramétrage de créer des jeux HTML5 en toute simplicité.
Construct2, édité par Scirra fait parti de ces logiciels, il permet bien plus encore: selon la licence utilisé, on peut générer des applications IOS, Windows phone, Android…
Mais ici, interessons nous à sa capacité HTML5: son interface intuitive et assez ergonomique permet facilement de créer ses premiers jeux sans avoir à mettre les mains dans le cambouis
Malheureusement, il n’est disponible que sous windows, je vous invite à le tester si vous avez windows, ou une machine virtuelle tournant sous windows ;)
Le site: https://www.scirra.com/ (regardez la vidéo de démonstration)

*WYSIWIG Why You See Is What You Get (interface qui permet de voir le rendu en temps réel)

La bibliothèque Html5Quintus
Si vous préférez/aimez coder, vous apprécierez plus des librairies HTML5 qui comble le manque de confort de cette nouvelle technologie.
En effet, lorsque vous êtes habitué à faire des jeux sous flash, vous êtes habitué à un minimum de confort: comme créer un clip, le déplacer/le modifier le rendre invisible.
Ici, en HTML5, tout est à gérer: si vous souhaitez créer un objet image et le déplacer vers la droite: il faudra le dessiner sur le canvas, puis effacer le canvas, et le redessiner à sa nouvelle position (d’ou l’utilité d’avoir autant de canvas que d’élements dynamique: un peu comme des calques)
Mais grâce au travail de nombreux développeurs, vous pouvez apprécier des librairies qui vous permettront facilement de faire des animations, de gérer les collisions, mais aussi d’appliquer des lois physiques sur vos élements.
HTML5Quintus a l’avantage de vous permettre de la tester sans l’installer sur leur site:
En effet vous pouvez modifier le code d’un modeste jeu de plateforme pour voir l’incidence sur le jeu: modifier le comportement des ennemies pour qu’ils disparaissent à votre contact, ou placer le chateau directement sur vous pour gagner à chaque fois :)
Cette librairie est très simple à utiliser et vous ravira si vous souhaitez faire de petits jeux 2D bien sympathique

Le cas Turbulenz
Turbulenz est un cas à part c’est un SDK qui utilise majoritairement WebGL et qui peut vous permettre de développer des jeux très puissants comme « Save the Day » https://turbulenz.com/games/save-the-day

Le site: http://biz.turbulenz.com/turbulenz

Conclusion
Comme vous avez pu le voir, vous avez le choix dans les armes pour utiliser votre navigateur comme plateforme de Jeux.
Les avantages sont nombreux:

  • Permettre de jouer sur votre site
  • Multiplateforme
  • Pas d’installation, on peut jouer de n’importe ou sans avoir besoin de droits particuliers
  • Plus facile à promouvoir par son coté web (un lien dans un email/sur twitter et voila)

Bien sur, il existe d’autres librairies, je vous en ai présenté ici un échantillon, mais n’hésitez pas à partager vos ressources ;)
Et vive l’HTML5 :)