Introduction
Cette année nous allons étudier les techniques de création d'un jeu vidéo multijoueurs, dans le style retro-gaming. Au travers de ce long TP fil rouge, vous apprendrez le langage JavaScript, les techniques d'animation, detection de collision, animations à base de sprites (images animés), les effets de particules, la gestion des événements (clavier, souris, gamepad), comment faire des sons/musiques pour un jeu, avec les contraintes spécifiques qui vont avec, et vous apprendrez à structurer du code JavaScript, à maitriser les aspects asynchrones du langage (la partie la plus complexe), à faire de l'objet en JavaScript, etc.
Séance 1: comprendre les bases de JavaScript, du dessin, de l'animation, gestion des événements, écriture du squelette d'un moteur de jeu en utilisant une conception "Black Box"
Préliminaires :
- s'inscrire à deux MOOCs : HTML5 (part 1 et part 2) sur le site W3Cx
- Les chapitres pertinents sont les Weeks 3 et 4 de premier MOOC (Canvas API), et Weeks 2 du second MOOC (game programming with HTML5), on utilisera aussi la fin de la Week 1 sur WebAudio plus tard.
Premier exemple fait en cours :
Séance 2: aspects multijoueur en réseau, WebSockets
- Support de cours : transparents ici
- TP sur les WebSockets version simple (chat multi participants mais sans salles virtuelle, montre aussi comment syncrhoniser des positions dans un jeu).
Un jeu que j'aimerais bien que vous refassiez: http://cachacachacom.appspot.com/Blo...AZU/index.html mélange de casse-brique et de shoot (avec les bullets)
Comment charger images, sons, ressources diverses (on appelle cela des "assets") avant de démarrer le jeu:
- En Ajax avec des requêtes XhR2: voir assets.js et la fin du fichier game.js de ce jeu développé à partir des modules du Mooc HTML5 part 2: gameForMooc.zip
- Vous pouvez aussi préférer la syntaxe plus moderne de l'API fetch (tourne dans les browsers récents) qui utilisent les promesses de ES2015/ES2016. Ici un exemple qui charge deux sons et les décode avant de les utiliser: http://jsbin.com/bituzu/edit?html,js (cet exemple utilise aussi un polyfill pour que ça marche dans les anciens browsers).
Quelques ressources pour faire un shoot'em'up old school. Note : ceux qui font un shoot "bullet hell" ne devront pas sync les balles mais juste les parties avec éventuellement des interactions entre joueurs envoi de malus, inversement des touches, à vous de voir... Pour des jeux plus "simples", on peut imaginer un vrai jeu synchrone (à la doodle jump, cassebrique, etc.)
CONCOURS W3C JEU / AUDIO VISUALISATION / CSS ICI : https://www.w3.org/2017/WWW26/contests.html
A FAIRE POUR LA PROCHAINE SEANCE (noté, pas de retard accepté, je ramasse en classe):
- Avoir un petit proto de jeu qui peut se jouer à plusieurs
- Si vous êtes pas forts ou perdu ou pas assez de temps : suivre le MOOC jq la fin de la partie "html5 games", et avoir un petit jeu avec un truc que vous bougez au clavier et à la souris, et quelques obstacles/ennemis qui bougent et des collisions.
Ex: raquette et balles, vaisseau et aliens, bonhomme et obstacles, etc.
- Ensuite vous mettez votre petit jeu en mode 2 joueurs locaux avec touches sur le même clavier. Il faudra avoir non pas une variable qui correspond au joueur mais un tableau de joueurs.
- Ensuite vous mettez votre jeu dans le TP du chat. Là on doit avoir le chat qui marche et votre jeu qui marche, sans synchronisation.
- Ensuite vous essayez de syncrhoniser la position des joueurs (cf les rectangles verts), on peut échanger directement les positions comme dans le TP websockets (sendPos, updatePos).
- Vous pouvez réfléchir à syncrhoniser la création des obstacles/niveaux/ennemis pour que sur chaque écran on ait l'impression que le même jeu se déroule.