Post on 09-Aug-2015
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