Créer la scène

Charger les textures

Vous commencez à avoir l’habitude, ce n’est pas la partie la plus intéressante 😉 Voici donc simplement le code à ajouter aux textures que vous chargez déjà :

floor: {
  x: 16,
  y: 64,
  width: 48,
  height: 48,
  sliceX: 3,
  sliceY: 3,
},
wall: {
  x: 16,
  y: 16,
  width: 16,
  height: 16,
},
wall_top: {
  x: 16,
  y: 0,
  width: 16,
  height: 16,
},
wall_left: {
  x: 16,
  y: 128,
  width: 16,
  height: 16,
},
wall_right: {
  x: 0,
  y: 128,
  width: 16,
  height: 16,
},
wall_topleft: {
  x: 32,
  y: 128,
  width: 16,
  height: 16,
},
wall_topright: {
  x: 48,
  y: 128,
  width: 16,
  height: 16,
},
wall_botleft: {
  x: 32,
  y: 144,
  width: 16,
  height: 16,
},
wall_botright: {
  x: 48,
  y: 144,
  width: 16,
  height: 16,
},

La scène

Commençons par créer le fichier spawn.js dans le dossier scenes.

Pour créer une scène, nous avons besoin :

• d’un nom
• d’une fonction de callback

Cette fonction contiendra toute la logique de la scène :

• affichage du niveau
• placement des objets
• gestion du héros
• interactions, etc.

scene("spawn", () => {
  // Code de la scène
});

👉 Une scène représente un moment précis du jeu (ici, le niveau de départ).

Le niveau

À cause de la forme de nos textures (des carrés), le plus simple est de construire la scène comme un ensemble de tuiles (ou de cases).

Dans notre scène, on va utiliser deux niveaux de tuiles :

• un arrière-plan (décoratif, le sol)
• un premier plan, au même niveau que le héros (murs, obstacles, éléments interactifs)

Représenter un niveau

Une manière simple et efficace de représenter un niveau est d’utiliser un tableau de chaînes de caractères.

Chaque caractère représente une case.

Exemple :

const sol = [
  "x        x",
  "x        x",
  "x        x",
  "x        x",
  "x        x",
];

• "x" → mur
• " " → sol

scene("spawn", () => {
  addLevel(sol, {
    tileWidth: 16,
    tileHeight: 16,
    tiles: {
      " ": () => [sprite("floor", { frame: ~~rand(0, 8) })],
    },
  });

  const map = addLevel(niveau, {
    tileWidth: 16,
    tileHeight: 16,
    tiles: {
      "<caractere>": () => [<composants>],
    },
  });
});

Ajouter le héros dans le niveau

Dans la fonction de callback de la scène :

const hero = map.spawn([<composants>], <position X>, <position Y>);

// Rajoute ici le code pour gérer les déplacements du héros

Attacher la caméra au héros

Tout jeu qui se respecte a besoin d’une caméra bien gérée.

👉 Objectif: on veut que la caméra suive le héros.