[phaser3] Créer un scrolling en 3 lignes

24h pour découvrir le département MMI

[phaser3] Créer un scrolling en 3 lignes

L’ajout d’un scrolling est très simple sur phaser 3. Il est automatiquement géré à partir de la taille du monde, et de la présence d’une caméra. voyons cela en détail.

Quand un jeu est créé, sans information additionnelle, la taille du monde est celle précisée dans la configuration. Par exemple, si on a :

 var config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        ...
    };

alors notre monde est défini automatiquement avec les dimensions d’affichage de 800 x 600 pixels. On peut changer les dimensions du monde, avec la méthode world.setBound(). Ainsi, pour obtenir un monde de 2000 x 600 pixels, on écrira dans la fonction create() :

this.physics.world.setBounds(0, 0, 2000, 600);

Ceci étend le monde, mais ne pilote pas l’affichage, et notre personnage pourrait sortir de l’écran tout en se baladant dans le monde. Pour remédier à cela, on va dire a la caméra principale, celle qui présente l’affichage, de suivre le personnage (dans l’exemple ci-dessous, le personnage s’appelle player :

 this.cameras.main.startFollow(player);

Si on se contente de ces 2 lignes, on arrive à un soucis : lorsque le personnage est dans un bord du monde, la caméra sera centrée sur lui et va nous montrer « au delà » du monde, qui sera représenté en noir. Pour « interdire » a la caméra de nous montrer au dela du monde, et donc faire en sorte qu’elle ne centre plus le personnage quand ce dernier arrive sur un bord, on ajoute simplement une limite de champs de caméra (idéalement, le meme que le monde du jeu). Dans la fonction create(), on ajoute :

this.cameras.main.setBounds(0, 0, 2000, 600);

Et voila.

Tags: ,

Laisser un commentaire

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