Le fond d’écran en scrolling vertical infini
Suite de la série d’articles consacrés à la création d’un shooter avec phaser.js, le précédent étant consacré à la création de la 1ère scène.
La 1ére chose à faire est d’intégrer et d’afficher le fond d’écran nebula.red.png qui se fait en 2 temps :
– le chargement de l’image depuis le fonction preload;
– l’affichage de l’image (rattachée à la propriété background de la scène) au centre de la scène depuis la fonction create.
preload() {
this.load.image('background', 'assets/background/nebula.red.png');
}
create() {
this.background = this.add.image(300, 400, 'background');
}
Notez que les objets sont toujours placés sur scène à partir de leur centre.
En l’état, le fond d’écran s’affiche. Pour le faire scroller, un simple déplacement vers le bas en incrémentant son ordonnée suffit. C’est ici que la méthode update intervient pour y implémenter le changement de position du fond d’écran.
import Phaser from '../lib/phaser.js'
export default class Game extends Phaser.Scene {
.....
update() {
this.background.y += 1;
}
}Oui mais il y a un os, ça scrolle bien mais pas de manière continue : le fond d’écran disparait. Pour avoir un scrolling continue, il ne faut pas faire scroller un fond d’écran mais deux, en les juxtaposant l’un sur l’autre.
Et aussi faire en sorte que lorsque l’un des background sort de la scène, il soit replacé juste au-dessus de l’écran de jeu.
Cela nécessite d’ajouter le 2nd « background » à la méthode create, de le déplacer depuis la méthode update, et dans cette même méthode replacer les deux « background » au sortir de l’écran de jeu.
create() {
this.background = this.add.image(300, 400, 'background');
this.background2 = this.add.image(300, -400, 'background');
}
update() {
this.background.y += 1;
this.background2.y += 1;
if ( this.background.y > 1200 )
this.background.y = -399
if ( this.background2.y > 1200 )
this.background2.y = -399
}
En l’état, ça fonctionne. Mais on peut optimiser tout ça en intégrant dans un groupe d’objets statiques les deux background, puis pour chacun de ses éléments, les replacer sur leur position d’origine s’ils sont sortis de l’écran de jeu.
create() {
this.backgrounds = this.physics.add.staticGroup();
this.backgrounds.create(300, 400, 'background');
this.backgrounds.create(300, -400, 'background');
}
update() {
this.backgrounds.children.iterate(child => {
const background = child;
background.y += 1;
if ( background.y > 1200 )
background.y = -399
})
}Ça c’était la méthode bourrin. Mais il y a plus simple grâce à l’objet TileSprite. TileSprite est un objet qui se comporte comme un tapis roulant : une image qui s’enroule et que l’on peut déplacer à l’infini. C’est l’objet par excellence utilisé pour créer des scrollings d’arrière-plan.
create() {....
this.background = this.add.tileSprite(300,400,600,800,'background');
....}
update() {....
this.background.tilePositionY -= 5;
....}
Voilà un scrolling vertical tout propre. Pour un scrolling horizontal, c’est la même chose avec un déplacement cette fois sur l’axe des abscisses (y).
