Workshops - Noé Tatoud
L'atelier

Premières interactions

Se balader sur la scène c'est bien ! Interagir avec, c'est mieux !

Collisions avec les murs

Jusqu’ici, le héros peut se déplacer librement… même à travers les murs. Ce n’est pas très pratique pour un jeu 😅

👉 Objectif : empêcher le héros de traverser les murs du décor

Rendre les murs “solides”

Pour qu’un mur bloque le héros, il faut que le moteur du jeu comprenne deux choses :

  • où se trouve le mur
  • qu’il doit empêcher le passage

Quel composant permet de définir une zone de collision sur un objet ?

Quel composant rend un objet “solide” (c’est-à-dire qu’on ne peut pas le traverser) ?

Identifier les murs dans le niveau

Dans ton niveau (avec addLevel), chaque caractère représente un type de tuile.

👉 Pour pouvoir gérer les collisions, il faut pouvoir dire : “ceci est un mur”.

Comment différencier un mur du sol dans la table tiles ?

Comment donner un “nom” ou un type à un objet pour le reconnaître plus tard ?

Vérifier que les collisions fonctionnent

Avant d’aller plus loin, on veut simplement vérifier une chose :

👉 le héros ne traverse plus les murs

Comment peux-tu t’assurer que le héros entre bien en collision avec un mur ?

Que devrait-il se passer visuellement si la collision est bien gérée ?

Indice : si tout est bien configuré, le héros s’arrête naturellement contre le mur, sans code supplémentaire.


Coffre mystère — équiper le héros

Objectif

Dans le jeu, on veut obtenir le comportement suivant :

  • le héros peut s’approcher d’un coffre
  • le joueur choisit de l’ouvrir (appui sur une touche)
  • le coffre s’ouvre visuellement
  • le héros obtient une épée
  • le joueur comprend que le héros est maintenant équipé

Charger les textures

assets.js
// ...
chest: {
     x: 304,
     y: 304,
     width: 48,
     height: 16,
     sliceX: 3,
     anims: {
         open: {
             from: 0,
             to: 2,
             speed: 20,
             loop: false,
         },
         close: {
             from: 2,
             to: 0,
             speed: 20,
             loop: false,
         },
     },
 },
 sword: {
     x: 322,
     y: 81,
     width: 12,
     height: 30,
 },
 // ...

Détecter la présence du coffre

Quels composants faut-il ajouter au coffre pour pouvoir détecter le héros ?

Comment reconnaître qu’un objet touché est bien un coffre, et pas autre chose ?

Ouvrir le coffre volontairement

On ne veut pas que le coffre s’ouvre automatiquement.

👉 Objectif : le joueur doit appuyer sur une touche pour l’ouvrir

Quel événement clavier permet de déclencher une action au moment précis où une touche est pressée ?

Comment t’assurer que l’action ne se déclenche que si le héros est proche du coffre ?

Donner l’épée au héros

Où stockerais-tu l’information « le héros a une épée » ?

Comment éviter que le joueur récupère plusieurs épées ?

Quel retour visuel simple peux-tu utiliser pour montrer que le héros est équipé ?

Afficher l’épée

Tu peux faire apparaître l'épée en l'attachant au héros et en définissant sa position relative


🎉 Le héros interagit maintenant avec le décor, respecte les murs… et peut s’équiper !

On this page