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 tutoriel contient :
- 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
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.
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
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.
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 – il est important de les déclarer en dehors de create() ou update() car ces variables doivent pouvoir être accèdes dans l’une ou l’autre de ces fonctions. :
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.
