Ecrire son code dans plusieurs fichiers

En travaillant sur des fichiers js

On définit chaque classe dans un fichier. Les éléments du fichier doivent etre précédés de “export”.

Par exemple dans le fichier nivdeau1.js, on écrit :


export class niveau1 extends Phaser.Scene {
  ...
} 

Dans le fichier niveau2.js on écrit : 


export class niveau2 extends Phaser.Scene {
  ...
} 

Dans le fichier principal, on va 

 
// création d'un objet pour dessiner
    const debugGraphics = this.add.graphics().setAlpha(0.75);  

Cette ligne nous a permis de créer un objet de type graphics, qui a la propriété de pouvoir dessiner des figures sur notre fenêtre de jeu. Afin que les dessins ne recouvrent pas totalement les tuiles, nous avons défini un alpha de 0.75 (plus l’alpha est petit, plus les objets dessinés sont transparents).

Pour un calque donné, nous utilisons enfin sa méthode renderdebug() en lui passant en paramètre l’objet de type graphics, et les instructions de coloration. Ces instructions associent, au format json, 3 couleurs à 3 paramètres :

  • le paramètre tileColor définit la couleur des tuiles sans collision
  • le paramètre collidingTileColor définit la couleur des tuiles en collision
  • le paramètre faceColor définit la couleur des bords des tuiles en collision. 

Chaque couleur est exprimée sous la forme d’un objet de type Color() qui contient 4 paramètres correspondant au code RGBa : Chaque paramètre est un valeur entre 0 et 255 désignant respectivement  l’intensité en Rouge(Red),  Bleu (Blue), Vert (Green) et l’opacité (alpha). Plus la valeur est grande, plus la couleur est présente, ou l’image est opaque.

Par exemple, si nous avons un calque plateformes  – comme c’est le cas sur le tutoriel Créer une carte sur Tiled – , un exemple de code sera le suivant :

    <script src="script/script.js"></script>
    <script src="script/script2.js"></script> 

Dans cet exemple, seules les tuiles en collision sont coloriées en orange (valeurs 255, 140, 0) et le bord en rouge (valeurs 255, 0, 0). En relançant le jeu, vous aurez ainsi un affichage comme  suit : 

Figure 1 - Exemple de jeu avec le debug sur tuiles activé

En reproduisant ce code pour chaque layer et en changeant les couleurs, il vous est désormais possible de voir les limites de votre carte et les zones de collision, et de constater, par exemple, que sur la carte de la Figure 1, les plates-formes en rondin ont une zone de collision plus grande que prévue, ou encore que le Sprite du personnage a une hitbox un peu plus grande que l’image du personnage. Notons qu’on pourra garder le même objet graphics pour différents layers.

L’étape suivante pourra consister à adapter la zone de collision des tuiles si certaines ne correspondaient pas à vos attentes.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

WC Captcha 56 + = 61