Comprendre ce qu'est une collision - Quand deux objets se touchent
Détecter collision entre cercles - Utiliser la distance entre centres
Détecter collision entre rectangles - Vérifier l'intersection
Réagir à une collision - Changer couleur, score, game over
L'objectif de l’activité est d'apprendre :
la récupération de la position de la souris
la détection de la collision entre deux cercles
le changement dynamique de couleur
Étape 1 : Créez un fichier nommé collision_cc.c.
Étape 2 : Créer la fenêtre.
800 × 600 : taille de la fenêtre
60 FPS : le programme se met à jour 60 fois par seconde
Étape 3 : Définir les variables des cercles
Créer les variables qui définissent la position et le rayon des cercles.
// Cercle 1 (contrôlé par souris)
Vector2 cercle1 = { 400, 300 };
int rayon1 = 40;
// Cercle 2 (fixe)
Vector2 cercle2 = { 600, 300 };
int rayon2 = 50;
Étape 4 : Créer une variable de collision
Ajouter une variable pour mémoriser si les cercles se touchent.
bool collision = false;
Étape 5 : Déplacer le premier cercle avec la souris.
Lire la position de la souris.
cercle1.x = GetMouseX();
cercle1.y= GetMouseY();
Étape 6 : Tester la collision.
Deux cercles sont en collision si la distance < somme des rayons
collision = CheckCollisionCircles(cercle1, rayon1, cercle2, rayon2);
Étape 7 : Choisir la couleur selon la collision.
Color couleur1 = collision ? RED : BLUE;
Color couleur2 = collision ? ORANGE : GREEN;
Étape 8 : Dessiner les cercles.
DrawCircle(cercle1.x, cercle1.y, rayon1, couleur1);
DrawCircleLines(cercle1.x, cercle1.y, rayon1, BLACK);
DrawCircle(cercle2.x, cercle2.y, rayon2, couleur2);
DrawCircleLines(cercle2.x, cercle2.y, rayon2, BLACK);
Étape 9 : Afficher le message
if (collision) {
DrawText("COLLISION !", 350, 200, 30, RED);
} else {
DrawText("Pas de collision", 330, 200, 30, DARKGRAY);
}
Étape 10 : Fermer le programme.
Après la boucle, ajoutez :
CloseWindow();
Expérimentation guidée
Approchez lentement le cercle bleu du cercle vert
Observez la distance qui diminue
Notez le moment où la couleur change (quand distance < somme rayons)
Essayez de passer à travers - Impossible ! La collision est détectée
Questions
❓ Si rayon1=40 et rayon2=50, à partir de quelle distance y a-t-il collision ? (moins de 90)
❓ Que se passe-t-il si on met les cercles très loin ?
❓ Pourquoi utilise-t-on sqrt ?
L'objectif de l’activité est d'apprendre :
la récupération de la position de la souris
la détection de la collision entre deux rectangles
le changement dynamique de couleur
Étape 1 : Créez un fichier nommé collision_rr.c.
Étape 2 : Créer la fenêtre.
800 × 600 : taille de la fenêtre
60 FPS : le programme se met à jour 60 fois par seconde
Étape 3 : Créer les rectangles.
Définir les deux rectangles du programme.
Rectangle rect1 = { 0, 0, 80, 60 };
Rectangle rect2 = { 500, 250, 100, 80 };
Étape 4 : Créer la variable de collision.
bool collision = false;
Étape 5 : Déplacer le rectangle avec la souris.
Le rectangle 1 suit la souris.
rect1.x = GetMouseX() - rect1.width/2;
rect1.y = GetMouseY() - rect1.height/2;
Étape 6 : Détecter la collision.
Raylib possède une fonction prête à l’emploi :
collision = CheckCollisionRecs(rect1, rect2);
Étape 7 : Choisir les couleurs
Changer la couleur selon la collision.
Color couleur1 = collision ? RED : BLUE;
Color couleur2 = collision ? ORANGE : GREEN;
Étape 8 : Dessiner les rectangles
DrawRectangleRec(rect1, couleur1);
DrawRectangleLines(rect1.x, rect1.y, rect1.width, rect1.height, BLACK);
DrawRectangleRec(rect2, couleur2);
DrawRectangleLines(rect2.x, rect2.y, rect2.width, rect2.height, BLACK);
Étape 9 : Afficher l’état de collision.
if (collision) {
DrawText("COLLISION !", 350, 200, 30, RED);
} else {
DrawText("Pas de collision", 330, 200, 30, DARKGRAY);
}
Étape 10 : Fermer le programme.
Après la boucle, ajoutez :
CloseWindow();
Expérimentation guidée
Approchez le rectangle bleu du rectangle vert
Observez quand la collision est détectée
Essayez différents angles d'approche
Que se passe-t-il quand ils se chevauchent juste un peu ?
Questions
❓ La fonction CheckCollisionRecs() détecte-t-elle même un chevauchement d'un pixel ?
❓ Comment ferait-on sans la fonction de Raylib ? (Il faudrait vérifier les 4 côtés)
L'objectif de l’activité est d'apprendre :
la récupération de la position de la souris
la détection de la collision entre un cercle et un rectangle
le changement dynamique de couleur
Étape 1 : Créez un fichier nommé collision_cr.c.
Étape 2 : Créer la fenêtre.
800 × 600 : taille de la fenêtre
60 FPS : le programme se met à jour 60 fois par seconde
Étape 3 : Définir le cercle.
Créer les variables du cercle.
Vector2 cercle = { 600, 300 };
int rayon = 40;
Étape 4 : Définir le rectangle.
Créer le rectangle fixe.
Rectangle rect = { 500, 250, 120, 80 };
Étape 5 : Créer la variable de collision.
bool collision = false;
Étape 6 : Mettre à jour la position du cercle.
Le cercle suit la souris.
cercle.x = GetMouseX();
cercle.y = GetMouseY();
Étape 7 : Détecter la collision.
Raylib possède une fonction spéciale pour cette collision :
collision = CheckCollisionCircleRec(cercle, rayon, rect);
Étape 8 : Choisir les couleurs
Changer les couleurs selon la collision.
Color couleurCercle = collision ? RED : BLUE;
Color couleurRect = collision ? ORANGE : GREEN;
Étape 9 : Dessiner le cercle.
DrawCircle(cercle.x, cercle.y, rayon, couleurCercle);
DrawCircleLines(cercle.x, cercle.y, rayon, BLACK);
Étape 10 : Dessiner le rectangle.
DrawRectangleRec(rect, couleurRect);
DrawRectangleLines(rect.x, rect.y, rect.width, rect.height, BLACK);
Étape 11 : Afficher l’état de collision.
DrawRectangleRec(rect, couleurRect);
DrawRectangleLines(rect.x, rect.y, rect.width, rect.height, BLACK);
Étape 12 : Fermer le programme.
Après la boucle, ajoutez :
CloseWindow();