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!

About these ads

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

  1. hugeen dit :

    Effectivement, c’est du Canvas :-)


Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

Suivre

Recevez les nouvelles publications par mail.

Rejoignez 285 autres abonnés