De Scratch Wiki en français


Collisions & Hitbox


Introduction

L'interaction entre deux objets peut être dépendante de leur collision ou d'un contact entre eux, voyons pour cela les outils dont nous disposons:

Détection de contact

Dans le cadre de la détection de la collision de deux objets, il faut pouvoir définir l'espace pris et la position de chaque objet.

Scratch nous fournit des outils puissants pour cela. Il s'agit des trois blocs suivant:

Bloc Explication
<[sprite v] touché?::sensing> 
Ce bloc permet de savoir si l'apparence graphique du sprite (costume) se superpose au costume d'un autre objet. Cette fonction s'avère utile pour des collisions simples avec peu d'objets différents.
<couleur [#ff0000] touchée?>
Ce bloc-ci permet de savoir si le sprite dans lequel le bloc est placé touche une couleur indiquée. Cette fonction s'avère utile pour les collisions avec un même type d'objet (par exemple le sol) qui sera d'une couleur unie. Ce bloc ne réagit que si la couleur touchée est exactement la même que celle sélectionnée dans le bloc.
<couleur [#ff0000] touche [#00ff00] ?>
Ce bloc-là permet de savoir si la première couleur indiquée dans le bloc (la couleur doit être présente dans le sprite) touche la deuxième couleur (qui doit être en dehors du sprite, sur un autre élément). L'apparence graphique du sprite .

Hitbox

Hitbox simple

Une "hitbox", ou "boite de collision" en français, est une zone rattachée à un sprite ou aux décors et qui réagit à des collisions particulières. Il s'agit généralement d'une forme simple (carré, disque...) englobant au mieux un sprite ou une zone.

La hitbox doit être créée comme un sprite à part entière, on dessine alors une forme pleine (coloriée) aux proportions et forme souhaitées.

Ce sprite doit être transparent mais pas "caché". On utilise pour cela l'effet fantôme. mettre l'effet [fantôme v] à (100)

Aussi, le sprite doit se positionner correctement sur le sprite souhaité ou la zone souhaitée.

Attention, il faut bien positionner le dessin de la hitbox par rapport à la croix repère au centre de la zone de dessin afin qu il se superpose avec les graphismes du sprite.

Pour tester la collision, il faut mettre dans les objets devant interagir avec les hitbox un script ayant pour condition le bloc <touche le [hitbox v] ?>.

Cela nous donne donne:

mettre l'effet [fantôme v] à (100)
répéter indéfiniment
aller à [sprite à traquer v]
si <touche le [hitbox v] ?> alors
fin
fin

Hitbox avancée

La hitbox d'un sprite peut en réalité se composer de différentes hitbox, par exemple une à gauche du sprite, une à droite, une en bas, et une en haut. En effet, dans un jeu de plateforme, la réaction n'est pas la même si les pieds du personnage touchent le sol ou la tête touche le plafond. Chaque sous-partie de hitbox doit être un sprite différent.

Les objets en interaction (Objet A par exemple) peuvent aussi avoir une hitbox, pour tester la collision, il faudra tester la condition Si (Hitbox objet A) touche (hitbox)

Collisions

Collision physique

Pour interpréter les collisions dans la physique du jeu il faudra créer des hitbox pour les objets concernés (personnage (4 hitbox : haut/bas/gauche /droite), Sol, Plafond, Mur)

Si la hitbox droite du personnage touche un mur, il faudra alors annuler sa vitesse x si elle est positive.

Si la hitbox gauche du personnage touche un mur, il faudra alors annuler sa vitesse x si elle est négative.

Si la hitbox haut du personnage touche un plafond, il faudra alors annuler sa vitesse y si elle est positive.

Si la hitbox droite du personnage touche le sol, il faudra alors annuler sa vitesse y si elle est négative.

On peut extrapoler ces relations à d'autres collisions, comme un ennemi qui pousse le personnage, le recul subis après la réception d'une balle, d'une explosion...

Une hitbox placée dans le niveau peut aussi entraîner des réaction dans le gameplay si le personnage les traverse (changement de gravité, fin de niveau)

Collisions dynamiques

Une collision peut aussi transmettre une partie de sa vitesse Si l'objet percuté est petit il devra plus accélérer que le gros objet qui le percute ralentit, et inversement (exemple : une grosse bille qui en percute une petite)

Détection mathématique

On peut facilement détecter si un objet se trouve dans un cercle dont on connait le rayon et les coordonnées du centre

Formule

Prenons l' objet A de coordonnées Xa et Ya, ainsi qu'un cercle de rayon R et de coordonées Xc et Yc

Si Racine((Xc-Xa)*(Xc-Xa)+(Yc-Ya)*(Yc-Ya))<R Alors l'objet A est dans le périmètre du cercle.

Utilisation

On peut utiliser cette formule par exemple pour savoir si le personnage est dans la zone de tir d'un ennemi, ou dans les limites du niveau...

On peut aussi l'utiliser pour créer un système de murs n'utilisant pas les sprites (et dont l'apparence sera faite par l'outil Stylo)

Il faut pour cela créer 3 listes, MurX, MurY et Radius

A chaque actualisation, il faudra parcourir ces listes dans leur intégralité, dont chaque couple d'éléments Element (n) de (MurX), Element (n) de (MurY) et Element (n) de (Radius) correspond au couple Xc, Yc et R du mur numéro n

Ainsi, à chaque actualisation, on vérifie à l'aide de la formule citée précédemment si l'objet A se trouve dans le périmètre du mur numéro 1, puis 2, puis 3,..., puis n.

A chaque actualisation graphique il faudra parcourir ces listes et avec un sprite nommé "Graph" activer les scripts suivants

0 Effacer Tout

Répéter pur n allant de 1 à Longueur de(MurX)

[

1 Lever le stylo

2 Aller à (Element (n) de (MurX))(Element (n) de (MurY)

3 Poser le stylo

]

Si le sprite se trouve dans un des périmètres, il faudra alors faire reculer le sprite de ce qu'il vient d'avancer pour annuler son déplacement

Ce système présente les avantages d'une grande flexibilité, d'une certaine facilité de mise en place, mais peut fortement ralentir le jeu si le nombre de murs est important, car on doit tester tous les périmètres à chaque frame de jeu. L'actualisation graphique peut elle aussi être lente et nécessiter l'activation du "mode turbo"

Cet article fait partie de la catégorie des tutos
Tous les articles de cette catégorie :
Les cookies nous aident à fournir nos services. En utilisant nos services, vous acceptez notre utilisation des cookies.