Réalisation dun jeu multijoueur   en JavaScript      Feedbacks      Cyrille Bogaert        @hugeen
• Toxigame• Impact• Multijoueur• Gamedesign
• Toxigame• Impact• Multijoueur• Gamedesign
Toxigame• Gestion   des parties• API   de synchronisation• Authentification   des joueurs
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é Player EntityPlayer = ig.Entity.extend({       // Chargement des sprit...
• Toxigame• Impact• Multijoueur• Gamedesign
Moteur javascript V8 coté serveur    Code non-bloquant                            Requête 1   Requête 2Bloquant (PHP/ Rail...
Requêtes traditionnelles VS Websockets                                  Serveur http     Navigateur                   trad...
ToxigameApplication au jeuxNouveau joueur (coté serveur) game.on(newPlayer, function(player) {    this.sendToAll({ spawnPl...
Comment le brancher sur Impact ? // Création de l’entité Player EntityPlayer = ig.Entity.extend({       // Chargement des ...
• Toxigame• Impact• Multijoueur• Gamedesign
GAMEDESIGN• Laspect   multijoueur peut rendre un jeu addictif• Rester   simple et peaufiner !
DES QUESTIONS ?    Toxicode recrute  (Javascript & Ruby on Rails)          www.toxicode.fr           @toxicode_fr
Prochain SlideShare
Chargement dans…5
×

ToulouseJS - Javascript multiplayer game

1 466 vues

Publié le

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

Publié dans : Technologie
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 466
Sur SlideShare
0
Issues des intégrations
0
Intégrations
17
Actions
Partages
0
Téléchargements
5
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

ToulouseJS - Javascript multiplayer game

  1. 1. Réalisation dun jeu multijoueur en JavaScript Feedbacks Cyrille Bogaert @hugeen
  2. 2. • Toxigame• Impact• Multijoueur• Gamedesign
  3. 3. • Toxigame• Impact• Multijoueur• Gamedesign
  4. 4. Toxigame• Gestion des parties• API de synchronisation• Authentification des joueurs
  5. 5. DEMO
  6. 6. • Toxigame• Impact• Multijoueur• Gamedesign
  7. 7. • Gestion des collisions• Sprites et animations• Editeur de niveaux• Outils de debug
  8. 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. 9. • Toxigame• Impact• Multijoueur• Gamedesign
  10. 10. Moteur javascript V8 coté serveur Code non-bloquant Requête 1 Requête 2Bloquant (PHP/ Rails) 0 sec 5 sec 10 secNon-bloquant (NodeJS) 0 sec 5 sec 10 sec
  11. 11. Requêtes traditionnelles VS Websockets Serveur http Navigateur traditionnel Navigateur socket.ioHello 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 dun message au client console.log(data.hello); // "world" client.emit("messages", { hello: "world" }); }); });
  12. 12. ToxigameApplication au jeuxNouveau 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. 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. 14. • Toxigame• Impact• Multijoueur• Gamedesign
  15. 15. GAMEDESIGN• Laspect multijoueur peut rendre un jeu addictif• Rester simple et peaufiner !
  16. 16. DES QUESTIONS ? Toxicode recrute (Javascript & Ruby on Rails) www.toxicode.fr @toxicode_fr

×