Initialisation et première scène
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 configuration de l’environnement de développement.
Le jeu vidéo développé ici est un shoot’em up que nous appelons « shooter », un jeu d’arcade à scrolling vertical.
Cet exemple permet de travailler les 3 piliers composants la boucle du jeu ou de gameplay que sont l’objectif, le défi et la récompense.
Les différentes étapes :
– un fond d’écran, qui défile (scrolle) du haut vers le bas, en continu et à l’infini pour donner une impression de mouvement;
– un shooter contrôlé par le joueur ;
– un laser lancé par le shooter à l’initiative du joueur ;
– des météorites qui fusent de partout ;
– des effets sonores ;
– un score ;
– un game over.
Les assets
En premier lieu, téléchargez depuis le lien suivant les images ci-dessous. Vous y trouverez aussi les effets sonores du jeu. Téléchargez en cliquant sur download assets.zip le fichier assets.zip, et décompressez-le à la racine du projet.
Ce dossier comprend entre autres, les éléments graphiques :
– Le fond d’écran à scroller : nebula.red.png (600×800 pixels)
– Le spaceship dirigé par le joueur (PJ)
– Les météorites (PNJ)
– Une explosion (PNJ)
– Le laser (PJ)
– Le Game Over
– Le bouton Play
Où trouver des assets ?
Nombreux sont les sites web qui proposent des assets gratuits ou payants. Les droits d’usage variables peuvent être liés à certaines obligations telles que citer les auteurs et ajouter un lien depuis votre jeu.
Pour les animations, je vous invite à regarder du côté de :
– opengameart (https://www.opengameart.org/);
– itch.io (https://itch.io/game-assets/free);
– et craftpix (https://craftpix.net/).
Pour les effets sonores, regardez du côté de :
– digccmixter (http://dig.ccmixter.org/);
– encore itchi.io (https://itch.io/soundtracks);
– ou universal soundbank (https://www.universal-soundbank.com/).
Initialisation du jeu
L’initialisation commence par la création d’une instance Phaser depuis le fichier main.js dans lequel on indique :
– le mode de rendu (canvas ou WebGL) en renseignant la propriété type;
– et la résolution en renseignant les propriétés width et height.
export default new Phaser.Game({
type: Phaser.AUTO,
width : 600,
height : 800
})
Le mode de rendu spécifié ici est Phaser.AUTO laissant à Phaser le choix d’adopter le rendu le plus pertinent selon le navigateur ou la machine d’exécution.
Création de la première scène
Tout comme le 7ème art, un jeu vidéo comporte différentes scènes. Pour faire simple, chaque écran d’un jeu vidéo est une scène : une cinématique, un menu, un niveau, les meilleurs scores, etc….
Sous Phaser comme beaucoup d’autres, un jeu vidéo est donc constitué de scènes indépendantes les unes des autres : elles peuvent être travaillées individuellement les unes des autres.
Elles sont ensuite reliées, tout comme sont montés les films au cinéma, pour donner naissance au jeu dans sa globalité. Les scènes, par nature, n’ont pas vocation à coexister à un même moment lors de l’exécution du jeu.
Le « shooter » ne va comporter qu’une seule scène incluant introduction, game over et jeu.
Pour créer une scène sous Phaser, il suffit de créer une classe qui étend la classe Phaser.Scene.
Commencez par créer sous src un sous-dossier scenes dédié, puis le fichier de la classe Game que vous nommez Game.js, dans lequel vous importez la classe Phaser depuis le fichier phaser.js. et définissez la scène Game en tant que fille de Phaser.Scene.
import Phaser from '../lib/phaser.js'
export default class Game extends Phaser.Scene {
constructor() {
super('game') ;
}
preload() {
}
create() {
}
update() {
}
}
Ce code comporte 4 méthodes :
– constructor: chaque scène doit être identifiée par une clé unique que vous définissez en paramètre de la fonction super : la clé choisie ici est game ;
– preload: c’est depuis cette fonction que sont chargés les assets : ce chargement préalable est incontournable, et sans cela impossible de les intégrer au jeu ;
– create: ici on crée la forme de la scène à son démarrage avec tous les objets nécessaires (préalablement définis dans la fonction preload);
– update: cette méthode est appelée en continue, les opérations donnant vie au jeu sont donc à placer ici.
Une fois la scène créée, on la rattache au jeu lors de la création de l’instance Phaser par le biais de son nom (Game) dans la propriété Scene et on importe la classe de la scène Game dans le projet.
Le jeu ne nécessitant pas d’interactions complexes entre objets on spécifie le moteur physique arcade sur lequel on peut activer le mode debug qui ajoute quelques artifices d’affichage bien utiles.
import Phaser from './lib/phaser.js'
import Game from './scenes/Game.js'
export default new Phaser.Game({
type : Phaser.AUTO,
width : 600,
height : 800,
scene : Game,
physics : {
default : 'arcade',
arcade : {
debug : true
}
}
})
La première scène étant créée et configurée, la prochaine étape va consister à y intégrer les 1er objets animés.
