Ce hack va permettre à ton jeu devenir multijoueur. Ce changement va être déterminant pour le reste du design de ton jeu, à commencer par le fonctionnement de la caméra.
Importer une image
Pour commencer, il va te falloir une image.
Réalises-en une si tu ne l'as pas déjà fait, où utilise celle 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, ajoute cette deux ligne 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( "bean2" , "assets/sprites/bean2.png" ) ;Créer un nouveau personnage
Dans le script game.js, trouve l'endroit ou est déclaré le premier joueur, puis ajoute ces quelques lignes pour en créer un nouveau.
// définition du joueur
const player = add( [
pos(0,0) ,
area() ,
body() ,
controller() ,
sprite( "bean" ) ,
origin( "center" ) ,
"player" ,
] ) ;
// définition d'un deuxième
const player2 = add( [
pos( -LEVEL_CONFIG.width , 0 ) ,
area() ,
body() ,
controller("q","d","z") ,
sprite( "bean2" ) ,
origin( "center" ) ,
"player" ,
] ) ;
Ton nouveau personnage est déjà fonctionnel, puisque tous les composants nécessaires ont déjà été créés pour ton premier personnage. Il nous reste cependant à modifier le fonctionnement de la caméra, pour que les deux joueurs puissent rester à l'écran.
Créer un nouveau composant
Dans le script component.js, ajoute cette nouvelle fonction.
// composant permettant à la caméra de suivre plusieurs joueurs en même temps
function camera2p(){
const DISTANCE_MAX = 0.3 ;
const AMPLITUDE_ZOOM = 0.0008 ;
const ZOOM_MIN = 0.6 ;
return {
scaleValue : 1 ,
update() {
const dm = width() * DISTANCE_MAX ;
let pc = 0 , px = 0 , py = 0 ;
let minX = get("player")[0].pos.x ;
let maxX = get("player")[0].pos.x ;
let minY = get("player")[0].pos.y ;
let maxY = get("player")[0].pos.y ;
every("player", (p) => {
pc ++ ;
px += p.pos.x ;
py += p.pos.y ;
minX = Math.min(p.pos.x,minX) ;
maxX = Math.max(p.pos.x,maxX) ;
minY = Math.min(p.pos.y,minY) ;
maxY = Math.max(p.pos.y,maxY) ;
})
const d = this.pyth( minX-maxX , maxY-minY ) ;
const df = Math.max( d - dm , 0 ) ;
const z = Math.max( 1 - df * AMPLITUDE_ZOOM , ZOOM_MIN ) ;
const x = px / pc ;
const y = py / pc ;
this.pos.x = x ;
this.pos.y = y ;
this.scaleValue = z ;
},
pyth( a , b ) {
return Math.sqrt( Math.pow( a , 2 ) + Math.pow( b , 2 ) ) ;
},
}
}Créer un nouvel objet caméra
Puis, dans le script game.js, à l'intérieur de la scène game ajoute ces lignes pour créer un nouvel objet.
// définition du joueur
const player = add( [
pos(0,0) ,
area() ,
body() ,
controller() ,
sprite( "bean" ) ,
origin( "center" ) ,
"player" ,
] ) ;
// définition d'un deuxième
const player2 = add( [
pos(-64,0) ,
area() ,
body() ,
controller("q","d","z") ,
sprite( "bean2" ) ,
origin( "center" ) ,
"player" ,
] ) ;
const camera = add( [
pos() ,
camera2p() ,
] ) ;Modifier le comportement de la caméra
Enfin, toujours dans le script game.js, trouve la fonction onUpdate() et effectue cette modification.
// est lu à chaque frame
onUpdate( () => {
camPos ( player.pos ) ;
camPos ( camera.pos ) ;
camScale( camera.scaleValue ) ;
} ) ;