ToulouseJS - 2012-11-28 http://www.twitter.com/hugeen

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

2. • Toxigame
• Impact
• Multijoueur
• Gamedesign

3. • Toxigame
• Impact
• Multijoueur
• Gamedesign

4. Toxigame
• Gestion des parties
• API de synchronisation
• Authentification des joueurs

5. DEMO

6. • Toxigame
• Impact
• Multijoueur
• Gamedesign

7. • Gestion des collisions
• Sprites et animations
• Editeur de niveaux
• Outils de debug

8. Comment fonctionne Impact ?
// Création de l’entité Player
EntityPlayer = 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);
}
});

9. • Toxigame
• Impact
• Multijoueur
• Gamedesign

10. Moteur javascript V8 coté serveur
Code non-bloquant
Requête 1 Requête 2
Bloquant (PHP/ Rails)
0 sec 5 sec 10 sec
Non-bloquant (NodeJS)
0 sec 5 sec 10 sec

11. Requêtes traditionnelles VS Websockets
Serveur http
Navigateur traditionnel Navigateur socket.io
Hello World
Coté serveur Coté client
// Un client vient de se connecter // Le client reçoit un message du serveur
io.sockets.on("connection", function(client) { server.on("messages", function(data) {
// Envoi d'un message au client console.log(data.hello); // "world"
client.emit("messages", { hello: "world" }); });
});

12. Toxigame
Application au jeux
Nouveau joueur (coté serveur)
game.on('newPlayer', function(player) {
this.sendToAll({ spawnPlayer: player });
});
Les autres joueurs reçoivent l’événement (coté client)
toxigame.on("server.spawnPlayer", function(player) {
this.syncPlayer(player);
});

13. Comment le brancher sur Impact ?
// Création de l’entité Player
EntityPlayer = 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 bouge
if(this.hasMoved) {
toxicode.sendToServer({ synchronizePlayer: this.pos });
}
}
});

14. • Toxigame
• Impact
• Multijoueur
• Gamedesign

15. GAMEDESIGN
• L'aspect multijoueur peut rendre un jeu addictif
• Rester simple et peaufiner !

16. DES QUESTIONS ?
Toxicode recrute
(Javascript & Ruby on Rails)
www.toxicode.fr
@toxicode_fr