PhaserJS
Pour ce module, on va se concentrer sur la création de jeux vidéos avec le langage JavaScript. Pour ce faire, on se servira de la librarie Phaser.
Commencer !
Pour ce module, on va se concentrer sur la création de jeux vidéos avec le langage JavaScript. Pour ce faire, on se servira de la librarie Phaser.
Commencer !Avant d'entamer ce défi, assure-toi d'avoir déjà fait ceux-ci:
Dans tout bon jeu vidéo, il y a un joueur ou une joueuse. Et comme nous créons notre jeu vidéo à partir de rien, on va créer nous-même notre joueur.
Pour créer un joueur, on utilise pixilart.com. Une fois sur leur site, appuie sur "START DRAWING" (anglais pour "COMMENCER À DESSINER").
Tu peux maintenant choisir la taille de ton personnage. Je te recommande fortement de choisir 40x40. Pour commencer ton dessin, fait alors "NEW DRAWING".
Maintenant, explore les outils disponibles à la gauche de ton écran. Dessine un joli personnage pour notre jeu!
Quand tu as fini, appuie sur Download, et séléctionne Download PNG. Ceci va télécharger ton personnage en format png.
Pour coder notre magnifique jeu, on va utiliser ReplIt. Navigue sur le lien et crée-toi un compte si ce n'est pas encore fait. Sinon, connecte-toi à ton compte.
Lorsque tu es connecté à ton (nouveau) compte, crée un nouveau Repl. Celui-ci doit être dans le langage "HTML, CSS, JS".
Une fois ce Repl créé, on doit importer la librarie Phaser. C'est cette librarie qui va nous permettre de programmer tout notre jeu, du début à la fin!
Pour l'importer, copie-colle cette ligne de code dans index.html, entre la ligne 9 et la
ligne 10 (Donc juste en dessous du <body>)
<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>
Voilà tout ce qu'on va changer dans le fichier index.html pour l'instant. Attaquons-nous
maintenant au fichier script.js!
Tout en haut de script.js, colle ceci:
let config = {
type: Phaser.AUTO,
width: 800,
height: 500,
physics: {
default: 'arcade',
},
scene: {
preload,
create,
update
}
};
Ces lignes sevent à configurer notre jeu. Pour l'instant, on ne va pas trop y toucher. Remarque cependant
qu'on utilise la librairie Phaser à la ligne 2. Ensuite, on définit la taille de notre écran en
pixels (tu peux changer les valeurs si tu le souhaites), et après on ajoute les lois "physiques" qui vont
s'appliquer à notre jeu. Et finalement, on voit qu'une "scène" est composée de 3 phases: preload, create et update. Ces phases correspondent chacune à une fonction.
On va maintenant utiliser cet "objet" de configuration sauvegardé dans la variable config pour créer notre jeu:
const game = new Phaser.Game(config);
Lance ton code et regarde si quelque chose change.
Toi aussi tu as une erreur? C'est normal! Il faut encore ajouter les 3 fonctions (phases) mentionnées dans notre configuration. Pour l'instant, ajoute les fonctions sans les coder. On va le faire après.
function preload(){
}
function create(){
}
function update(){
}
Si maintenant tu lances ton code, tu devrais voir un écran noir apparaître. Voilà ton jeu!
Sur ReplIt, tu peux pas voir tout ton écran. Pour voir tout l'écran du jeu, appuie sur le bouton en haut à droite de l'écran. Il ressemble à ceci:
Preload en anglais veut dire "avant-charge". En fait, tout ce qu'on écrit dans cette fonction va s'executer avant que le jeu se charge. Par example, on devrait charger les images de nos personnages avant de charger le reste.
Aujourd'hui, on va juste charger notre personnage. D'abord, importe l'image que tu as créé plus tôt dans ton Repl. Regarde bien le nom, tu en auras besoin.
Ensuite, ajoute cette ligne de code dans la fonction preload. Remplace les
XXXXXXXXXXX par le nom que tu veux donner à ton personnage, et YYYYYYYYY par le
nom de ton image.
this.load.image("XXXXXXXXXXX", "YYYYYYYYY.png");
Tu as maintenant chargé ton personnage.
Plus tard, lorsque tu voudras ajouter d'autres personnages/objects/obstacles dans ton jeu, ce sera dans
la fonction preload() qu'il faudra le faire.
Create veut dire "Créer" en anglais. C'est la fonction dans laquelle on crée tout ce dont on
aura besoin plus tard, un peu comme la fonction setup dans p5js. Ceci implique notamment de
créer notre joueur, mais pas seulement.
Pour créer notre personnage, il faut se souvenir de comment on l'a appellé. Ensuite, on peut mettre la ligne de code suivante:
this.player = this.physics.add.sprite(400, 360, "XXXXXXXXXXX");
PS: n'oublie pas qu'on travaille maintenant dans la fonction create. Aussi, essaie de
changer les deux nombres (400 et 360) pour voir ce qu'ils font.
Dans cette fonction create on ne crée pas seulement le personnage. On va aussi déterminer
les touches du clavier pour pouvoir bouger le personnage.
Une des touches dont on aura besoin est la touche D. En effet, la touche D fera bouger notre joueur à droite. Les autres touches dépendent de ton clavier, donc regarde bien avant de tout coder.
Pour ajouter une touche, fais comme ceci. Ici, je crée la touche D, mais il faudra répliquer ce code 4 fois - une fois par touche que tu veux utiliser.
this.key_D = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D);
Voilà, on a maintenant créé notre personnage et 4 touches. On est donc prêt à passer à la partie principale du jeu!
Update veut dire "Mettre à jour" en anglais. En effet, contrairement aux fonctions
preload et create, la fonction update va s'executer plusieurs fois
par minute et donc nous permettre de créer l'illusion que notre personnage bouge. C'est un peu comme la
fonction draw dans p5js.
Pour changer la vitesse du personnage, on fait comme suit:
this.player.setVelocityX(100);
Souviens-toi qu'on travaille maintenant dans update.
Le joueur devrait doucement partir à droite. Essaie les deux challenges suivants:
Ce serait quand même chouette de pouvoir contrôler notre personnage. On va dire que lorsqu'on appuie sur la touche D, le personnage va à droite. Si la touche n'est pas appuyée, le joueur n'avance pas.
Il faut donc savoir comment vérifier si la touche D est pressée ou non. Heureusement pour nous, on a une façon simple de ce faire!
this.key_D.isDown
On peut alors tout combiner comme ceci:
if(/* Touche D appuyée */) {
// Mettre vitesse X à 100
} else {
// Mettre vitesse X à 0
}
Maintenant, lorsque tu appuies sur la touche D, ton personnage devrait avancer. Si tu n'appuies pas, il ne devrait rien faire.
Challenge: Écris le code pour pouvoir bouger à gauche aussi!
Pour aller à gauche, c'est soit la touche A, soit la touche Q. Regarde sur ton clavier avant d'écrire le code. Il va falloir faire quelque chose du style:
if(/* Touche D appuyée */) {
// Mettre vitesse X à 100
} else if(/* Touche A/Q appuyée */) {
// Mettre vitesse X à -100
} else {
// Mettre vitesse X à 0
}
Pour aller à gauche, j'ai choisi la touche A:
if(this.key_D.isDown) {
this.player.setVelocityX(100);
} else if(this.key_A.isDown) {
this.player.setVelocityX(-100);
} else {
this.player.setVelocityX(0);
}
Excellent! Il ne reste plus qu'à ajouter les fonctionalités pour pouvoir monter et descendre. Sur mon clavier, ce sont les touches W et S, mais ce sera peut être different sur le tien.
Tu peux essayer d'ajouter quelques fonctionalités en plus si tu as le temps:
this.player.flipX = true; pour le retourner et
this.player.flipX = false; pour le remettre dans sa position initiale.