Web Sciences 2016-2017, Master 1 IFI

De $1

Version de 14:06, 24 Oct 2020

cette version.

Revenir à liste des archives.

Voir la version actuelle

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

Un jeu que j'aimerais bien que vous refassiezhttp://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.)