ToulouseJS - Javascript multiplayer game

Réalisation 

d'un jeu multijoueuren JavaScript

Cyrille Bogaert@hugeen

Feedbacks

• Toxigame

• Impact

•Multijoueur

• Gamedesign

• Toxigame

• Impact

•Multijoueur

• Gamedesign

• Gestion des parties

• API de synchronisation

• Authentification des joueurs

Toxigame

DEMO

• Toxigame

• Impact

•Multijoueur

• Gamedesign

• Gestion des collisions

• Sprites et animations

• Editeur de niveaux

• Outils de debug

Comment fonctionne Impact ?

// Création de l’entité PlayerEntityPlayer = ig.Entity.extend({

});

// Chargement des sprites du joueur animSheet: new ig.AnimationSheet('player.png', 16, 16),

init: function(x, y, settings) { // Ajout d’une animation this.addAnim('run', 1.5, [1,2,3]); // Appel du constructeur parent this.parent(x, y, settings);}

• Toxigame

• Impact

• Multijoueur

• Gamedesign

Moteur javascript V8 coté serveur

Code non-bloquant

5 sec 10 sec0 sec

5 sec 10 sec0 sec

Bloquant (PHP/ Rails)

Non-bloquant (NodeJS)

Requête 1 Requête 2

Serveur httptraditionnelNavigateur socket.ioNavigateur

Hello World

// Un client vient de se connecterio.sockets.on("connection", function(client) {

});

// Le client reçoit un message du serveurserver.on("messages", function(data) { console.log(data.hello); // "world"});

Coté serveur Coté client

Requêtes traditionnelles VS Websockets

// Envoi d'un message au client client.emit("messages", { hello: "world" });

Toxigame

game.on('newPlayer', function(player) {

});

Application au jeux

Nouveau joueur (coté serveur)

toxigame.on("server.spawnPlayer", function(player) { });

Les autres joueurs reçoivent l’événement (coté client)

this.sendToAll({ spawnPlayer: player });

this.syncPlayer(player);

Comment le brancher sur Impact ?

// Création de l’entité PlayerEntityPlayer = ig.Entity.extend({

});

// Chargement des sprites du joueur animSheet: new ig.AnimationSheet('player.png', 16, 16),

init: function(x, y, settings) { // Ajout d’une animation this.addAnim('run', 1.5, [1,2,3]); // Appel du constructeur parent this.parent(x, y, settings);},

update: function() {

}

// Envoi de la position du joueur au serveur lorsqu’il bougeif(this.hasMoved) { toxicode.sendToServer({ synchronizePlayer: this.pos });}

• Toxigame

• Impact

•Multijoueur

• Gamedesign

GAMEDESIGN

• L'aspect multijoueur peut rendre un jeu addictif

• Rester simple et peaufiner !

DES QUESTIONS ?

Toxicode recrute(Javascript & Ruby on Rails)

www.toxicode.fr@toxicode_fr