toulousejs - javascript multiplayer game

16
Réalisation d'un jeu multijoueur en JavaScript Cyrille Bogaert @hugeen Feedbacks

Upload: cyrille-bogaert

Post on 09-Aug-2015

890 views

Category:

Technology


13 download

TRANSCRIPT

Page 1: ToulouseJS - Javascript multiplayer game

Réalisation 

d'un jeu multijoueuren JavaScript

Cyrille Bogaert@hugeen

Feedbacks

Page 2: ToulouseJS - Javascript multiplayer game

• Toxigame

• Impact

•Multijoueur

• Gamedesign

Page 3: ToulouseJS - Javascript multiplayer game

• Toxigame

• Impact

•Multijoueur

• Gamedesign

Page 4: ToulouseJS - Javascript multiplayer game

• Gestion des parties

• API de synchronisation

• Authentification des joueurs

Toxigame

Page 5: ToulouseJS - Javascript multiplayer game

DEMO

Page 6: ToulouseJS - Javascript multiplayer game

• Toxigame

• Impact

•Multijoueur

• Gamedesign

Page 7: ToulouseJS - Javascript multiplayer game

• Gestion des collisions

• Sprites et animations

• Editeur de niveaux

• Outils de debug

Page 8: ToulouseJS - Javascript multiplayer game

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);}

Page 9: ToulouseJS - Javascript multiplayer game

• Toxigame

• Impact

• Multijoueur

• Gamedesign

Page 10: ToulouseJS - Javascript multiplayer game

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

Page 11: ToulouseJS - Javascript multiplayer game

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" });

Page 12: ToulouseJS - Javascript multiplayer game

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);

Page 13: ToulouseJS - Javascript multiplayer game

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 });}

Page 14: ToulouseJS - Javascript multiplayer game

• Toxigame

• Impact

•Multijoueur

• Gamedesign

Page 15: ToulouseJS - Javascript multiplayer game

GAMEDESIGN

• L'aspect multijoueur peut rendre un jeu addictif

• Rester simple et peaufiner !

Page 16: ToulouseJS - Javascript multiplayer game

DES QUESTIONS ?

Toxicode recrute(Javascript & Ruby on Rails)

www.toxicode.fr@toxicode_fr