Ajouter un personnage pour un jeu multi-joueurs

Dans ce tutoriel très simple, nous montrons comment ajouter simplement un second personnage à un jeu développé en Phaser 3 pour en faire un jeu multi-joueurs. Les deux personnages pourront se déplacer en même temps, le premier avec les flèches directionnelles, le second avec les touches ZQSD.

Ce que contient ce tutoriel :  

  • L’ajout d’un second personnage utilisant le graphisme du premier
  • L’ajout de nouvelles actions au clavier, en surveillant de nouvelles touches
  • Deux déplacements simultanés indépendants des personnages  
Ce que NE contient PAS ce tutoriel : 
  •  une collision entre les personnages. Ces derniers peuvent toujours se superposer.

Le résultat est un jeu simple dans lequel les deux personnages vont pouvoir se déplacer de façon indépendante dans l’espace de jeu.

Le code et les fichiers résultats de ce tutoriel sont disponibles à l’adresse suivante :

https://github.com/bdarties/Phaser3_insert_single_map_from_tiled

Base de départ pour ce tutoriel

Nous partons d’une base constituée d’un jeu dans lequel un personnage est présent sur un monde de taille fixe avec une gravité prédéfinie, qui contient un fond en ciel bleu, un sol et 3 plates-forme. Ce personnage peut aller à gauche, à droite, et sauter avec la flèche du haut s’il touche le sol (voir Figure 1). Ce code est donc une suite du tutoriel “making your first phaser 3 game” disponible ici : https://phaser.io/tutorials/making-your-first-phaser-3-game  

base_plateforme
Figure 1 : un personnage pouvant bouger dans un monde simple

Création du personnage et ajout au jeu

Par soucis de simplicité, le personnage nouvellement créé aura le même design que l’original. Nous commençons par dupliquer toutes les lignes de code relatives au visuel du personnage, ce qui nous évitera d’avoir à charger un autre spritesheet. Nous dupliquons la variable player en player2 : nous ajoutons donc la ligne suivante :

var player2; 

Au sein de la fonction create() nous dupliquons ensuite les lignes de création du sprite et de gestion de son interaction avec le monde extérieur, mais en changeant les coordonnées d’apparition pour bien distinguer les personnages : nous ajoutons donc les lignes suivantes :

// ajout d'un second joueur
player2 = this.physics.add.sprite(500, 450, 'dude');
// mise en place d'un rebond
player2.setBounce(0.2);
// collision avec les bords du niveau
player2.setCollideWorldBounds(true);
// collision avec les plates-formes
this.physics.add.collider(player2, platforms); 

Nous testons notre code :

  • le second personnage apparait aux coordonnées indiquées (en regardant à gauche)!
  • Les flèches directionnelles permettent de déplacer le premier personnage.
  • Le second personnage reste immobile pour l’instant. 

Il ne nous manque plus qu’à lui assigner un contrôle au clavier pour l’animer.

Figure 2 : le second joueur apparaît

Association des commandes clavier

Pour ajouter les commandes du second personnage, nous allons utiliser 4 variables J2Haut, J2Bas, J2Gauche et J2Droite que nous allons ensuite associer avec les touches du clavier. Hors de toute fonction, nous déclarons ces variables; nous ajoutons donc les lignes suivantes :

var J2Haut;
var J2Bas;
var J2Gauche;
var J2Droite; 

Nous associons ensuite ces variables aux touches ZQSD. Dans la fonction create(), juste après la déclaration du clavier avec la ligne cursors = this.input.keyboard.createCursorKeys(); nous ajoutons les lignes suivantes :

J2Haut = this.input.keyboard.addKey('Z');
J2Bas = this.input.keyboard.addKey('S');
J2Gauche = this.input.keyboard.addKey('Q');
J2Droite = this.input.keyboard.addKey('D'); 

Désormais, la touche Z est identifiée par la variable J2Haut, il en est de même pour les autres paires variables / touches. Il ne reste plus qu’à définir les actions du second personnage lorsque la touche correspondante est pressée, en s’inspirant de ce qui a été fait pour les touches directionnelles sur le premier personnage. Ainsi dans la fonction update() nous ajoutons les lignes suivantes :

  // commandes du joueur 2 (les commandes sont définies depuis curseur)
         if (J2Gauche.isDown ) {
             player2.setVelocityX(-160);
             player2.anims.play('left', true);
         } 
        else if (J2Droite.isDown) {
            player2.setVelocityX(160);
            player2.anims.play('right', true);
        } 
        else {
            player2.setVelocityX(0);
            player2.anims.play('turn');
        }
        if (J2Haut.isDown && player2.body.blocked.down) {
            player2.setVelocityY(-330);
        }  

Il n’y a plus qu’à tester notre jeu! Tout marche parfaitement, chaque personnage dispose de ses propres contrôles (flèches directionnelles ou pavé ZQSD). Les actions sont certes élémentaires, et aucun modèle de collision n’a été introduit entre les joueurs, mais le développement de jeux de combats ou en coopératif est désormais possible.

Pour que le jeu soit visuellement plus agréable, il faudra bien évidemment que le second personnage ait sa propre apparence. Ceci pourra se faire en :

  • créant un nouveau spritesheet pour le second personnage
  • définissant de nouvelles animations (en s’inspirant de ce qui a été fait pour le premier personnage)
  • modifiant les animations jouées lors de l’appui sur les touches ZQSD.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *