ToulouseJS - Javascript Multiplayer Game

http://www.twitter.com/hugeen

Transcript

1. Réalisation d'un jeu multijoueur en JavaScript Cyrille Bogaert @hugeen Feedbacks
2. • Toxigame • Impact • Multijoueur • Gamedesign
3. • Toxigame • Impact • Multijoueur • Gamedesign
4. • Gestion des parties • API de synchronisation • Authentification des joueurs Toxigame
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 5 sec 10 sec 0 sec 5 sec 10 sec 0 sec Bloquant (PHP/ Rails) Non-bloquant (NodeJS) Requête 1 Requête 2
11. Serveur http traditionnel Navigateur socket.io Navigateur Hello World // Un client vient de se connecter io.sockets.on("connection", function(client) { }); // Le client reçoit un message du serveur server.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" });
12. 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);
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