Dans ce tutoriel on va voir ensemble comment mettre en place Phaser avec un seul fichier pour pouvoir développer un jeu.
Salut à toi qui lit ce tutoriel,
Avant de commencer, je vais me présenter.
Je suis Callan, Développeur Web de formation (chez Simplon) et formateur dans ce domaine, je ne suis pas un expert dans le domaine juste un grand passionné.
Je suis plus orienté sur les technologies web avec un penchant pour Javascript. J'aime bien fouiner pour me trouver de nouveaux problèmes et des solutions.
Je n'ai pas parole d'évangile et rien de ce que j'écris/dis n'est figer dans le marbre, mais on va essayer de voir ensemble comment qu'on fait un jeu vidéo avec les technologies du web.
Introduction
Ce Tutoriel n'est que le début de notre grande aventure sur Phaser.
Alors voilà ce que nous dis wikipedia à son sujet :
Donc pour faire du Phaser on aura besoin littéralement d'un éditeur de texte (bloc-note, sublime-text, vscode...) et d'un navigateur (firefox, chrome...).
Mettre en place Phaser
Étape 1 : Importer Phaser
On commence par créer un fichier index.html et on importe le CDN(Continous Delivery Network) de Phaser.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mon Super Jeu</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/phaser@3.22.0/dist/phaser.min.js"></script>
<!-- On met une 2em balise pour écrire notre programme. -->
<script>
</script>
</body>
</html>Source : Liens vers le CDNCode : Le code pour l'étape 1
Étape 2 : Configurer Phaser
Puis dans le second bloc script on va commencer par configurer Phaser :
<script>
let config = {
type: Phaser.AUTO, // Définit le moteur graphique à utilisé CANVAS, WEBGL ou AUTO.
width: 800, // largeur de l'écran de jeu.
height: 600, // hauteur de l'écran de jeu.
physics: {}, // définit la physique utiliser par phaser.
scene: {
preload: preload,
create: create
}// configure la scene utiliser pour phaser.
};
let game = new Phaser.Game(config);
</script>Code : Le code pour l'étape 2
Étape 3 : Impoter les assets
Une fois configurer on peut mettre en place les fonctions utiles pour notre scène.
Tout d'abord on commence par la fonction preload, cette fonction vous permettra de charger vos assets.
function preload(){
this.load.image('sky', 'https://labs.phaser.io/assets/skies/space2.png ');
this.load.image('atari', 'https://labs.phaser.io/assets/sprites/atari800xl.png');
}La méthode load.image(key, url) prend 2 paramètres :
- key(string) : permet créer une référence pour la ressource
- url(string) : est le chemin d'accès afin de charger l'image
Source : Phaser 3 API Documentation - Class: LoaderPlugin#Image
Code : Le code pour l'étape 3
Étape 4 : Afficher les assets
Une fois que les ressources sont chargées, on va pouvoir les afficher grâce à la fonction create.
// il y à l'étape 3 juste au-dessus
let atari
function create(){
this.add.image(400, 300, 'sky');
atari = this.add.image(400, 300, 'logo');
}La méthode add.image(x, y, key) prend 3 paramètre :
- x(int) : position de l'image sur l'axe X
- y(int) : position de l'image sur l'axe Y
- key(string) : Fait référence à la ressource qu'on à chargé.
Source : Phaser 3 API Documentation - Class: GameObjectFactory#Image
Code : Le code pour l'étape 4
Étape 5 : Animation
Et pour finir une animation avec tweens, on reviendra sur cette méthode plus tard dans les tutoriels.
function create(){
// Étape 4 juste au-dessus
// on ajoute un petite animation
this.tweens.add({
targets: atari,
y: 270,
duration: 3000,
ease: 'Power2',
repeat: -1,
yoyo: true
})
}Et on en a fini pour ce tuto, tu pourras retrouver le code intégral sur le repo github.
Maintenant tu sais comment mettre en place ton projet Phaser c'est pas si compliqué.
Bien sûr ce n'est pas la seule façon de faire un projet Phaser, il existe autant possibilité que de projet.
Dans les prochains tutoriels, nous allons voir comment gérer les assets, les scènes et bien plus encore.
Sur ces mot je te souhaite un Happy Hacking et reste curieux.
N'oublie pas de rejoindre le discord de MYG, si tu à des question &&/|| envie de discuter.
0
