toulousejs - javascript multiplayer game
TRANSCRIPT
![Page 1: ToulouseJS - Javascript multiplayer game](https://reader033.vdocuments.fr/reader033/viewer/2022042716/55c7271dbb61eb064d8b4727/html5/thumbnails/1.jpg)
Réalisation
d'un jeu multijoueuren JavaScript
Cyrille Bogaert@hugeen
Feedbacks
![Page 2: ToulouseJS - Javascript multiplayer game](https://reader033.vdocuments.fr/reader033/viewer/2022042716/55c7271dbb61eb064d8b4727/html5/thumbnails/2.jpg)
• Toxigame
• Impact
•Multijoueur
• Gamedesign
![Page 3: ToulouseJS - Javascript multiplayer game](https://reader033.vdocuments.fr/reader033/viewer/2022042716/55c7271dbb61eb064d8b4727/html5/thumbnails/3.jpg)
• Toxigame
• Impact
•Multijoueur
• Gamedesign
![Page 4: ToulouseJS - Javascript multiplayer game](https://reader033.vdocuments.fr/reader033/viewer/2022042716/55c7271dbb61eb064d8b4727/html5/thumbnails/4.jpg)
• Gestion des parties
• API de synchronisation
• Authentification des joueurs
Toxigame
![Page 5: ToulouseJS - Javascript multiplayer game](https://reader033.vdocuments.fr/reader033/viewer/2022042716/55c7271dbb61eb064d8b4727/html5/thumbnails/5.jpg)
DEMO
![Page 6: ToulouseJS - Javascript multiplayer game](https://reader033.vdocuments.fr/reader033/viewer/2022042716/55c7271dbb61eb064d8b4727/html5/thumbnails/6.jpg)
• Toxigame
• Impact
•Multijoueur
• Gamedesign
![Page 7: ToulouseJS - Javascript multiplayer game](https://reader033.vdocuments.fr/reader033/viewer/2022042716/55c7271dbb61eb064d8b4727/html5/thumbnails/7.jpg)
• Gestion des collisions
• Sprites et animations
• Editeur de niveaux
• Outils de debug
![Page 8: ToulouseJS - Javascript multiplayer game](https://reader033.vdocuments.fr/reader033/viewer/2022042716/55c7271dbb61eb064d8b4727/html5/thumbnails/8.jpg)
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](https://reader033.vdocuments.fr/reader033/viewer/2022042716/55c7271dbb61eb064d8b4727/html5/thumbnails/9.jpg)
• Toxigame
• Impact
• Multijoueur
• Gamedesign
![Page 10: ToulouseJS - Javascript multiplayer game](https://reader033.vdocuments.fr/reader033/viewer/2022042716/55c7271dbb61eb064d8b4727/html5/thumbnails/10.jpg)
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](https://reader033.vdocuments.fr/reader033/viewer/2022042716/55c7271dbb61eb064d8b4727/html5/thumbnails/11.jpg)
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](https://reader033.vdocuments.fr/reader033/viewer/2022042716/55c7271dbb61eb064d8b4727/html5/thumbnails/12.jpg)
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](https://reader033.vdocuments.fr/reader033/viewer/2022042716/55c7271dbb61eb064d8b4727/html5/thumbnails/13.jpg)
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](https://reader033.vdocuments.fr/reader033/viewer/2022042716/55c7271dbb61eb064d8b4727/html5/thumbnails/14.jpg)
• Toxigame
• Impact
•Multijoueur
• Gamedesign
![Page 15: ToulouseJS - Javascript multiplayer game](https://reader033.vdocuments.fr/reader033/viewer/2022042716/55c7271dbb61eb064d8b4727/html5/thumbnails/15.jpg)
GAMEDESIGN
• L'aspect multijoueur peut rendre un jeu addictif
• Rester simple et peaufiner !
![Page 16: ToulouseJS - Javascript multiplayer game](https://reader033.vdocuments.fr/reader033/viewer/2022042716/55c7271dbb61eb064d8b4727/html5/thumbnails/16.jpg)
DES QUESTIONS ?
Toxicode recrute(Javascript & Ruby on Rails)
www.toxicode.fr@toxicode_fr