Pouvoir rebondir sur certaines surface permet de diversifier les séquences de plateforme de ton jeu. C'est aussi un moyen pour ton joueur de se déplacer plus rapidement dans l'environnement du jeu d'une façon qui soit efficace et satisfaisante. Cette caractéristique peut aussi être ajoutée à des personnages en mouvement pour corser un peu ton jeu, ou encore être un moyen pour le joueur d'éliminer des ennemis.
Importer une image et un effet sonore
Pour commencer, il va te falloir une image.
Réalises-en une si tu ne l'as pas déjà fait, ou utilise celle ci-dessous (click droit -> enregistrer-sous).
Ensuite, il te faudra un effet sonore. Tu peux aussi le réaliser toi-même, ou utiliser celui-ci dessous (click droit -> enregistrer-sous).
Charger les ressources dans le programme
Importe ensuite ton image dans ton projet en la plaçant dans le bon dossier : assets/sprites/.
Puis ton effet sonore dans : assets/sounds/.
Puis, ajoute ces deux lignes au début de ton script game.js, comme suit.
// chargement des images du jeu
loadSprite( "bean" , "assets/sprites/bean.png" ) ;
loadSprite( "grass" , "assets/sprites/grass.png" ) ;
loadSprite( "portal" , "assets/sprites/portal.png" ) ;
loadSprite( "gazer" , "assets/sprites/gazer.png" ) ;
// chargement des sons du jeu
loadSound( "hit" , "assets/sounds/hit.mp3" ) ;
loadSound( "portal" , "assets/sounds/portal.mp3" ) ;
loadSound( "powerup", "assets/sounds/powerup.mp3") ;Déclarer un symbole
Nous allons maintenant déclarer un nouveau type d'objet que tu vas pouvoir placer dans ton jeu.
Dans cet exemple nous avons choisi le caractère ?.
Dans le script level.js, trouve la variable LEVEL_CONFIG et ajoutes-y le code ci-dessous, comme suit.
// défini ce à quoi correspond chaque symbole dans le niveau
const LEVEL_CONFIG = {
// taille en pixel de chaque case
width: 64,
height: 64,
// sol
"=": () => [
sprite("grass"),
area(),
solid(),
origin("bot")
],
// personnage rebondissant
"Z": () => [
sprite("gazer"),
area(),
solid(),
origin("bot"),
"spring",
],
} ;Placer les personnages
Tu vas maintenant pouvoir choisir l'emplacement de tes checkpoints dans ton niveau.
Toujours dans le script level.js, trouve le tableau LEVELS et places des caractères ? là où tu le souhaites.
// plan du niveau
const LEVELS = [
[
" # @ " ,
"===== Z Z Z =====" ,
" = = = " ,
],
];Tes personnages sont maintenant apparents dans ton niveau. Tu peux les voir et sauter dessus, mais ils ne rebondissent pas encore.
Créer un nouveau composant
Pour que tes personnages puissent faire rebondir le joueur, il va nous falloir créer un nouveau composant.
Rends-toi dans le script component.js et ajoutes-y cette fonction.
// composant permettant au joueur de rebondir sur certaines surfaces
function spring( ) {
const JUMP_FORCE = 1200 ;
return {
add() {
this.onGround((l) => {
if (l.is("spring")) {
this.jump(JUMP_FORCE);
play("powerup");
}
})
},
}
}Ajouter le nouveau composant
Nous devons maintenant ajouter ce nouveau composant au joueur.
Dans le script game.js, à l'intérieur de la scène game, trouve la variable player et ajoutes-y cette ligne.
// définition du joueur
const player = add([
pos(0,0) ,
area() ,
body() ,
controller() ,
sprite( "bean" ) ,
origin( "center" ) ,
spring(),
"player",
]);BONUS : Ajouter une animation
Il est toujours préférable d'accompagner un effet sonore d'une animation. Cela permet d'envoyer un signal en plus aux joueurs ayant désactivé le son ou ayant peu d'audition. Pour les autres, l'effet sera d'autant plus satisfaisant.
Créer un composant pour une animation
Voici un composant pour une animation très simple, elle consiste à faire réduire la taille d'affichage d'un objet.
Rends-toi dans le script component.js et ajoute la fonction suivante.
// composant permettant l'animation du rebond
function springAnim() {
const ANIM_AMP = 0.2 ;
const ANIM_SPEED = 0.5 ;
const ANIM_POWER = 20 ;
let anim = 0 ;
return {
id:"spring animation",
require: [ "scale" ],
update() {
this.scale.y = 1 - wave(0, ANIM_AMP, ANIM_POWER*anim)*anim ;
anim = Math.max( 0 , anim-dt() * ANIM_SPEED ) ;
},
startAnim() {
anim = 1 ;
},
}
}Ajouter le composant
Dans le script level.js, trouve dans la variable LEVEL_CONFIG, le passage où nous avons déclaré les personnages rebondissants, puis ajoutes-y le nouveau composant ainsi que scale() qui est aussi nécessaire pour l'effet.
// personnage rebondissant
"Z": () => [
sprite("gazer"),
area(),
solid(),
origin("bot"),
scale(),
springAnim(),
"spring",
],Modifier le composant
Pour terminer, il ne nous reste plus qu'à déclencher l'animation au moment voulu.
Retourne une dernière fois dans le script component.js, puis retrouve la fonction spring() que tu as ajouté tout à l'heure, puis ajoutes-y cette ligne, comme suit.
// composant permettant au joueur de rebondir sur certaines surfaces
function spring( ) {
const JUMP_FORCE = 1400 ;
return {
add() {
this.onGround((l) => {
if (l.is("spring")) {
this.jump(JUMP_FORCE);
play("powerup");
l.startAnim() ;
}
})
},
}
}