Pour bien commencer, on va d’abord appliquer une image de fond à notre niveau, qui va pouvoir défiler en même temps que l’on se déplace.
Préparer la scène
Avant de s’attaquer au décor, il ne faut pas oublier de créer la scène correspondant à notre niveau. Pour cela, rien de plus simple, c’est du déjà vu :
Q.scene('game', function(stage) {
console.log('Niveau 1 !');
/* On pourra mettre la majorité du code du niveau ici */
});
Un Repeater en fond
Le décor étant souvent (dans les jeux de plateforme) quelque chose qui se répète, on va faire simple et utiliser un composant inclus dans Quintus : un Repeater.
Pour cela il suffit de préciser quel asset on veut utiliser (ici une image, qu’il faudra penser à pré charger) et éventuellement la vitesse à laquelle il doit se déplacer dans la direction voulue (les deux, si besoin) :
stage.insert(new Q.Repeater({ asset: 'clouds.png', speedY: 0.5 })); // L'image ne se répète qu'à la verticale et avance moitié moins vite que le joueur
J’ai donc utilisé une image de nuages, que vous pouvez trouver ici :
Et voilà, vous avez une jolie scène avec une image de fond qui se répète (verticalement, surtout, dans ce cas) !