Les feuilles de sprite permettent d'affecter plusieurs images différentes à un seul objet. Dans ce cas de figure, cela va nous permettre d'afficher les plateformes en utilisant un système de tuiles, et ainsi donner à ton jeu un rendu plus épuré.
Cette page va te permettre de créer trois types de plateforme différents. En fonction de tes besoins, tu peux choisir de ne créer qu'une seule ou plusieurs d'entre elles.
- plateformes verticales
- plateformes horizontales
- plateformes rectangulaires
Importer une image
Pour commencer, il va te falloir une feuille de sprite.
Réalises-en une si tu ne l'as pas déjà fait, ou utilise celles-ci dessous (click droit -> enregistrer-sous).
Importe ensuite tes feuilles de sprite dans ton projet en les plaçant dans le bon dossier : assets/sprites/.
Puis, ajoute les lignes correspondant aux feuilles de sprites que tu as choisi au début de ton script game.js, comme suit.
// chargement des images du jeu
loadSprite("bean", "assets/sprites/bean.png");
loadSprite("spike", "assets/sprites/spike.png");
loadSprite("grass", "assets/sprites/grass.png");
loadSprite("portal", "assets/sprites/portal.png");
// platformes verticales
loadSpriteAtlas("assets/sprites/vertical-platform.png", {
"vertical-platform": {
x: 0,
y: 0,
width: 64,
height: 256,
sliceY: 4,
anims: {
single: { from: 0 , to: 0 },
verticaltop: { from: 1 , to: 1 },
verticalmiddle: { from: 2 , to: 2 },
verticalbottom: { from: 3 , to: 3 },
},
},
}) ;
// platformes horizontales
loadSpriteAtlas("assets/sprites/horizontal-platform.png", {
"horizontal-platform": {
x: 0,
y: 0,
width: 256,
height: 64,
sliceX: 4,
anims: {
single: { from: 0 , to: 0 },
horizontalleft: { from: 1 , to: 1 },
horizontalcenter: { from: 2 , to: 2 },
horizontalright: { from: 3 , to: 3 },
},
},
}) ;
// plateformes rectangulaires
loadSpriteAtlas("assets/sprites/platform.png", {
"platform": {
x: 0,
y: 0,
width: 256,
height: 256,
sliceX: 4,
sliceY: 4,
anims: {
single: { from: 0 , to: 0 },
horizontalleft: { from: 1 , to: 1 },
horizontalcenter: { from: 2 , to: 2 },
horizontalright: { from: 3 , to: 3 },
verticaltop: { from: 4 , to: 4 },
topleft: { from: 5 , to: 5 },
topcenter: { from: 6 , to: 6 },
topright: { from: 7 , to: 7 },
verticalmiddle: { from: 8 , to: 8 },
middleleft: { from: 9 , to: 9 },
middlecenter: { from: 10 , to: 10 },
middleright: { from: 11 , to: 11 },
verticalbottom: { from: 12 , to: 12 },
bottomleft: { from: 13 , to: 13 },
bottomcenter: { from: 14 , to: 14 },
bottomright: { from: 15 , to: 15 },
},
},
}) ;Déclarer des symboles
Dans le cas où tu voudrais créer plusieurs types de plateformes différentes dans ton jeu, il te faudra créer de nouveaux symboles.
Dans cet exemple nous avons choisi les caractères | et -.
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,
// plateformes
"=": () => [
sprite("grass"),
area(),
solid(),
origin("bot"),
],
// plateformes verticales
"|": () => [
sprite("vertical-platform"),
area(),
solid(),
origin("bot"),
],
// plateformes horizontales
"-": () => [
sprite("horizontal-platform"),
area(),
solid(),
origin("bot"),
],
// début
"#": () => [
area(),
"playerstart",
],
// fin
"@": () => [
sprite("portal"),
area(),
origin("bot"),
pos(0, -12),
"portal",
],
};Modifier le bloc de départ
Si tu veux également modifier ton type de bloc de départ, modifie cette ligne pour utiliser ta nouvelle feuille de sprite.
// plateformes
"=": () => [
sprite("grass"),
sprite("platform"),
area(),
solid(),
origin("bot"),
],Placer les nouvelles plateformes
Place maintenant tes nouvelles plateformes si tu en as créé.
Toujours dans le script level.js, trouve le tableau LEVELS et places des caractères | et - là où tu le souhaites.
// plan du niveau
const LEVELS = [
[
" | ---- " ,
" | " ,
" @ | | === " ,
" | | === " ,
" | | -- === " ,
" | " ,
" ---- " ,
" " ,
" ===== " ,
" # ==== ===== " ,
" === ==== ===== " ,
" === ===== " ,
],
];Tes plateformes sont maintenant apparentes dans ton niveau, mais elles n'utilisent pas encore l'intégralité de ta feuille de sprite.
Créer un nouveau composant
Pour que tes plateformes puissent apparaître correctement, il va nous falloir créer un nouveau composant.
Rends-toi dans le script component.js et ajoutes-y cette fonction.
// composant permettant d'afficher les blocs correctement
function tiling( c = "=" , mode = ""){
return {
load(){
const g = LEVELS[CURRENT_LEVEL] ;
const x = this.pos.x / LEVEL_CONFIG.width ;
const y = this.pos.y / LEVEL_CONFIG.height ;
const gh = g.length ;
const gw = g[y].length ;
const v = ( mode == "vertical" ) ;
const h = ( mode == "horizontal" ) ;
let t = ( y - 1 >= 0 && g[y-1][x] == c ) ;
let b = ( y + 1 < gh && g[y+1][x] == c ) ;
let l = ( x - 1 >= 0 && g[y][x-1] == c ) ;
let r = ( x + 1 < gw && g[y][x+1] == c ) ;
let tl = ( y - 1 >= 0 && x - 1 >= 0 && g[y-1][x-1] == c ) ;
let tr = ( y - 1 >= 0 && x + 1 < gw && g[y-1][x+1] == c ) ;
let bl = ( y + 1 < gh && x - 1 >= 0 && g[y+1][x-1] == c ) ;
let br = ( y + 1 < gh && x + 1 < gw && g[y+1][x+1] == c ) ;
if ( !t && r && !l && b && !v && !h ) this.play( "topleft" ) ;
else if ( !t && r && l && b && !v && !h ) this.play( "topcenter" ) ;
else if ( !t && !r && l && b && !v && !h ) this.play( "topright" ) ;
else if ( t && r && !l && b && !v && !h ) this.play( "middleleft" ) ;
else if ( t && r && l && b && !v && !h ) this.play( "middlecenter" ) ;
else if ( t && !r && l && b && !v && !h ) this.play( "middleright" ) ;
else if ( t && r && !l && !b && !v && !h ) this.play( "bottomleft" ) ;
else if ( t && r && l && !b && !v && !h ) this.play( "bottomcenter" ) ;
else if ( t && !r && l && !b && !v && !h ) this.play( "bottomright" ) ;
else if ( !l && r && !v ) this.play( "horizontalleft" ) ;
else if ( l && r && !v ) this.play( "horizontalcenter" ) ;
else if ( l && !r && !v ) this.play( "horizontalright" ) ;
else if ( !t && b && !h ) this.play( "verticaltop" ) ;
else if ( t && b && !h ) this.play( "verticalmiddle" ) ;
else if ( t && !b && !h ) this.play( "verticalbottom" ) ;
else this.play( "single" ) ;
}
}
}Ajouter le nouveau composant
Dans le script level.js, trouve dans la variable LEVEL_CONFIG le passage où nous avons déclaré les plateformes, puis ajoute-leur ton nouveau composant.
// plateformes
"=": () => [
sprite("platform"),
area(),
solid(),
origin("bot")
tiling("="),
],
// plateformes verticales
"|": () => [
sprite("vertical-platform"),
area(),
solid(),
origin("bot"),
tiling("|","vertical"),
],
// plateformes horizontales
"-": () => [
sprite("horizontal-platform"),
area(),
solid(),
origin("bot"),
tiling("-","horizontal"),
],