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
<[lutin v] touché?>
Ce bloc permet de savoir si l'apparence graphique du lutin (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 lutin 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 lutin) touche la deuxième couleur (qui doit être en dehors du lutin, sur un autre élément). L'apparence graphique du lutin .

Hitbox

Hitbox simple

Une hitbox est une zone rattachée à un lutin ou au 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 lutin ou une zone.

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

Ce lutin doit être transparent mais pas "caché". On utilise pour cela l'effet fantôme.a fonction Mettre l'effet (fantôme) à 100

Aussi, le lutin doit se positionner correctement sur le lutin 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 lutin

Pour tester la collision, il faut mettre dans les objets devant interagir avec les hitbox un script ayant pour condition le bloc Si (hitbox) touché.

Cela nous donne donne:

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

Hitbox avancée

La hitbox d'un lutin peut en réalité se composer de différentes hitbox, par exemple une à gauche du lutin, 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 lutin 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 lutins (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 lutin 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 lutin se trouve dans un des périmètres, il faudra alors faire reculer le lutin 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: