 |
Mineure DS4H Jeux Multijoueurs 2020-2021
De $1
Table des matières- 1. Introduction
- 2. Séance 1 : rappels sur les bases de la programmation d'un jeu, utilisation naive de websockets pour la synchronisation multi-joueurs
- 2.1. TP1 : implémentation d'un squelette très simple et naïf de jeu multi-joueurs
- 3. Séance 2 : multiplayer games network synchronization algorithms
- 4. Séance 3 : let's start programming the multiplayer layer
- 5. Séance 4 : more explanations and examples on the implementation of the multiplayer layer (hybrid session in room C4)
- 6. Séance 5 : introduction to 3D with BabylonJS
- 7. Séance 6 : collisions, physics engine, triggers, actions, action managers
- 8. Séance 7 : particles, asset manager, sound and music, rays, multiple cameras
- 9. Séance 8 : FPS camera, crosshair, gun shots, hosting on heroku, etc.
- 1. Introduction
- 2. Séance 1 : rappels sur les bases de la programmation d'un jeu, utilisation naive de websockets pour la synchronisation multi-joueurs
- 2.1. TP1 : implémentation d'un squelette très simple et naïf de jeu multi-joueurs
- 3. Séance 2 : multiplayer games network synchronization algorithms
- 4. Séance 3 : let's start programming the multiplayer layer
- 5. Séance 4 : more explanations and examples on the implementation of the multiplayer layer (hybrid session in room C4)
- 6. Séance 5 : introduction to 3D with BabylonJS
- 7. Séance 6 : collisions, physics engine, triggers, actions, action managers
- 8. Séance 7 : particles, asset manager, sound and music, rays, multiple cameras
- 9. Séance 8 : FPS camera, crosshair, gun shots, hosting on heroku, etc.
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
TP1 : implémentation d'un squelette très simple et naïf de jeu multi-joueurs
Dans ce premier TP vous allez faire fonctionner un premier squelette de jeu très simple à l'aide d'un client basé sur le canvas HTML5. Vous utiliserez une animation à 60 images par secondes pour déplacer un joueur à l'écran à l'aide du clavier ou de la souris.
Dans un second temps vous installerez un serveur NodeJS capable de servir votre jeu (en renvoyant par exemple sa page HTML).
Dans un troisième temps vous transformerez votre serveur pour qu'il devienne "un serveur de websockets" et permette par exemple aux différents joueurs de "chatter". Enfin, en vous bansant sur le principe du chat, vous échangerez des messages spéciaux contenant la position de chaque jouer. On Modifiera aussi les clients pour qu'ils envoient leur position chaque fois qu'ils bougent, et qu'ils dessinent l'ensemble des joueurs présents dans la partie chaque fois que le serveur renvoie des positions modifiées.
Séance 2 : multiplayer games network synchronization algorithms
Séance 3 : let's start programming the multiplayer layer
You will start from the last example done during the course :
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)
Séance 5 : introduction to 3D with BabylonJS
Course material :
Assignment for next week :
Pour la semaine prochaine vous avez un TP à rendre (m'envoyer par mail le lien vers votre repo github)
J'ai écris ceci dans le dernier slide du cours (travail à faire)
Essayez d'améliorer le dernier exemple du cours :
- Ajoutez d'autres modèles (voir mixamo.com par exemple ou les ressources en ligne babylonjs)
- Essayez de faire bouger les modèles animés du "Dude" différemment (exemple : faire le tour du terrain, faire un rectangle de ronde)
- Changez les couleurs, la texture du sol, les éclairages
- Modifiez le modèle du joueur (au lieu du cube, pourquoi pas un des Dude ?)
- etc.
- Soyez créatifs !
Assignment for next lesson
- Try to improve the last example from the course :
- add other models (see mixamo.com for example or babylonjs resources)
- Try to make the Dudes move differently (ex: along a rectangular path ?)
- Change colors, texture of the ground, lights
- Change the player cube for something better (why not one of the Dudes ?)
- Be creative !
Séance 6 : collisions, physics engine, triggers, actions, action managers
Course material :
Séance 7 : particles, asset manager, sound and music, rays, multiple cameras
Course material :
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
|
Vous n'êtes pas connecté. Connexion