Mineure DS4H Jeux Multijoueurs 2020-2021

Introduction

Dans ce cours nous verrons comment programmer des jeux "d'action" multijoueurs. On commencera en 2D par une approche simple, naïve, pour aller vers des solutions sophistiquées et adaptatives. Nous verrons des exemples simples en 2D puis passerons ensuite à la 3D. De simples algorithmes de "comportements intelligents" seront aussi implémentés pour les entités contrôlées par l'ordinateur (ex: suivre un chemin, suivre le joueur, attaquer, fuir, atteindre un but, marcher en formation etc.)

Séance 1 : rappels sur les bases de la programmation d'un jeu, utilisation naive de websockets pour la synchronisation multi-joueurs

• Video de ce premier cours (9h-12h) 
• Support de cours (slides) mais assortis de live coding en direct, sur la programmation d'un petit moteur de jeu 2D à l'aide du canvas HTML5.
• Premier squelette de jeu mono joueur. 

Séance 2 : multiplayer games network synchronization algorithms

• Slides / course content  : Multiplayer games algorithms. 
   
• Zip file of live coding during the course  (player is a square, circle target, collision detection, obstacles etc.)
• Video of the course
  
   
• How to draw and animate and interact in a HTML5 canvas : follow modules "Graphics and Animation" from the HTML5 coding essential and best practices MOOC I wrote for the W3C.
• How to better handle keys for web based games, see the HTML5 Games and Apps MOOC I wrote for the W3X, section "HTML5 game framework".

Séance 3 : let's start programming the multiplayer layer

You will start from the last example done during the course :

• Zip file of live coding during the course  (player is a square, circle target, collision detection, obstacles etc.)

And we will start adding some "tooling" for implementing some of the algorithms seen during the previous seance (in this set of slides) :

• Implement a "ping" measure from server to client.
  • The latency is 2 * this ping : on the server side, we will measure the current time, then send a "ping" event through socket.io to the client. The client will send back a "pong" event. When the servers gets it, it computes the elapsed time.
  • The server will send every 500ms this "ping" event (the latency will be measured 2 times per second)
  • When the "pong" arrives, it will send back to the client a "timedata" message to the client, that will displays it on the web page.
    • This "timedata" message will contain : 1) the ping measure and 2) "the server time" (elapsed time since the client connected to the server, measured on the server side)
       
• Implement a "heartbeat" sent by the server a certain amount of times per second  (this amount will be stored in a variable named "nbUpdatesPerSeconds"). So, every 1000/nbUpdatesPerSeconds, we will call a heartbeat function on the server, that will send a "heartbeat" message to the client. For the moment, we will send nothind with this event. Later, we will send the "updated game state".
   
• Implements a way to change the previous value from the client, and display it. Beware, this value must be synchronized on all connected clients. We suggest that the client will receive the value of the nbUpdatesPerSeconds variable first when it connects to the server, then only when one client changes it. Changes from client will be done using a "changeNbUpdates" event.
   
• The client will have also a "updateClient" function called every nbClientUpdatesPerSeconds, that will send its status to the server.