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/
•