A2 · Episode 1 · 5:40
Controlling Sprite Movement with Scratch
This episode teaches how to program sprite movement in Scratch using keyboard arrow keys—left, right, up, and down—while adding orientation changes and costume switching to create realistic walking and directional animation.
Source：Montagne Vincent / tube-numerique-educatif.apps.education.fr · License：CC BY 4.0
Transcript
Coder un jeu avec Scratch, premier épisode dans lequel nous allons voir comment
Coding a game with Scratch— in this first episode, we’ll learn how to
coder les déplacements d'un lutin,
code a sprite’s movements,
pour que celui- ci se déplace avec les touches du clavier,
so it moves using keyboard keys,
comme par exemple la raquette du jeu de pong ici,
such as the paddle in this Pong game,
ou le petit chat qui se déplace de la gauche vers la droite ou de haut en bas grâce
or the little cat moving left-right or up-down
aux flèches du clavier.
using the arrow keys.
Nous allons apprendre à coder ceci avec Scratch et nous y allons tout de suite.
We’ll learn to code this with Scratch—and let’s get started right away!
Alors nous voici sur Scratch et nous allons donc déplacer notre lutin de la gauche
Here we are on Scratch, and
vers la droite ou de haut en bas en utilisant les quatre flèches du clavier.
we’ll move our sprite left-right or up-down using the four arrow keys.
Pour cela, dans le menu événement,
To do this, in the Events menu,
j'ai un événement qui dit quand une touche du clavier est pressée,
I select an event that says ‘when a key is pressed’,
alors un script va commencer.
and then a script will start running.
Et ici, je peux choisir n'importe quelle touche du clavier,
Here, I can choose any key on the keyboard,
par exemple la flèche droite.
for example, the right arrow key.
Et quand la flèche droite est pressée,
When the right arrow key is pressed,
on va faire bouger le lutin vers la droite. Alors l'axe horizontal,
we’ll move the sprite to the right. The horizontal axis is the X-axis—the axis of abscissas.
c'est l'axe X, l'axe des abscisses.
(i.e., the axis of abscissas.)
Et donc quand on va vers la droite,
So, when moving right,
on va se déplacer sur l'axe X et on va ajouter 10 à l'abscisse du lutin,
we move along the X-axis and add 10 to the sprite’s x-coordinate,
ce qui va le faire aller vers la droite.
causing it to move right.
Si je veux le faire aller vers la gauche, je vais dupliquer ceci.
If I want it to move left, I’ll duplicate this block.
Donc quand la flèche gauche est pressée, pour le faire aller vers la gauche,
So when the left arrow key is pressed, to make it move left,
il faut retrancher 10 à son abscisse.
we must subtract 10 from its x-coordinate.
Et donc je vais ajouter- 10 à
So I’ll add –10 to
l'abscisse du lutin.
the sprite’s x-coordinate.
J'ajoute- 10 à X.
I add 10 to X.
Et là, si je regarde ce que ça donne,
Now, if I check the result,
mon lutin va de la droite vers la gauche. Alors avant de faire aller de haut en bas,
my sprite moves from right to left. So before making it move up and down,
on va essayer d'améliorer un petit peu ceci.
we’ll first improve this a bit.
Parce que là, quand il va vers la gauche, il donne l'impression de reculer.
Because right now, when it moves left, it looks like it’s walking backward.
Or ce que je voudrais, c'est qu'il se retourne avant
What I actually want is for it to turn around first,
d'aller vers la gauche.
before moving left.
Donc pour ça, on va choisir la fonction" s'orienter à".
So, we’ll use the “point in direction” block.
Donc avant de le faire se déplacer, et si je déroule ici,
That means, before moving it, if I open this menu here,
je vois que je peux l'orienter à- 90 degrés, c'est- à- dire vers la gauche.
I can set its direction to -90 degrees — that is, facing left.
Donc si je regarde ce que ça donne maintenant,
Now let’s see what happens:
quand j'appuie sur la touche gauche, hop, il s'est retourné,
When I press the left arrow key, it turns around instantly,
il va avancer.
and then walks forward.
Par contre, quand j'appuie sur la touche droite,
However, when I press the right arrow key,
il reste retourné vers la gauche. Donc avant de le déplacer à droite,
it stays facing left. So before moving it right,
on va également le retourner vers la droite, c'est à 90 degrés,
we’ll also turn it to face right — that is, 90 degrees.
et maintenant mon lutin va dans un sens et dans l'autre.
Now my sprite can move smoothly in both directions.
Alors le lutin que j'ai choisi ici, c'est le lutin par défaut.
The sprite I’ve chosen here is the default one.
Si je regarde ses costumes, il a deux costumes.
If I look at its costumes, I see it has two of them.
Et quand on fait succéder ces deux
When these two costumes alternate quickly,
costumes, ça nous donne l'impression que le lutin marche.
it gives the impression that the sprite is walking.
Alors ici, à chaque fois qu'il aura avancé,
So each time it moves forward,
je vais aller dans Apparence et je vais faire changer son costume.
I’ll go to the “Looks” category and switch its costume.
Je vais aller au costume suivant,
I’ll switch to the next costume,
comme ceci, et ici aussi.
like this — and do the same here.
Et là, quand je le fais se déplacer,
And here, when I make it move,
j'ai l'impression qu'il marche avec la succession de costumes.
I feel like it’s walking through a sequence of costumes.
C'est un petit peu plus joli comme mouvement.
This movement looks a bit prettier.
Alors maintenant, on va pouvoir faire pareil
So now, we can do the same thing
pour aller vers le haut, vers le bas, on va voir si ça marche.
to move up and down—let’s see if it works.
Donc je vais choisir toujours mon événement quand une touche est pressée,
So I’ll again choose the ‘when key pressed’ event,
donc je vais choisir la touche haut.
and this time, I’ll pick the up arrow key.
Cette fois, je vais faire pareil, je vais l'orienter vers le haut.
This time, I’ll do the same—I’ll orient it upward.
Donc ici, il s'agit de l'orienter à 0 degré, donc je l'oriente vers le haut.
Here, I need to set its direction to 0 degrees—that is, upward.
C'est marqué dans le menu, 0
It says in the menu:
degré correspond vers le haut.
0 degrees means upward.
Ici, on va ajouter 10 cette fois à Y, ce qui va le faire monter.
Here, I’ll add 10 to Y, making it move upward.
L'axe vertical, c'est l'axe des ordonnées, c'est Y, il est noté Y cet
The vertical axis is the y-axis—
axe, c'est positif vers le haut, négatif vers le bas.
this axis is labeled Y, with positive values upward and negative downward.
Et toujours pareil, on va le faire passer au costume suivant pour donner
And as before, we’ll switch it to the next costume
l'impression qu'il avance.
to create the illusion that it’s moving forward.
Alors si je regarde ce que ça donne.
Let me check how it looks.
Alors il change bien de costume, mais
It switches costumes correctly, but
il n'est pas orienté vers le haut.
it isn’t oriented upward.
Parce que par défaut, l'orientation ne se fait que de gauche à droite.
By default, rotation only works left or right.
Alors ici, dans le menu des mouvements,
In the Motion menu,
il y a un bloc qui s'appelle" fixer le sens de rotation", vous voyez,
there’s a block called ‘set rotation style’—see it?
position à gauche ou à droite, et ici on peut le faire s'orienter à 360 degrés.
You can set it to left-right only, or allow full 360-degree rotation.
Donc je vais rajouter ça au début de mon script ici.
So I’ll add this block at the beginning of my script here.
Et si je regarde ce que ça donne, cette fois,
And now let’s see what happens:
il s'est bien orienté vers le haut. Alors je vais dupliquer tout ça et je vais juste
This time, it’s properly oriented upward. Now I’ll duplicate all of this,
changer la flèche.
and just change the arrow key.
Je vais cliquer sur la flèche bas, donc il va se ranger,
I’ll click the down arrow, so it will align itself.
je laisse orienter à 360 degrés, on va l'orienter vers le bas,
I’ll keep orientation at 360 degrees, then rotate it downward.
c'est- à- dire 180 degrés.
That is, to 180 degrees.
Et pour le faire descendre, il faut retrancher 10,
To make it move down, we need to subtract 10.
c'est- à- dire ajouter moins 10 à y.
In other words, add minus 10 to the y-coordinate.
Alors si je regarde ce que ça donne, vers le haut, vers le bas,
Now let’s see how it works: upward, downward—
ça fonctionne.
It works fine.
Si je vais à droite, ça fonctionne.
Moving right also works.
Par contre, quand je vais à gauche, il marche à l'envers.
However, when moving left, it goes in the opposite direction.
Vers la droite, c'est bon, et vers la gauche, il marche à l'envers.
Rightward movement is correct, but leftward movement is reversed.
Donc en fait, ce que je vais faire ici,
So, what I’ll do here is—
c'est que pour l'orientation dans les mouvements gauche- droite,
for left-right movement orientation,
je vais fixer le sens de rotation uniquement en position gauche- droite et non pas à
fix the rotation direction only for left-right positions,
360 degrés. Donc je vais en mettre un ici et je vais en remettre un ici.
not for full 360-degree rotation. So I’ll add one here and another one here.
Voilà, et là je devrais avoir un script qui fonctionne.
There—we should now have a working script.
Mon lutin se déplace de la gauche.
My sprite moves from left to right,
vers la droite et de haut en bas exactement comme je le souhaite.
and also from top to bottom—exactly as I intended.
Voilà donc pour ce script.
That’s all for this script.
Cet épisode est terminé, ne ratez pas le prochain épisode dans lequel nous verrons
This episode ends here—don’t miss the next one,
une autre façon de déplacer le lutin qui sera plus adaptée au mouvement d'un
in which we’ll explore another way to move the sprite,
vaisseau spatial ou d'un bateau par exemple.
better suited for objects like spacecraft or boats.
À bientôt!
See you soon!