Comment j’ai construit un jeu de dessin en temps réel avec PaperJS

Banana Draw est un jeu de dessin multijoueur, en temps réel.
Le principe est simple : il s’agit d’un Pictionary revisité. Chaque joueur choisit un mot qu’il doit ensuite faire deviner aux autres en le dessinant.

J’avais réalisé un prototype, fin 2011 basé sur cette démo : http://paperjs.org/examples/path-simplification/ afin de tester le potentiel de NodeJS.

Cette année grâce à l’évènement One Game A Month, avec Toxicode nous avons décidé de dépoussiérer ce prototype afin d’en faire un petit jeu destiné à passer un petit moment de détente.

Vous pouvez jouer dès maintenant à l’adresse suivante : http://games.toxicode.fr/

Comment avons nous procédé ?

Dans la source de l’exemple de PaperJS on peut voir que 3 évènements de la souris sont enregistrés :

function onMouseDown(event) {
    // Code d'initialisation d'un nouveau path
}

function onMouseDrag(event) {
    // Ajout de points sur notre path
}

function onMouseUp(event) {
    // Fermeture du path qui forme notre trait
}

Pour rendre cette fonctionnalité de dessin multijoueur, je suis passé par Toxigame, le framework de Toxicode que j’avais présenté lors de ma présentation “Réalisation d’un jeu multijoueur en JavaScript” à ToulouseJS #2.

Dans onMouseDown, j’initialise un tableau qui servira à stocker les données de mon path fraîchement créé.

Ensuite dans onMouseDrag je stocke chaque point du path.

Enfin dans onMouseUp je finalise le path puis l’envoi au serveur.

schema-paperjs.001

Ensuite le serveur s’occupe de renvoyer le path aux autres joueurs pour qu’ils puissent l’afficher sur le <canvas> de PaperJS :

// server
game.on('newDrawingPath', function(path) {
    game.sendToAll({ newDrawingPath: path });
});
// client
game.on('server.newDrawingPath', function(path) {
    canvas.drawPath();
});

Évidemment c’est une version ultra simplifiée mais je pense que ça illustre bien le concept. Je ferai certainement un article sur PaperJS un peu plus poussé prochainement.

Tout retour en commentaire sera très apprécié.

Have fun!

2 thoughts on “Comment j’ai construit un jeu de dessin en temps réel avec PaperJS”

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>