A2 · Episode 5 · 7:36
Smooth Movement with Keyboard Arrow Keys
This episode teaches how to create smooth, responsive character movement using keyboard arrow keys in Scratch, comparing the 'when key pressed' block (for single actions) with continuous detection inside a forever loop for fluid motion.
Source：ericgrisperez / tube-numerique-educatif.apps.education.fr · License：CC BY 4.0
Transcript
Bonjour à tous, dans cette vidéo nous allons continuer notre travail sur le
Hello everyone, in this video we’ll continue our work on sprite movement.
déplacement des lutins.
sprite movement.
Nous allons organiser une course entre ces deux singes.
We’ll organize a race between these two monkeys.
J'ai préparé un programme pour chacun.
I’ve prepared a program for each one.
Dans chaque programme, lorsque la flèche droite du clavier est pressée,
In each program, when the right arrow key is pressed,
le singe doit se diriger vers la droite de l'écran en avançant de dix pixels.
the monkey must move ten pixels to the right of the screen.
Attention, trois, deux, un, c'est parti!
Attention: three, two, one—go!
Le singe rouge a gagné.
The red monkey won.
Mais comment est- ce possible alors que chaque singe avance de dix pixels à chaque
But how is that possible, since each monkey moves ten pixels every time
fois que la flèche droite est appuyée?
the right arrow key is pressed?
Il s'agit ici du temps de réaction de l'ordinateur.
This involves the computer’s response time.
Un des deux programmes est optimisé pour que l'ordinateur donne rapidement les
One of the two programs is optimized so the computer can quickly
instructions au lutin.
send instructions to the sprite.
C'est à dire que le programme utilise des blocs qui demandent à l'ordinateur de
That is, the program uses blocks that tell the computer to pay special attention to the keyboard’s right arrow key.
rester attentif particulièrement à la touche flèche droite du clavier.
to the keyboard’s right arrow key.
Regardons de plus près ces deux programmes.
Let’s take a closer look at these two programs.
Le premier programme, celui du singe marron,
The first program—the brown monkey’s program—
est celui que nous connaissons déjà. J'ai ici un bloc qui me permet de positionner
is one we already know. Here I have a block that positions my sprite on the screen;
mon lutin sur l'écran, et ensuite ici deux programmes qui permettent de le déplacer.
then here are two scripts that control its movement.
À chaque fois que j'appuie sur la touche,
Each time I press the key,
l'ordinateur demande au lutin d'avancer de dix pixels.
the computer tells the sprite to advance ten pixels.
En revanche, lorsque je reste appuyé,
By contrast, when I hold the key down,
l'ordinateur doit prendre un temps pour renvoyer l'instruction au lutin.
the computer takes some time before sending the instruction to the sprite again.
En effet, le bloc quand la touche est appuyée est plutôt réservé à un appui unique.
Indeed, the ‘when key is pressed’ block is better suited for single presses.
Par exemple dans un jeu, si je dois ramasser un objet ou entrer dans une maison,
For example, in a game—if I need to pick up an item or enter a house—
il est souvent nécessaire d'appuyer sur une touche et pour cela je n'appuie qu'une
I usually only need to press a key once.
seule fois. Dans ce cas, ce bloc est utile.
In that case, this block is useful.
Alors comment faire si j'ai besoin de me déplacer et d'avoir un mouvement rapide et
So, what should I do if I need to move and have quick,
fluide sans saccade?
smooth, and jerk-free motion?
Regardons ça ensemble.
Let’s look at this together.
Nous allons ici travailler avec le singe rouge.
Next, we’ll work with the red monkey sprite.
Je suis déjà avec le programme qui me permet de le positionner sur la scène à l'aide
I already have the program open, which lets me position it on the stage using
de mes coordonnées X Y pour le placer en haut à gauche de l'écran.
my X and Y coordinates to place it in the top-left corner of the screen.
Nous allons ensuite demander à l'ordinateur de se concentrer et de regarder si la
Then, we’ll ask the computer to continuously monitor and check whether
touche pour se déplacer est appuyée.
the key for movement is being pressed.
Pour commencer, nous allons utiliser un bloc d'événement.
To begin, we’ll use an event block.
Nous allons ici choisir le drapeau vert.
Here, we’ll select the green flag.
C'est lui qui va déclencher notre jeu, c'est pour cela que nous commençons
It’s this block that will start our game, which is why we begin with this event.
par cet événement.
(This is our starting point.)
Ensuite nous allons poser une condition si alors.
Next, we’ll add an “if-then” conditional block.
Les blocs de conditions sont rangés dans la catégorie contrôle.
Conditional blocks are located in the “Control” category.
Je vais sortir un bloc si alors et je viens l'ajouter à mon drapeau vert.
I’ll drag out an “if-then” block and attach it to my green flag.
Je vois ici que les deux éléments sont liés comme un puzzle.
I see these two blocks fit together like puzzle pieces.
Nous souhaitons ici faire avancer le lutin si la flèche droite est appuyée.
We want the sprite to move forward when the right arrow key is pressed.
Donc nous allons avoir besoin d'une touche de clavier.
So, we’ll need a keyboard key.
Ces touches de clavier, nous allons les retrouver dans les capteurs.
These keyboard keys can be found in the “Sensing” category in Scratch.
Les capteurs dans Scratch sont à l'ordinateur ce que sont les sens pour nous:
In Scratch, the “Sensing” category is to the computer what our senses are to us—
la vue, l'ouïe ou encore le toucher.
sight, hearing, or touch.
Grâce aux capteurs, l'ordinateur peut savoir si un lutin est en contact avec un
Thanks to sensing, the computer can tell whether a sprite is touching
autre lutin, détecter du son ou encore savoir si une touche de clavier est appuyée.
another sprite, detect sound, or determine whether a keyboard key is pressed.
Et c'est cela qui va nous intéresser.
And that’s exactly what we need.
Je vais choisir le bloc touche pressée,
I’ll choose the “key pressed” block,
qui est juste ici.
which is right here.
Je peux voir que j'ai un menu déroulant avec déjà rempli touche espace pressée.
I can see that I have a dropdown menu already set to 'space key pressed.'
Mais si j'appuie, j'ai le choix entre toutes les touches de mon clavier.
But if I click it, I can choose among all keys on my keyboard.
Je vais choisir ici la flèche droite pour avancer vers la droite.
I’ll select the right arrow key here to move the sprite to the right.
Tu peux remarquer ici que la forme du bloc capteur peut venir s'imbriquer dans ma
Notice how the shape of this sensor block
condition juste après le si.
fits perfectly right after the 'if' condition.
En venant superposer ces deux pièces, je vois un tour blanc apparaître,
When I drag these two blocks together, I see a white circle appear,
et si je lâche ma pièce à l'intérieur, elle vient totalement s'imbriquer.
and if I release the block inside that circle, it snaps fully into place.
En les mettant ensemble, j'obtiens: si la flèche droite est pressée,
Putting them together gives me: 'if the right arrow key is pressed,'
alors. Il ne me reste qu'à donner l'instruction,
then… All that remains is to add the instruction—
l'action que devra faire le lutin si la touche flèche droite est appuyée,
the action the sprite should perform when the right arrow key is pressed.
et dans notre cas, on veut que le lutin avance de 10 pixels.
In our case, we want the sprite to move 10 pixels to the right.
Je vais donc prendre le bloc dans la catégorie mouvement,
So I’ll pick a block from the 'Motion' category,
et je vais récupérer ici.
and retrieve it here.
Ajouter 10 sur l'axe des abscisses, l'axe x.
Add 10 to the horizontal (x) axis.
Je teste mon programme.
Let me test my program.
J'appuie sur le drapeau vert et j'appuie sur la flèche droite.
I click the green flag, then press the right arrow key.
Ici on se rend compte que le singe rouge ne part pas.
Here, you’ll notice the red monkey doesn’t move.
Il y a donc un problème dans mon programme.
So there’s an issue with my program.
Il faut se rappeler qu'un ordinateur ne fait que ce qu'on lui demande de faire.
Remember: a computer only does exactly what we tell it to do.
Et si je lui demande de regarder uniquement au moment où je presse sur le drapeau
If I only ask it to check, at the exact moment I click the green flag,
vert si la touche flèche droite est pressée,
whether the right arrow key is pressed,
Eh bien, il va faire uniquement cela.
then that’s all it will do.
Il faut bien s'imaginer ici que l'ordinateur est en train de se poser la question:
Try picturing this: the computer is now asking itself:
est- ce que la touche flèche droite est pressée?
Is the right arrow key currently pressed?
Ici, le seul moment où il va se poser cette question,
The only time it asks this question
c'est quand je clique sur le drapeau vert.
is precisely when I click the green flag.
Moi, je voudrais qu'à partir du moment où je clique sur le drapeau vert,
I’d like it to start asking this question as soon as I click the green flag,
il se pose cette question jusqu'à ce que le jeu s'arrête.
and keep asking it until the game stops.
Pour cela, nous allons mettre notre programme dans une boucle.
To do this, we'll put our program in a loop.
Les boucles sont rangées dans la catégorie Contrôle.
Loops are categorized under the 'Control' category.
Je vais choisir la boucle Répéter indéfiniment.
I will choose the 'repeat indefinitely' loop.
Je vais glisser mon programme dans la bouche de la boucle.
I’m going to slide my program into the loop’s mouth.
Si je lis maintenant mon programme, l'ordinateur va comprendre ceci:
If I run my program now, the computer will understand the following:
quand j'appuie sur le drapeau vert, tu te poses la question en boucle:
When I click the green flag, you will keep asking:
est- ce que la flèche droite est pressée?
Is the right arrow key pressed?
Est- ce que la flèche droite est pressée?
Is the right arrow key pressed?
Est- ce que la flèche droite est pressée?
Is the right arrow key pressed?
Et si cette touche est pressée, alors tu fais avancer le lutin de dix pixels.
And if this key is pressed, then the sprite moves forward by ten pixels.
Je teste en appuyant sur le drapeau vert.
I test by pressing the green flag.
Et là, si j'appuie, le singe rouge se déplace,
At this point, if I press the button, the red monkey moves.
et on voit qu'il se déplace plus vite que le singe marron.
We can see that it moves faster than the brown monkey.
Parce qu'ici, l'ordinateur est attentif.
Because here, the computer is attentive.
Dès que je vais appuyer, il va signaler au lutin l'instruction déplace toi de dix.
As soon as I press,
Alors que sur l'autre programme, en utilisant le quand j'appuie sur la flèche,
Meanwhile, on the other program, when I press the arrow key,
il y aura un petit moment de latence,
there will be a brief delay,
et c'est pour ça que c'est le singe rouge qui gagne la course.
and that’s why the red monkey wins the race.
Nous allons pouvoir faire la même chose en intégrant dans la boucle le déplacement
We will be able to do the same thing by incorporating the movement into the loop,
pour aller vers la gauche.
to move left.
Pour cela, je vais reprendre une condition que je mets à l'intérieur de la boucle.
For this, I’ll reuse a condition that I place inside the loop.
Je vais récupérer un capteur pour la touche flèche gauche que je viens intégrer à
I’ll retrieve a sensor for the left arrow key that I’ve just integrated into
l'intérieur. Et je vais ici ajouter un déplacement,
the interior. And here, I’ll add a displacement,
cette fois- ci toujours sur l'axe X, mais du côté négatif,
this time still along the X-axis, but on the negative side,
en intégrant moins 10 pixels.
setting it to minus 10 pixels.
Ici, je lance à nouveau le jeu,
Here, I launch the game again,
mon singe rouge se déplace immédiatement dès que je touche la touche gauche ou
my red monkey moves immediately as soon as I press the left key or
droite, et je gagne à chaque fois,
right key,
contre le singe marron.
and I win every time against the brown monkey.
Donc si tu veux faire un déplacement fluide avec un personnage,
So, if you want your character to move smoothly,
il faudra retenir ce programme.
you’ll need to remember this program.
On commence par le bloc d'événements qui déclenche le jeu,
We start with the event block that triggers the game,
dans mon exemple le drapeau vert.
in my example, the green flag.
Mettre une boucle infinie pour que l'ordinateur reste attentif et se pose
Add an infinite loop so the computer stays attentive,
systématiquement la question est- ce que telle touche ou telle touche est touchée.
and repeatedly asks: ‘Is this key—or that key—being pressed?’
J'utilise le bloc capteur pour définir les touches utilisées de mon jeu,
I use the sensor block to define which keys my game uses,
en l'occurrence flèche droite pour ajouter des pixels sur l'axe des abscisses,
specifically, the right arrow key adds pixels along the x-axis,
ou la flèche gauche pour retirer des pixels sur l'axe des abscisses.
while the left arrow key subtracts pixels along the x-axis.
Tu pourras faire la même chose pour aller en haut, en bas,
You can do the same for moving up or down,
sur l'axe des y pour ton jeu.
i.e., along the y-axis in your game.