Bouger un sprite
Un sprite, c'est un rectangle : x, y, vitesse, boucle. Tout un jeu tient dans ces quatre mots.
42 secondes · sous-titres Français inclus · 8.4 Mo
Les 7 trucs que tu vas savoir faire
Leçon 7 : Bouger un sprite
Regarde la leçon (42 s) : tout jeu vidéo se résume à faire bouger les coordonnées d'un rectangle. Spoiler : c'est fait.
La position, deux nombres
Pose la position de départ : `x = 10` et `y = 20`. Ton sprite n'existe pas encore — il est juste quelque part.
Bouger, c'est additionner
Écris `avancer(x, vitesse)` qui renvoie la nouvelle position en x. Flèche droite = vitesse positive, flèche gauche = négative.
Les deux axes
Écris `deplace(x, y, dx, dy)` qui renvoie la nouvelle position sous forme de tableau `[nouveau_x, nouveau_y]` — les deux axes en une seule passe.
60 fois par seconde
Écris `anime(x, tours, vitesse)` : à chaque tour, on avance de `vitesse`. Après 60 tours à vitesse 1 depuis 0, x vaut 60 — sans écrire 60 lignes.
La touche choisit un signe
Écris `touche(fleche, x, vitesse)` : "droite" → x + vitesse · "gauche" → x − vitesse · toute autre touche → x inchangé. Ta touche ne pousse rien, elle choisit un signe.
Leçon 7 : OK
Sans aide : `bouge(x, dx, largeur = 100)` — avance de dx, mais reste DANS l'écran : la position finale reste toujours entre 0 et `largeur` inclus.
📄 La feuille de chute
imprime-la, colle-la à ton écran, fais semblant que c'est ton idée📄 Cheat sheet — Bouger un sprite (x, y dans l'espace)
Un sprite est un rectangle. Bouger, c'est faire des maths sur deux nombres. Voilà, t'es game dev.
Les 4 mots du métier
| Mot | Ce que c'est | Exemple |
|---|---|---|
| position | où il est, 2 nombres | x = 10, y = 20 |
| vitesse | de combien il bouge | vitesse = 5 |
| delta | le changement de cette frame | dx = vitesse |
| boucle | on recommence, 60×/s | regarde → déplace → redessine |
Bouger = additionner
x = 10
x += 5 # droite (x = 15)
x -= 5 # gauche (x = 10)
def avancer(x, vitesse)
x + vitesse # la vitesse NÉGATIVE va à gauche — c'est tout
end
Les deux axes, en une passe
def deplace(x, y, dx, dy)
[x + dx, y + dy] # diagonale = les deux bougent
end
deplace(0, 0, 3, 4) # => [3, 4]
Rappel de l'écran : x → gauche/droite (souvent inversé aux joysticks 😉), y → haut/bas.
En haut de l'écran, y diminue : l'origine (0,0) est en haut-gauche dans la plupart des moteurs.
La boucle qui fait tout le jeu
def anime(x, tours, vitesse)
tours.times { x += vitesse } # 60 frames = 1 seconde de jeu
x
end
anime(0, 60, 1) # => 60
Le jeu ne bouge pas : il se répète. C'est la seule chose qui se passe pendant que tu joues.
Les touches choisissent un signe
case fleche
when "droite" then x + vitesse
when "gauche" then x - vitesse
else x # touche inconnue : rien ne bouge
end
Ta touche ne pousse rien : elle choisit un + ou un −.
Le piège du bord d'écran
(x + dx).clamp(0, largeur) # jamais en dessous de 0, jamais au-delà de la largeur
Sans clamp, ton rectangle part visiter le vide — et le joueur te le fait payer.
À ne plus jamais dire
"le sprite avance"→ tes coordonnées avancent, le rectangle reste un rectangle"un moteur de jeu"→ pour bouger un carré, tu n'as pas besoin d'un moteur. Juste d'un+.
SlopCourse — du slop au code propre.