course n°6 · Découverte

What is a sprite?

A sprite is a rectangle with a costume: four numbers, one image, zero soul.

~11 min7 stations

42 seconds · English captions included · 8.4 Mo

The 7 things you'll know how to do

Lesson 6: What is a sprite?

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

The hero = four numbers

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

Change the costume

É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.

The rectangle's footprint

É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.

Who's in front?

É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.

Create in one line

É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.

Lesson 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.

Share the lesson

← all courses

📄 The cheat sheet

print it, stick it on your monitor, pretend it was your idea

📄 Cheat sheet — What is a sprite?

Your hero has no soul: he has a hash. Rectangle, image, data. That's it.

The sprite, taken apart

sprite = {
  "x" => 10,     # where it starts (top-left corner)
  "y" => 20,
  "l" => 32,     # width
  "h" => 32,     # height
  "image" => "carre"   # the costume, drawn ON TOP
}

4 numbers + 1 image. Remove the image → the square remains. There's your player.

The footprint: what collides

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

Origin in the top-left: x goes right, y goes down (the screen is like that).
< not <=: the right edge belongs to the neighbor. Edge to edge = no collision.
You never touched a wall — you touched coordinates.

The two rectangles that meet

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

Each must be to the left of the other's end, on both axes. Argument order changes nothing (test it: collision(a, b) == collision(b, a) — it's even a check in the game 😉).

Behind / in front

def devant?(a, b)
  a["y"] > b["y"]    # lower on screen = covers the one above
end

No >=: on a tie, neither "wins". (Same spirit as the rectangle edge — we don't invent half rules.)

Change the costume (without breaking the original)

sprite.merge("image" => "fantome")   # copy
sprite.merge!(…)                     # no — that modifies the original. Classic trap.

The sentence that unlocks everything

Rectangle, image, data. Now — let's move it. (→ Lesson 7: x, y, speed, loop.)

Never say again

~~"my player moves"~~ → it will move in lesson 7; here it barely exists
~~"the sprite has a size"~~ → you gave it l and h. It never asked.

SlopCourse Microduck — from slop to clean code.