cours n°6 · Découverte

Qu'est-ce qu'un sprite ?

Un sprite, c'est un rectangle avec un déguisement : quatre nombres, une image, zéro âme.

~11 min7 stations

42 secondes · sous-titres Français inclus · 8.5 Mo

Les 7 trucs que tu vas savoir faire

Leçon 6 : Qu'est-ce qu'un sprite ?

Regarde la leçon (42 s) : démonte ton héros — rectangle, image, données — avant même de le faire bouger.

Le héros = quatre nombres

Écris `sprite` : un Hash avec `"x" => 10`, `"y" => 20`, `"l" => 32`, `"h" => 32` (des NOMBRES) et `"image" => "carre"`. Le héros complet tient là.

Changer de déguisement

Écris `habille(sprite, image)` qui renvoie un NOUVEAU hash : mêmes coordonnées, nouvelle image. L original ne bouge pas — tu copies, tu ne détruits.

L'empreinte du rectangle

Écris `touche?(sprite, px, py)` : true si le point est DANS le rectangle — `px >= x` ET `px < x + l` (idem pour y). Le bord droit ne compte pas : le bord appartient au voisin.

Qui est devant ?

Écris `devant?(a, b)` : a est devant (couvre b) s'il est STRICTEMENT plus bas à l'écran — origine en haut à gauche, donc plus grand y = plus devant. Égalité → false.

Créer en une ligne

Écris `nouveau_sprite(x, y)` : renvoie le hash complet avec les défauts du jeu — `l` et `h` à 32, `image` à "carre" — et les coordonnées reçues prises telles quelles.

Leçon 6 : OK

Sans aide : `collision(a, b)` — true si les deux rectangles se chevauchent (strictement). Toucher bord à bord ne compte PAS : le bord appartient au voisin.

Partage la leçon

← tous les cours

📄 La feuille de chute

imprime-la, colle-la à ton écran, fais semblant que c'est ton idée

📄 Cheat sheet — Qu'est-ce qu'un sprite ?

Ton héros n'a pas d'âme : il a un hash. Rectangle, image, données. C'est tout.

Le sprite, démonté

sprite = {
  "x" => 10,     # où il commence (coin haut-gauche)
  "y" => 20,
  "l" => 32,     # largeur
  "h" => 32,     # hauteur
  "image" => "carre"   # le déguisement, dessiné PAR-DESSUS
}

4 nombres + 1 image. Enlève l'image → il reste le carré. Voilà ton perso.

L'empreinte : ce qui percute

def touche?(sprite, px, py)
  px >= sprite["x"] && px < sprite["x"] + sprite["l"] &&
  py >= sprite["y"] && py < sprite["y"] + sprite["h"]
end

Origine en haut à gauche : x vers la droite, y vers le bas (l'écran est comme ça).
< et non <= : le bord droit appartient au voisin. Bord à bord = pas de collision.
Tu n'as jamais touché un mur — tu as touché des coordonnées.

Les deux rectangles qui se rencontrent

def collision(a, b)
  a["x"] < b["x"] + b["l"] && b["x"] < a["x"] + a["l"] &&
  a["y"] < b["y"] + b["h"] && b["y"] < a["y"] + a["h"]
end

Chacun doit être à gauche de la fin de l'autre, sur les deux axes. L'ordre des arguments ne change rien (teste-le : collision(a, b) == collision(b, a) — c'est même un check dans le jeu 😉).

Derrière / devant

def devant?(a, b)
  a["y"] > b["y"]    # plus bas à l'écran = couvre celui du dessus
end

Pas de >= : à égalité, aucun ne « gagne ». (Même esprit que le bord du rectangle — on n'invente pas de règles à moitié.)

Changer de déguisement (sans casser l'original)

sprite.merge("image" => "fantome")   # copie
sprite.merge!(…)                     # non — ça modifie l'original. Piège classique.

La phrase qui débloque tout

Rectangle, image, données. Maintenant — bougeons-le. (→ Leçon 7 : x, y, vitesse, boucle.)

À ne plus jamais dire

~~"mon perso avance"~~ → il avancera dès la leçon 7 ; là, il existe à peine
~~"le sprite a une taille"~~ → tu lui as donné l et h. Il n'a rien demandé.

SlopCourse Microduck — du slop au code propre.