Moteurs de jeu en HTML5
La liste suivante donne quelques exemples de moteurs de jeu implémentés avec HTML5 et JavaScript :
- Construct 2 : Un des premiers moteurs en HTML5 avec WebGL activé. Il exporte simplement en HTML5 et JavaScript. Il utilise seulement Canvas et il est extensible avec des modules en JavaScript.
- Isongenic Engine : Un des moteurs les plus prometteurs disponibles aujourd'hui. Avec une prise en charge du multi-joueur massif en réseau, il repose sur Node.js et MongoDB, et permet d'utiliser Canvas ou les graphismes basés sur le DOM.
- Impact
- Crafty
- PlayCanvas: Un moteur de jeu collaboratif, hébergé en ligne, avec un éditeur visuel et un éditeur de code dans le navigateur.
Technologies utiles
Les éléments suivant peuvent être utile pour le développement d'un jeu basé sur des technologies Web.
- Canvas : graphismes 2D
- WebGL : graphismes 3D
- Audio : l'élément HTML5 <audio>, Mozilla Audio Data API
- WebSockets : peuvent être utilisés pour une communication en temps réel entre un joueur et un un serveur de jeu, pour la prise en charge de jeux multi-joueurs.
- Node.js: Node est souvent utilisé comme serveur multijoueur, en contrôlant la logique et en prenant en charge les connexions WebSockets aux joueurs. Il peut être utilisé pour l'authentification et le stockage de données, ce qui permet de conserver les parties des joueurs lors de plusieurs sessions de jeu. Ceci est possible assez facilement grâce aux modules tiers comme Socket.IO et WebSockets et d'autre qui gèrent Redis et MongoDB pour le stockage par exemple.
- Local storage est génial pour stocker des données en local sur l'appareil du joueur. De cette manière, vous pouvez mettre en cache les données du jeu et permettre au jeu de les récupérer lorsque le joueur reprend sa partie.
- La Full Screen API permet d'étendre n'importe quel élément HTML pour remplir l'écran de l'utilisateur, même si le navigateur n'est pas déjà en plein écran. L'implémentation de Mozilla n'est pas encore parfaite car vous ne pouvez pas encore utiliser l'ensemble du clavier en mode plein écran, mais c'est dans la dernière compilation Nightly et cela fonctionne pour ce qui est du reste.
- Application cache : Une des principales différences entre les applications Web et les applications natives est le fait que les applications natives peuvent être éxécutées hors-ligne. Les nouvelles technologies comme le cache application permettent à un site web ou une application web de mettre en cache les ressources nécessaires à l'exécution même hors-ligne. Cela inclut les fichiers JavaScript, CSS et les images. Combiner cette technique avec une utilisation intelligente de choses comme localStorage permettra à votre jeu de fonctionner même si la connexion Internet tombe. Vous synchroniserez tous les changements lorsque la connexion reviendra.
Tous les navigateurs ne prennent pas encore en charge chaque partie d'HTML5. Par exemple, Canvas n'est pas pris en charge par défaut par Internet Explorer avant la version 9. Cependant, vous pouvez utiliser Explorer Canvas pour reproduire la fonction Canvas, mais cela n'est pas idéal et ne fonctionne pas aussi bien. Les WebSockets sont pris en charge par IE seulement à partir de la version 10, et ne sont pas pris en charge par le navigateur de base d'Android. Encore une fois, vous pouvez contourner cette limitation en utilisant Flash pour les sockets, comme avec Socket.IO. WebGL possède aussi une prise en charge suppléante sans aucun support pour IE, Safari et Opera nécessitant une version de développement.
Template de Jeu
Vous pouvez utiliser le template WebGameStub pour démarrer rapidement un jeu en HTML5, ou pour vous inspirer pour les bonnes pratiques.
APIs futures
- La Gamepad API est une des améliorations majeures arrivant pour les manettes de jeux. Google et Mozilla travaillent ensemble sur l'implémentation de cette fonctionnalité et il existe une compilation expérimentale de Firefox disponible au public avec cette fonctionnalité pris en charge. Ce qui est le plus intéressant à propos de l'API Gamepad est qu'elle va peut-être démocratiser les jeux HTML5 sur TV ou consoles. Qui veut utiliser un clavier et une souris assis sur son canapé ?
- Le Pointer Lock API est une tentative d'amélioration de la souris comme périphérique d'entrée. Elle serait utilisée dans des situations comme les jeux et les affichages 3D où la position de la souris est utilisée pour pivoter ou effectuer des rotations dans un espace 3D. Pour le moment, le curseur peut toujours sortir de l'écran provoquant des problèmes lorsque vous souhaitez cliquer sur quelque chose dans votre jeu. Avec cette nouvelle API, vous pourrez verrouiller la position de la souris et ainsi éviter qu'elle sorte de l'écran.