A2 · Episode 9 · 5:59
Creating Collision Effects in Game Development
This episode teaches how to implement collision detection in a game: preventing a sprite (penguin) from passing through background elements (e.g., a black wall) or another sprite (e.g., a button), using color sensing and sprite contact detection.
Source：ericgrisperez / tube-numerique-educatif.apps.education.fr · License：CC BY 4.0
Transcript
Bonjour à tous, dans cette vidéo nous allons voir comment créer des collisions entre
Hello everyone! In this video, we’ll learn how to create collisions between a sprite—like this penguin—and a background element.
un lutin, donc ici mon pingouin par exemple, et un élément du décor.
Specifically, this collision will simply mean that our sprite cannot pass through the wall, no matter which side it approaches from.
Donc ici cette collision va simplement se représenter par le fait que mon lutin ne
So, when the sprite hits the wall,
peut pas traverser le mur, quel que soit le côté où il utilise.
it simply cannot go through.
Donc nous allons voir comment faire une collision entre le lutin et un élément du
We’ll learn how to implement collisions between a sprite and a background element,
décor, mais nous allons voir aussi comment faire une collision entre un lutin et un
and also how to implement collisions between two sprites—
autre lutin, symbolisé ici par ce bloc gris qui est juste là,
for example, this gray block right here, which is itself a sprite,
qui est un lutin, et je vois que mon pingouin ne peut pas passer non plus à travers
and I see my penguin can’t pass through it either.
ce lutin- là. Donc voyons comment s'y prendre.
So let’s see how to do it.
Pour le moment, dans mon jeu, j'ai préparé deux lutins:
Right now, in my game, I’ve already set up two sprites:
le lutin pingouin et un lutin bouton à qui j'ai donné une position de départ.
the penguin sprite and a button sprite, for which I’ve set a starting position.
J'ai également un arrière- plan,
I’ve also added a background—
donc ici un arrière- plan blanc où j'ai simplement tracé un rectangle entièrement
specifically, this plain white background, on which I’ve drawn a solid black rectangle.
noir. Du côté du pingouin, j'ai déjà préparé le code de déplacement pour qu'il
For the penguin sprite, I’ve already prepared movement code,
puisse se déplacer dans les quatre directions.
so it can move freely in all four directions.
Ici, je peux voir que pour le moment,
Right now, you can see that
mon pingouin traverse l'ensemble des éléments. Donc moi,
my penguin passes straight through all elements.
je souhaiterais qu'il y ait une collision à chaque fois qu'il approche du rectangle
I want a collision to trigger each time it approaches the black rectangle,
noir, qu'en fait il ne puisse pas le faire.
so it truly cannot go through it.
Donc je vais essayer de trouver un code en ce sens,
So I’ll try writing code for this purpose,
et pareil pour la partie bouton, je ne veux pas qu'il traverse ce bouton.
and likewise for the button—I don’t want the penguin to pass through it either.
Donc j'ai mis à disposition ici
To help with this, I’ve provided five code blocks here,
cinq blocs qui vont être à intégrer dans le programme de déplacement déjà existant,
which need to be integrated into the existing movement program—
donc on n'a pas besoin de refaire.
no need to rebuild it from scratch.
avec un drapeau vert, il faudra agencer l'ensemble de ces blocs,
When you click the green flag, you’ll need to arrange all these blocks,
les glisser au bon endroit.
and drag them into the correct positions.
Et comme il y a quatre directions,
Since there are four directions,
il y aura quatre petits programmes à intégrer avec ces blocs- là.
you’ll need to integrate four small programs using these blocks.
Donc vous allez utiliser quatre fois les cinq blocs.
So you’ll use these five blocks four times.
Donc une fois que vous avez trouvé la bonne organisation de vos blocs,
Once you’ve found the correct arrangement of your blocks,
vous pourrez les dupliquer et les mettre au bon endroit.
you can duplicate them and place them in the right spots.
Pour le moment, le bloc que j'ai sorti, c'est le bloc qui s'occupe de l'axe X.
Right now, the block I’ve dragged out handles the X-axis.
Bien évidemment, quand il faudra s'occuper de Y, ce bloc sera à modifier.
Of course, when handling the Y-axis, this block will need to be adjusted.
Vous pouvez mettre pause sur la vidéo et essayer de résoudre ce défi.
You can pause the video and try solving this challenge.
Voyons maintenant la correction ensemble.
Now let’s review the solution together.
Donc ici, je vois que j'ai un bloc de condition,
Here, I see a conditional block,
donc on va simplement venir ajouter une condition en plus de la condition de capteur
so we’ll simply add one more condition,
déjà appuyé. Donc ici, on va s'occuper pour commencer de la flèche droite.
in addition to the existing sensor-pressed condition. Let’s start with the right arrow.
Donc ça nous permettra de tester immédiatement si notre programme fonctionne.
This lets us immediately test whether our program works.
Donc ici, si la touche flèche droite est pressée,
If the right-arrow key is pressed,
alors mon lutin doit avancer de 10 sur l'axe de x,
then my sprite must move forward by 10 units along the X-axis,
donc on ajoute 10 pixels sur l'axe des x.
i.e., add 10 pixels to the X-axis.
Si je ne veux pas qu'il avance, ça veut dire que je vais lui demander de reculer.
If I don’t want it to move forward, I’ll tell it to move backward instead.
Et ici, je vais lui demander de reculer d'autant de pixels qu'il est censé avancer,
Here, I’ll tell it to move backward by the same number of pixels it was supposed to move forward,
ce qui fait que le mouvement sera nul, parce que 10 pixels moins 10 pixels,
making the net movement zero—since 10 pixels minus 10 pixels,
je serai à zéro, donc mon lutin ne bougera plus.
equals zero, so my sprite won’t move at all.
Donc ici, je vais simplement dire que si.
So here, I’ll simply say ‘if’…
Je vais utiliser mon opérateur ou.
I’ll use the ‘OR’ operator.
Si la couleur noire est touchée, donc la couleur noire ici de mon mur,
If black is touched—i.e., the black color of my wall,
je vais mettre le bloc couleur à l'intérieur.
I’ll place the color block inside.
En appuyant sur la petite couleur ici,
By clicking the small color icon here,
je peux accéder à la pipette qui va me permettre de venir choisir sur ma scène la
I can open the color picker,
couleur que je souhaite, donc ici en noir.
which lets me select the desired color directly from my stage—here, black.
Donc si la couleur noire est touchée ou alors que mon pingouin touche le lutin qui
So, if black is touched, or my penguin touches the sprite named 'button',
se nomme bouton, alors je veux ajouter moins dix à x.
then I want to subtract 10 from x.
Donc ici, je vais ajouter moins dix à x au moment où j'ai dix qui viennent
So here, I’ll subtract 10 from x
s'ajouter, donc c'est bien quand la flèche droite est là.
just when 10 is being added—so that’s exactly when the right arrow key is pressed.
Donc je vais venir l'ajouter juste en dessous.
So I’ll add it right below this line.
Donc si, hop là, juste là, si la flèche droite est pressée,
So if—there we go, right here—the right arrow key is pressed,
alors j'ajoute dix à x. Par contre,
then I add 10 to x. However,
si la couleur noire est touchée ou touche le bouton, j'ajoute moins dix.
if black is touched, or the button is touched, I subtract 10.
Donc il faut bien que les conditions, vous voyez ici, soient décalées,
So the conditions—see here—must be offset,
c'est- à- dire que cette condition- là, si couleur noire est touchée,
meaning this condition—'if black is touched'—
elle ne fonctionne que si la flèche droite est déjà pressée en même temps.
only works when the right arrow key is already pressed at the same time.
Je teste en appuyant sur le drapeau vert, j'appuie sur la flèche droite,
I test by clicking the green flag, then pressing the right arrow key,
et là je vois que mon lutin ne peut plus traverser dans ce sens- là.
and now I see my sprite can no longer pass through in this direction.
En revanche, si je fais le tour, je peux toujours passer à travers.
However, if I go around, I can still pass through from the other side.
Donc je vais simplement dupliquer le programme à partir du" si touche la couleur",
So I’ll simply duplicate the program starting from 'if touching color',
et je vais venir modifier cette valeur- là.
and then modify this value.
Donc là, sur la flèche gauche appuyée, on ajoute- 10 pour aller
So now, when the left arrow key is pressed, we subtract 10,
sur la gauche de notre axe.
to move left along the x-axis.
Donc ici, en sens inverse, si je ne veux plus qu'il bouge, je vais ajouter 10.
So in the opposite direction, if I don’t want it to move anymore, I’ll instead add 10.
Je viens ajouter ce bloc en dessous de" ajouter 10 à x",
I place this block right below 'add 10 to x',
donc j'ai bien le décalage différencié.
so the offsets are properly differentiated.
Je teste, je ne peux pas passer à droite, je fais le tour,
I test again: I can’t go right; when I go around,
je ne peux pas passer à gauche.
I also can’t go left.
Et on va faire ça de même manière dans les quatre directions.
And we’ll do the same for all four directions.
Donc là, maintenant, vous l'aurez compris,
So now you’ve understood:
ici on va travailler sur l'axe des y, donc ce bloc- là,
here we’re working on the y-axis, so this block
je ne peux plus l'utiliser. Je vais aller chercher directement le" ajouter 10 à y".
can no longer be used—I’ll go straight to 'add 10 to y'.
Donc ajouter 10 à y interviendra pour la flèche du bas.
So adding 10 to y controls the downward arrow.
Et je le duplique à nouveau, je vais mettre- 10 à y cette fois- ci pour la flèche du
And I duplicate it again—I’ll subtract 10 from y this time,
haut. J'appuie sur le drapeau vert, je teste,
for the upward arrow. I click the green flag to test it:
donc je ne peux pas passer dans ce sens- là,
I can’t pass through in this direction,
je ne peux pas passer à travers en descendant, je ne peux pas aller à gauche,
can’t go down through it, and can’t move left,
et pour le bouton, pareil, je ne peux plus passer à travers.
and the button behaves the same—I can’t pass through it anymore.
Donc là, on a créé une collision au niveau du mouvement de notre pingouin,
Now we’ve created collision detection for our penguin’s movement,
entre un élément du décor en sélectionnant le capteur de couleur,
by selecting the color sensor to detect collisions with background elements,
et entre un lutin en sélectionnant le capteur de contact avec un autre lutin.
and by selecting the ‘touching another sprite’ sensor to detect collisions with other sprites.
Donc voilà comment faire, par exemple, un jeu de labyrinthe.
This is how you’d make, for example, a maze game.