Introduction
Ce billet fait suite au billet: http://blog.developpez.com/ducodeetdulibre/p12434/developpement/journal-de-bord-creation-dun-rts-en-html5-jour-15
Aujourd’hui nous allons décliner ce jeu en une version multiplayer
Pour cela, nous allons utiliser les websockets ainsi qu’un server node.js
Présentation de node.js et socket.io
Node.js est un serveur javascript utilisant le moteur de chrome, plus d’infos sur le site de nodejs: http://nodejs.org/
Socket.io est un serveur temps réel qui permet de transmettre des messages.
Les deux réunis couplés aux nouvelles capacités d’html5 permettent de mettre en place un jeu multi-joueur en temps réel.
Installons le serveur
Sur un serveur ubuntu, ouvrez un terminal et lancez la commande suivante:
1 | sudo apt-get install nodejs |
Pour les utilisateurs windows et mac, rendez-vous sur le site de nodejs: http://nodejs.org/
Installer ensuite socket.io
Pour cela il faut le binaire npm
Installez le avec la commande
1 | sudo apt-get install npm |
Puis installer le packet socket.io
1 | npm install socket.io |
Principe de base du jeu multi-player
Le principe de ce serveur tient dans un concept evenementiel: un client peut emettre un message et également être à l’écoute.
Le serveur est dans le même cas, il peut emettre soit vers l’émetteur (comme une réponse), soit vers tous les autres clients connectés.
On peut ainsi imaginer à chaque déplacement, avertir les autres joueurs, et vice versa.
Mise en place dans notre jeu
Pour ce RTS, il y a plusieurs solution différente et efficace.
Ici on va choisir d’avoir le premier joueur maitre, qui fera tourner le cycle du jeu et diffusera les ordres d’affichage des unités et batiments.
Pour cela, on va ajouter dans les classes Unit et Build, des copie de certains méthodes
1 2 3 | buildBroadcast:function(){ socket.emit('unit.build',this.id,this.x,this.y); }, |
Et coté serveur: (nodejs)
1 2 3 4 | socket.on('unit.build',function(id,x,y){ socket.broadcast.emit('unit.build',id,x,y); socket.emit('unit.build',id,x,y); }); |
On indique également dans le fichier rtsMultiplayer dans la fonction load, de ne créer la sequence que si le joueur est la team « bleu »
1 2 3 | if(oGame.team=='blue'){ setTimeout(run,fps); } |
Ainsi, le joueur bleu, va avoir une séquence normale: toutes les N milli secondes, il boucle pour raffraichir, mais au lieu de raffraichir localement, il broadcast à tout le monde les nouvelles positions: c’est un peu l’intelligence du serveur multi-joueur.
Vous avez compris l’idée: chaque methode d’affichage d’unité et batiment est remplacé par une méthode broadcastant ceci
Ansi chaque joueur recoit l’ordre d’afficher l’unité/batiment par le server socket.
J’ai mis à jour le github, mais pour l’instant il y a quelques bugs: on ne peut pas initié de ronde d’or/bois…
On peut déjà connecter plusieurs navigateurs (au moins 2 joueurs) et voir sur chacun d’eux les personnages bouger simultanément.
Je reviendrais ces prochains jours pour corriger ces bugs
Pour lancer le serveur node.js
Dans le repertoire où sont situé les fichiers du github
1 | nodejs serverRtsHtml5.js |
Ceci lancera le serveur nodejs du jeu
Le github
Le projet GitHub : https://github.com/imikado/rtshtml5