Programmation de jeux multijoueurs

Michel Buffa 2020-2021

Objectifs de ce cours

• Rappels sur les techniques de programmation de jeux vidéo “fluides” (à 60 images/s)
• Passer d’une implémentation “naïve” à une implémentation “dans les règles de l’art” avec notamment le concept “d’animation basée sur le temps”
• Introduction à la 3D
• Introduction aux “steering behaviors” ou “comportements réactifs”, une forme d’intelligence artificielle très utilisée dans les jeux vidéo.
• Ajout de l’aspect multi-joueurs dans les jeux d’action
• Principes de bases, techniques naïves pouvant fonctionner (notamment en LAN)
• Introduction aux techniques de “compensation de latence”
• Utilisation de technologies Web: JavaScript/Canvas HTML5 puis BabylonJS pour la partie “cliente”, NodeJS/WebSockets pour la partie “serveur”
• On commencera par les choses les plus simples et on ira petit à petit vers des choses plus complexes.

​

1- Rappels sur la programmation de jeu, introduction aux WebSockets

Lors de cette première séance vous verrez

• Les bases de la programmation d’un squelette de jeu “naïf” dans un canvas HTML5.
• Questionnement lors du TP sur les limites de cette approche
• Une introduction au concept de WebSockets
• Et une introduction à la bibliothèque socket.io qui est une couche au-dessus de l’API des WebSockets.
• Pendant le TP : la mise en place d’un squelette de jeu multijoueurs avec chat intégré.

Un peu d’histoire !

• 1996 : apparition de JavaScript
• 1998 Scott Porter crée la première librairie JS pour faire des jeux : 'Game Lib'.
• Donkey Kong dans le browser !
• 2000-2005 : DHTML (Dynamic HTML) et Brent Silby créé la ‘Game Lib 2’, nombreux jeux sur sa page perso.
• 2005: AJAX et Api du DOM permettent encore plus de choses, mais les plus beaux jeux sont en Flash
• même si on trouve FreeCiv en DHTML
• 2005 : Naissance du Web 2.0
• 2012 : HTML5 !

Éléments et APIs qui vont nous être utiles

• Le <canvas> HTML5 pour le dessin et l’animation fluide en 2D et en 3D
• L’API requestAnimationFrame pour l’animation à 60 images/s
• Vidéos et textures animées avec l’élément <video> et son API JavaScript
• L’élément <audio> et la WebAudio API pour les sons synthétiques, les effets sonores
• La DOM API pour clavier/souris, la gamePad API, la fullScreen API, la high definition Time API, pour la 3D WebGL API
• Pour le multijoueur : WebSocket API

Bases de la programmation d’un jeu à 60 images/s

• Principe : le jeu est simplement une boucle d’animation exécutée 60 fois par seconde (si possible)
• 1 - Effacer l’écran
• 2 - Dessiner les objets
• 3 - Gérer les interactions souris/clavier/manettes, les collisions, et modifier l’état du jeu (game over ? Changement de niveau) et des objets animés (ennemis, joueur etc) : position, vitesse, passage dans un autre état (explose, meurt, etc.), gestion score, vies, etc.
• 4 - Rappel de la boucle (on revient à l’étape 1)

Live coding d’un petit exemple avec canvas et boucle d’animation

Exemples utiles

• Micro exemple de jeu avec boucle et défini dans une classe JavaScript.�
• Exemple précédent mais qui compte le nombre d’images par secondes. Sera utile pour plus tard…�
• Mais si on peut dépasser les 60 images par secondes….!�
• Et si on veut déclencher des choses moins souvent, et si on a moins besoin de précision “haute définition” : setInterval, setTimeout. LIVE CODING.

Gestion des interactions souris/clavier

Live coding...

Introduction aux WebSockets

Introduction aux WebSockets

Ici d’anciens transparents sur les WebSockets, mais interactifs !

Vous verrez dans le TP une utilisation plus simple et plus puissante avec socket.io