Créer facilement un premier scrolling de caméra

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.

Taille de l'écran et taille du monde

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. 

Redéfinir la taille du monde

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() :

// on change les dimensions du monde à 200 pixels de large, 600 de haut
this.physics.world.setBounds(0, 0, 2000, 600); 

Ainsi notre personnage pourra se balader dans une zone plus grande, mais sortira très vite du champs de la caméra si cette dernière est fixe.

Faire un scrolling de caméra en mode tracking

Il est possible de dire à la caméra principale, celle qui présente l’affichage, de suivre un personnage, de sorte à suivre le déplacement d’un personnage.  Dans l’exemple ci-dessous, si le personnage s’appelle player, alors on écrira dans la fonction create()  :

// on dit a la caméra de suivre le personnage '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 la ligne suivante :

// empécher la caméra de filmer au dela du monde
this.cameras.main.setBounds(0, 0, 2000, 600); 

Il n’y a pas besoin de plus que ça.

Une fois ces mouvements compris, il est facile de comprendre, anticiper, voir même utiliser, des paramètres différents de taille de monde et de zone de navigation de caméra, afin de créer des zones non filmées mais dans lesquelles le personnage peut se déplacer librement.

Laisser un commentaire

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