Les capacités spéciales permettent de donner au joueur un sentiment de puissance et peuvent lui permettre de surmonter les obstacles du jeu de façon créative. Si elles sont trop puissantes, les capacités spéciales peuvent nuire à l'expérience de jeu en réduisant sa part de challenge, tandis que lorsqu'elles sont rares, elles peuvent être une surprise mémorable pour le joueur. Pour mesurer l'usage d'une capacité, il est possible de l'associer à un objet à trouver dans le jeu, ou encore ralentir le temps de rechargement du pouvoir pour obliger le joueur à en mesurer l'usage.
Le rayon laser peut être utilisé comme une capacité offensive du joueur pour faire disparaître les ennemis, mais aussi comme un moyen d'éliminer certains blocs et ainsi débloquer certains passages.
Importer des effets sonores
Tu peux réaliser tes effets sonores toi-même, où utiliser ceux-ci dessous (click droit -> enregistrer-sous).
Charger le son dans le programme
Importe ensuite ton son dans ton projet en la plaçant dans le bon dossier : assets/sounds/.
Puis, ajoute cette ligne au début de ton script game.js.
// chargement des sons du jeu
loadSound( "hit" , "assets/sounds/hit.mp3" ) ;
loadSound( "portal" , "assets/sounds/portal.mp3" ) ;
loadSound( "mystic" , "assets/sounds/mystic.mp3" ) ;
loadSound( "dune" , "assets/sounds/dune.mp3" ) ;Créer un nouveau composant
Pour créer cette capacité, nous allons devoir créer un composant.
Celui-ci comprend beaucoup de paramètres, tu peux les modifier si tu le souhaites, mais attention au résultat !
Rends-toi dans le script component.js et ajoutes-y cette fonction.
function laserBeam( laserBeamKey = "space" ){
const bh = 40 , bw = 360 ; // taille du faiseau
const lt = 0.8 ; // durée de l'animation de lancement
const sul = 0.8 ; // vitesse à laquelle l'énergie se vide
const srl = 2 ; // vitesse à laquelle l'énergie se remplie
//rotation du personnage
const rla = 10 , rls = 30 ; // pendant le lancement : amplitude, vitesse
const rfa = 6 , rfs = 20 ; // pendant le faisceau : amplitude, vitesse
// animation du faisceau
const fsw = 1600 ; // vitesse de déploiement horizontal du faisceau
const fsrw = 800 , fsrh = 1000 ; // vitesse de retrécissement horizontal,vertical
const hv = 10 , sv = 20 ; // variation de hauteur : amplitude, vitesse
// opacité du faisceau
const opa = 0.1 , ops = 30 ; // variation de hauteur : amplitude, vitesse;
// taille du cercle de chargement
const cr = 60 , cm = 30 ; // taille maximale, taille minimale ;
// animation caméra
const vibrations = 4 ;
// effets sonores
const fx = play("dune", {volume: 0.2,}) ;
const fx1 = play("mystic", {volume: 0.2,}) ;
// faisceau
const beam = add([
rect(0,0),
color(155,255,255),
area(),
pos(0, 0),
origin("left"),
opacity(),
]);
// lancement
const loadingBeam = add([
circle(1),
color(155,255,255),
pos(0, 0),
origin("bot"),
opacity(),
]);
let loading = 0 , energy = 1 ;
let isOn = false , isReady = true ;
let lastPX = 0 ;
return {
add(){
beam.onCollide("destructible" , (d) => {
destroy(d);
play("hit");
});
},
update(){
if ( isKeyDown(laserBeamKey) && isReady ){
if (isOn) this.shoutBeam();
else this.loadBeam()
}
else this.resetBeam();
loadingBeam.radius = (loading/lt * (cr-cm) ) + cm ;
loadingBeam.opacity = loading/lt;
loadingBeam.pos = this.pos;
beam.pos = this.pos;
camScale(1+loading*0.25);
if(lastPX>this.pos.x) beam.origin = 'right' ;
if(lastPX<this.pos.x) beam.origin = 'left' ;
if(!isKeyDown(laserBeamKey)) isReady = true ;
lastPX = this.pos.x ;
},
shoutBeam(){
beam.height = Math.sin(time()*sv) * hv + bh;
beam.width = Math.min(bw, beam.width + dt() * fsw);
beam.opacity = Math.sin(time()*ops)*opa+(1-opa);
energy = Math.max( 0 , energy-dt() * sul ) ;
this.angle = Math.sin(time()*rfs)*rfa;
shake(vibrations);
if (energy==0) isReady=false;
},
loadBeam(){
fx1.play();
loading += dt();
this.angle = Math.sin(loading/lt*rls)*rla*loading/lt;
if (loading>lt) {
isOn = true ;
loading = 0 ;
loadingBeam.radius = 1 ;
fx.play();
}
},
resetBeam(){
if (isOn) shake(0);
fx.stop();
fx1.stop();
loading = Math.max(0, loading - dt() * 10);
beam.height = Math.max(0, beam.height - dt() * fsrh);
beam.width = Math.max(0, beam.width - dt() * fsrw);
energy = Math.min(1, energy + dt() * srl ) ;
this.angle = 0 ;
loadingBeam.radius = 1 ;
isOn = false ;
},
}
}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" ) ,
laserBeam() ,
"player" ,
]);
Enfin, il ne te reste plus qu'à ajouter le label destructible à tous les objets qui peuvent être détruits par cette capacité.
