Web Sciences 2016-2017, Master 1 IFI

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 :

• Ici sur jsbin : http://jsbin.com/dujowo/edit?html,cs...console,output
• Ici en zip et fichiers : WebSciences2017.zip 

 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).
  • Autre version du TP, avec jQuery et chat multiroom. 

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

• La librairie Bullet ML version JS, exemples dans le github et y'a aussi un tutorial. Vous avez aussi plein de patterns toutes faites en XML dans la page de Kenta Cho (auteur de nombreux shmups et de bulletML).
• Cherchez aussi le shmup tmshooter qui l'utilise pour voir ce qu'elle a dans le ventre.
• Ici plein de shoots en JS 
• http://jlongster.com/Making-Sprite-b...es-with-Canvas
• http://jp.wgld.org/jsstg/
• http://jp.wgld.org/jsstg/2015f/
•  
• Un super champ d'étoiles programmable (starfield): http://codepen.io/bigsweater/pen/MyqZdQ 

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):

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