Comment créer un jeu multijoueur pour navigateur

Choisissez le tour par tour, le temps réel ou une partie gérée par l'hôte, dites combien de joueurs et comment ils jouent ensemble, et Go Bananas crée un jeu que vos amis rejoignent depuis un lien.

Le multijoueur, c'est ce qui transforme un petit jeu en soirée entre amis. Les difficultés : garder les écrans de tous les joueurs d'accord entre eux, gérer ceux qui arrivent en retard ou qui décrochent, et partager le jeu sans que personne n'installe quoi que ce soit. Sur Go Bananas, vous décrivez le jeu, et le site s'occupe des salons, des invitations et des connexions. Ce guide présente les trois types de multijoueur, comment demander celui que vous voulez, comment se passe une partie à plusieurs, et ce qu'il faut garder en tête quand on conçoit un jeu pour plusieurs personnes.

Les trois types de multijoueur

Chaque jeu multijoueur de Go Bananas utilise l'une de ces trois façons de synchroniser les joueurs. Vous n'avez pas besoin de les nommer, mais les connaître vous aide à bien décrire votre jeu.

Type	Comment ça marche	Idéal pour
Tour par tour	Les joueurs jouent chacun leur tour, et chaque coup est envoyé au moment où il est joué	Jeux de plateau, jeux de cartes, jeux de mots, casse-têtes, stratégie
Temps réel	La position et les actions de chaque joueur sont envoyées plusieurs fois par seconde	Course, tir, jeux d'arène, sport, poursuites
Géré par l'hôte	Le jeu d'un joueur (l'hôte) applique les règles et envoie le résultat à tout le monde	Jeux avec une physique, des ennemis ou des chronos partagés que tous les joueurs doivent voir de la même façon

Le tour par tour est le plus tolérant. Rien ne se passe entre les coups, donc une connexion lente ne fait que retarder un tour. Les dames, les échecs, le morpion et les quiz s'y prêtent tous.

Le temps réel rend le jeu vivant mais demande plus de soin. Chaque joueur envoie son propre état environ 20 fois par seconde, et les autres écrans affichent ce qu'ils reçoivent. Il convient aux jeux où chaque joueur contrôle son propre personnage, comme une course ou un combat aérien.

Le mode géré par l'hôte est fait pour les jeux où autre chose que les joueurs bouge : un ballon que les deux équipes poursuivent, des vagues d'ennemis, une arène qui rétrécit. Un seul jeu décide de ce qui se passe, donc tout le monde voit le même ballon au même endroit.

Comment demander un jeu multijoueur

Soyez précis sur la façon dont les gens jouent ensemble. Une bonne demande répond à ces questions :

Combien de joueurs ? Un jeu peut en accueillir jusqu'à 16. Dites « 2 joueurs » ou « jusqu'à 8 joueurs ».
Tour par tour ou temps réel ? « Les joueurs jouent chacun leur tour » ou « tout le monde bouge en même temps ».
Les uns contre les autres ou en coopération ? Les joueurs s'affrontent-ils, ou font-ils équipe contre le jeu ?
Des équipes ? « Deux équipes de 3 », « chacun pour soi ».
Qu'est-ce qui termine la partie ? Un score à atteindre, un chrono, le dernier joueur en lice.

Par exemple :

Un jeu de course en temps réel vu de dessus, jusqu'à 6 joueurs sur un même circuit aux virages serrés. Trois tours, le premier arrivé gagne. Chaque joueur choisit la couleur de sa voiture. Afficher la position de chacun sur une mini-carte.

Ou :

Un jeu au tour par tour pour 2 joueurs : un puissance 4 sur une grille de 7 sur 6. Afficher à qui c'est le tour, surligner la ligne gagnante et proposer une revanche.

Chaque jeu a aussi un mode solo avec un bouton « Play vs AI » (jouer contre l'IA) et des niveaux Easy, Medium et Hard (facile, moyen, difficile), pour qu'on puisse l'essayer seul. Quand un jeu démarre en mode multijoueur, il saute ce menu et commence tout de suite.

Comment se passe une partie à plusieurs sur Go Bananas

Ouvrir un salon

Ouvrez le jeu et choisissez Multiplayer (multijoueur) au lieu de Play Solo (jouer en solo). L'option Multiplayer n'apparaît que pour les jeux faits pour plusieurs joueurs.
Choisissez Create Room (créer un salon). Vous devenez l'hôte.
La salle d'attente affiche un code de salon et un lien sous « Share this link with friends » (partagez ce lien avec vos amis), avec des boutons pour le copier ou ouvrir le menu de partage de votre téléphone.
Vos amis vous rejoignent, et leurs noms apparaissent dans la liste des joueurs.
Seul l'hôte peut appuyer sur Start Game (lancer la partie).

Rejoindre une partie

Il y a deux façons d'entrer :

Le lien. Ouvrir le lien d'invitation affiche une fenêtre Join Game (rejoindre la partie) : « Your friend made this game with AI! » (votre ami a créé ce jeu avec l'IA !), une case pour votre nom et un bouton Join Game. Ni compte ni installation nécessaires.
Le code de salon. Choisissez Multiplayer, puis Join Room (rejoindre un salon), et tapez le code à 6 caractères. Les codes excluent O, 0, I et 1, pour qu'on ne puisse pas les confondre.

On peut rejoindre une partie déjà en cours s'il reste une place libre. Si toutes les places sont prises, on voit « Room is full » (salon complet).

Quand quelqu'un part ou perd la connexion

Les téléphones perdent la connexion, et les gens changent d'appli pour envoyer l'invitation. Go Bananas l'a prévu :

Un hôte qui change d'appli pendant l'attente dans le salon garde le salon, donc l'invitation marche toujours quand il revient.
Si l'hôte part pour de bon, un nouvel hôte est choisi parmi les joueurs encore connectés. Quand il ne reste personne, le salon ferme.
Un joueur qui perd la connexion garde sa place pendant 15 minutes.
Le jeu essaie de se reconnecter tout seul, 5 fois, à 5 secondes d'intervalle, et affiche « Connection lost — Reconnecting » (connexion perdue, reconnexion en cours) pendant ce temps.
Un salon sans activité ferme après 30 minutes, et tout salon ferme après 4 heures.

Concevoir un jeu pour plusieurs joueurs

Un jeu multijoueur doit être équitable et cohérent sur chaque écran. Ces habitudes aident, et vous pouvez les demander directement.

Donnez à chaque joueur son propre point de départ. Des joueurs qui apparaissent les uns sur les autres commencent la partie désorientés. Dans les jeux de plateau, chaque joueur doit voir le plateau de son côté.

Laissez un seul jeu décider du hasard partagé. Si un paquet de cartes est mélangé ou qu'un terrain est généré au hasard, l'hôte doit le faire une fois et envoyer le résultat. Sinon, chaque écran lance ses propres dés et les joueurs se retrouvent dans des parties différentes.

N'envoyez jamais d'informations cachées. Si les joueurs ont des mains secrètes ou des rôles cachés, n'envoyez pas du tout les secrets des autres joueurs. Tout ce qui est envoyé à un navigateur peut être lu par un joueur curieux.

Pour les choix simultanés, verrouillez puis révélez. Dans les jeux du type pierre-feuille-ciseaux, chaque joueur verrouille d'abord son choix sans le révéler. Les choix ne sont montrés qu'une fois que tout le monde a verrouillé le sien.

Prévoyez la latence. Les mises à jour en temps réel arrivent environ 20 fois par seconde, et chacune met un peu de temps à voyager. Lissez le mouvement des autres joueurs au lieu de les faire sauter d'une position à la suivante, et décidez des impacts à un seul endroit pour que deux écrans ne se contredisent pas.

Décidez de ce qui se passe quand quelqu'un part. Son personnage reste-t-il, disparaît-il ou est-il repris par l'ordinateur ? Le match s'arrête-t-il s'il ne reste qu'un joueur ? Dites-le dans votre demande.

Gardez des messages légers. Envoyez ce qui a changé, pas tout le jeu, et restez sous environ 60 messages par seconde et par joueur.

Pour les développeurs : les outils multijoueur

Les jeux Go Bananas reçoivent une connexion toute prête : un jeu ne doit donc pas ouvrir son propre WebSocket. En mode multijoueur, window.gameOptions décrit la session (mode, playerId, isHost, players, roomCode, playerName), et les raccourcis window.playerId, window.isHost et window.playerName sont définis. En mode solo, window.mp est un substitut qui ne fait rien, pour que le même code tourne aussi en solo.

Pour envoyer, via window.mp :

sendTurn(data) : un coup dans un jeu au tour par tour. N'utilisez pas de clé nommée type dans data, sinon le message est ignoré.
sendState(state) : l'état de votre propre joueur dans un jeu en temps réel. Il est limité à environ 20 envois par seconde.
sendAction(action) : un événement ponctuel dans un jeu en temps réel, comme un tir ou un saut.
sendHostState(state) : l'état partagé, envoyé par l'hôte dans un jeu géré par l'hôte.

Pour recevoir, définissez des fonctions sur window : onRemoteTurn, onRemoteState, onRemoteAction, onHostState, onPlayerJoined, onPlayerLeft, onPlayerDisconnected, onPlayerReconnected et onNewHost.

// Définissez les fonctions de réception au premier niveau du script, pas dans une
// fonction qui s'exécute plus tard, sinon les messages arrivés tôt sont perdus.
window.onRemoteTurn = function (turn) {
  applyMove(turn.column);      // les champs envoyés par l'autre joueur
  myTurn = true;
  draw();
};

window.onPlayerLeft = function () {
  showMessage('Votre adversaire a quitté la partie');
};

window.onNewHost = function () {
  // L'hôte est parti et un nouveau a été choisi. Si ce jeu est maintenant l'hôte,
  // il prend le relais pour envoyer l'état partagé.
};

function dropPiece(column) {
  if (!myTurn) return;
  applyMove(column);
  myTurn = false;
  draw();
  window.mp.sendTurn({ column: column });   // vous ne recevez jamais votre propre message
}

Quelques règles pour que tout fonctionne :

window.mp est prêt une fois vos scripts exécutés : envoyez donc depuis des événements du jeu, pas depuis les premières lignes du script.
L'expéditeur ne reçoit jamais son propre message en retour. Appliquez votre coup localement, puis envoyez-le.
Gardez chaque objet d'état bien en dessous de 1 Mo.
En multijoueur, « Play Again » (rejouer) recharge le jeu pour que tous les joueurs repartent ensemble de zéro.