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

• Video of this course 

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.)
• BETTER : here is the github repo of this example (repo will be up to date)

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

• Modify the existing code to use "time based animation" in the animation loop! All moves (players, obstacles) will depend on the time elapsed since the last image. See this example from the MOOC "HTML5 Apps and games".
   
• Learn how to measure time with Date.now(), the JavaScript high-resolution timer, we will use this a lot. In order to execute periodic functions, we will also rely on setInterval(function, delayInMs). We will have such a periodic function on the client side (for sending updates to the server), and on the server side (for sending game states to the connected clients).
   
• 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)
      
       
• Find a way to delay artificially all the messages sent by the client. We will call this delay "artificial latency", it will be useful for simulating latency when running client and server on a local machine. We suggest write a "send(eventType, data)" function, that will use setTimeout(function() { socket.emit(...); }, delay); for that. Add some slides to set this delay (default = 0, max=300ms).
   
• 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.
  
  
• Try now to send every 100ms (nbClientUpdatesPerSeconds = 10), the current player status (x, y, speed, clientTime) to the server. The server, will "animate" server side this player, and send back to the client its own new position of the player (through the "heartbeat" function)
• The client will receive its postion computed by the player ("heartbeat" event). Try to display it in the client.
  • Normally, there should be only a small difference between the position drawn and computed by the client and the one computed by the server.
  • Try to add some artificial latency, or change the number of updates per second on the server. See what is happening.
  • Try to display ONLY the current player when the server sends back its position
     
• What we have is 1) the player animated client side, like in earlier versions of the game, is a sort of "prediction" (cf the course slides), the position sent by the server is the "master" one. Normally, the next step is "reconciliation", where the client tries to "follow" as close as possible the position sent by the "master server" (we call it an "authoritative server).
   
• Read again the slides about "prediction and reconciliation", try to implement this correctly this time. This work will be your first assignment.

Séance 4 : more explanations and examples on the implementation of the multiplayer layer (hybrid session in room C4)

• Video of this course Part 1 (9h-10h15) and 
• Video of this course Part 2 (10h30-12h) 

Séance 5 : introduction to 3D with BabylonJS 

Course material :

• Slides 
• Video from this course (9h-12h)
   
• French lectures
  • Détails sur les couleurs, lumières, matérials 
  • Rappels sur les transformations géométriques 2D et 3D 

• Live coding examples from the course : Github repository here  

Assignment for next week :

Séance 6 : collisions, physics engine, triggers, actions, action managers

Course material :

• Slides 
• Video of the course (9h-12h) 
• Video bonus : meeting with David Cathue, creator of BabylonJS (30mns)
   
• Live coding examples from the course today see "tp3" folder : Github repository here

Séance 7 : particles, asset manager, sound and music, rays, multiple cameras

Course material :

• Slides 
• Video 1 of the course (9h-10h30) 
• Video 2 of the course (10h45-12h)
   
• Live coding examples from the course, today see "tp3" folder : Github repository here

Séance 8 : FPS camera, crosshair, gun shots, hosting on heroku, etc.

Course material :

• Slides 
• Video 1 of the course (9h-10h30) 
• Video 2 of the course (10h45-12h)
   
• Live coding examples from the course, today see "tp4" folder : Github repository here
  
  
• Game folder ready to be deployed to Heroku (includes index.js, a minimal NodeJS server) : GitHub repository
  • cd into the game folder
  • npm install
  • npm run start to run the server, the game should be available on http://localhost:3000
  • If you push this to a github repo, then link this repo to a Heroku application, it should work. See the section in the slides with screenshots, on how to do this...

IDEA for a small, simple and fun game : do a remake of https://www.youtube.com/watch?v=ClQgxTgIQNk