A2 · Episode 5 · 5:17
Smooth Sprite Movement in Scratch
This episode teaches how to create smoother sprite movement in Scratch by using 'key pressed' sensing blocks inside a forever loop, enabling diagonal movement when multiple arrow keys are pressed simultaneously.
Source：Montagne Vincent / tube-numerique-educatif.apps.education.fr · License：CC BY 4.0
Transcript
Coder un jeu avec Scratch, cinquième épisode dans lequel nous allons voir un nouveau
Coding a game with Scratch—Episode 5, in which we’ll explore a new
code pour obtenir des déplacements du lutin,
code for making the sprite move,
comme nous avions fait dans le premier épisode,
just as we did in Episode 1,
mais ici nous allons pouvoir avoir des mouvements qui sont plus fluides.
but this time the movements will be smoother.
Par exemple ici, dans le jeu du chat et la souris,
For example, in this game of cat and mouse,
nous avons des mouvements qui sont plus rapides, plus fluides,
we have movements that are faster and smoother,
et voyez, on a même des mouvements en diagonale,
and look—you’ll even notice diagonal movements,
ce que nous n'avions pas avec le code du premier épisode que vous avez ici sur la
something we didn’t have with the code from the first episode,
gauche de l'écran.
which you can see here on the left side of the screen.
Donc nous allons apprendre à écrire ces scripts avec Scratch et nous y allons tout
So we’ll learn how to write these scripts in Scratch—and we’ll start right away.
de suite. Alors nous y voilà, nous retrouvons ici les scripts que nous avons écrits
Here we are—these are the scripts we wrote in Episode 1:
dans le premier épisode, les déplacements du lutin en pressant sur les flèches.
scripts that move the sprite when you press the arrow keys.
Donc ici par exemple, quand je clique sur la flèche gauche,
So here, for example, when I click the left arrow,
on met le sens de rotation à gauche ou droite pour pouvoir orienter le lutin dans le
we set the rotation direction to left or right to orient the sprite correctly.
bon sens. Je l'oriente vers la gauche, à moins 90 degrés, c'est vers la gauche,
I rotate it left—counterclockwise 90 degrees—which faces it left.
on le fait avancer de 10 et on
Then we move it forward by 10 steps,
passe au costume suivant, ce qui donne l'impression que le lutin.
and switch to the next costume, creating the illusion that the sprite is walking.
Et j'ai le même genre de script pour quand je clique sur la flèche droite,
And I use the same kind of script when I click the right arrow,
la flèche haut ou la flèche bas.
the up arrow, or the down arrow.
Et j'ai ici le script d'initialisation que nous avons écrit à l'épisode 3,
Here is the initialization script we wrote in episode 3,
qui permet de mettre le lutin en position initiale au début du jeu.
which positions the sprite at its starting point when the game begins.
Alors ce script, je vais le cacher,
So I’ll hide this script,
nous n'en avons pas besoin pour le moment et ça va nous faire de la place,
as we don’t need it right now—and it’ll free up some space,
donc je vais le cacher un petit peu ici.
so I’ll tuck it away here a bit.
Et nous allons nous occuper de ce script là.
And we're going to handle this script.
Alors on va changer la façon de faire.
So, we’re going to change the way we do it.
L'inconvénient donc ici, vous avez compris,
So the drawback here—you’ve understood it—is
c'est que le mouvement n'est pas très fluide.
that the movement isn’t very smooth.
Si j'appuie sur deux flèches en même temps, il ne se passe rien de spécial,
If I press two arrow keys at once,
on ne va pas en diagonale par exemple.
nothing special happens—for example, no diagonal movement.
Donc le script que nous allons écrire maintenant permettra de faire ça.
So the script we’ll write now will make this possible.
Alors je vais enlever ici quand la flèche gauche est pressée et nous allons mettre
So I’ll remove ‘when left arrow is pressed’ here,
une condition.
and replace it with a condition.
Nous allons effectuer ce script si
We’ll run this script when…
je vais dans les capteurs et dans les capteurs,
I go to the ‘Sensors’ category—and in there,
j'ai un capteur qui me permet de voir si une touche est pressée.
there’s a sensor that lets me check whether a key is pressed.
Donc je vais faire le script si la flèche gauche est pressée.
So I’ll set it up to run the script if the left arrow key is pressed.
Donc on voit que ça change pas grand- chose,
So you can see—not much has changed,
sauf qu'il va falloir avoir ici un événement quand le drapeau vert est cliqué.
except that we now need the trigger event to be ‘when green flag clicked’.
C'est plus l'événement quand une touche est cliquée.
It’s no longer ‘when a key is pressed.’
Donc ici, si je regarde mon script, quand le drapeau vert est cliqué,
So looking at my script: when the green flag is clicked,
si la flèche gauche est pressée,
if the left arrow key is pressed,
alors on va s'orienter vers la gauche et on va avancer de 10,
then it faces left and moves forward 10 steps,
on va changer de costume.
and switches to a different costume.
Donc le script ressemble beaucoup à celui que nous avions.
So this script looks very much like the one we had before.
Alors je vais faire la même chose avec les autres.
Now I’ll do the same for the other directions.
Les autres mouvements, donc ici c'est pour la flèche droite,
Other movements—this one is for the right arrow key,
donc je vais reprendre ce
so I’ll reuse this condition,
test, donc c'est un capteur, si la flèche droite est pressée,
which is a sensor—if the right arrow key is pressed,
je vais reprendre celui- ci pour la flèche haut, donc
and I’ll reuse this one for the up arrow key,
ça je vais l'enlever,
so I’ll delete this part,
et ici je duplique et je vais faire ceci quand la flèche haut est pressée,
duplicate it, and set it to run when the up arrow key is pressed,
et enfin la dernière partie, je vais l'exécuter si.
and finally, I’ll set this last part to run if…
la flèche basse cette fois,
This time, the down arrow key is pressed,
est pressée. Alors si je laisse mon script comme ceci,
so if I leave my script unchanged,
qu'est- ce qui va se passer si je clique sur le drapeau vert?
what will happen when I click the green flag?
Donc mon lutin est allé se mettre en position initiale, mais il se passe rien.
So my sprite moves to its starting position, but nothing else happens.
Là, vous voyez, je suis en train d'appuyer sur les touches,
Here, you can see I’m pressing keys on the keyboard,
il ne se place rien. Parce que qu'est- ce qui se passe quand on appuie sur le
but it doesn’t respond at all.
drapeau vert? Le script va être lu.
Why? Because clicking the green flag triggers the script to run step by step.
Si la touche flèche gauche est pressée?
Is the left arrow key pressed?
Non, elle n'était pas pressée, donc on passe à la suite.
No—it wasn’t pressed, so we move on to the next step.
Si la touche flèche droite est pressée?
Is the right arrow key pressed?
Non, elle n'était pas pressée, donc on passe à la suite, etc.
No—it wasn’t pressed either, so we proceed to the next step, and so on.
Et puis quand on arrive en bas, le script est fini.
Then, when we reach the bottom of the script, execution finishes.
Donc ce que nous allons faire, c'est que nous allons demander au
So what we’ll do is ask the program to keep running this script
programme de répéter pendant tout le jeu ce script.
repeatedly throughout the entire game.
Donc je rajoute une boucle répéter indéfiniment,
I’ll add a ‘forever’ loop,
et ceci va donc se répéter pendant toute la durée du jeu.
and this will now repeat continuously for the whole duration of the game.
Donc pendant tout le jeu, on va tester si les touches sont pressées.
So throughout the game, we’ll keep checking whether keys are pressed.
Donc maintenant si je lance le jeu, ça fonctionne et vous voyez,
Now, when I start the game, it works—and as you can see,
j'obtiens des mouvements en diagonale quand je touche deux touches du clavier en
I get diagonal movement when I press two arrow keys at the same time.
même temps. Voilà, donc ce script est complet, il faut faire Ici,
There we go—the script is now complete. The key point is right here:
cette boucle va se répéter indéfiniment.
this loop repeats indefinitely.
On ne peut rien rajouter en dessous de la boucle.
You cannot add any more blocks below this loop.
Vous voyez ici, c'est le bas de la boucle, ici c'est lisse, le bas du bloc,
You see, this is the bottom of the loop—its edge is smooth,
pardon, est lisse.
sorry—I meant ‘smooth’.
On ne peut pas rajouter d'autres blocs.
No other blocks can be attached there.
Si je voulais rajouter par exemple un bloc attendre une seconde,
If I wanted to add, for example, a 'wait one second' block,
je ne peux pas le mettre en dessous,
I can't place it below,
parce que ce qui est après ne va jamais être lu s'il y avait quelque chose,
because anything after it will never run, as long as something exists before it,
puisque ceci va se lire indéfiniment.
since this loop runs indefinitely.
Donc il faudra faire attention, ça peut être source d'erreur dans un programme,
So be careful—this can cause errors in your program,
ça peut bloquer un jeu par exemple.
for example, freezing a game.
Donc il faudra faire attention d'avoir quelque part un bloc qui permette d'arrêter
You must therefore ensure there's a block somewhere that stops everything,
tout. Ici on a un bloc stop tout.
Here we have the 'stop all' block.
Donc par exemple quand le jeu est terminé,
For instance, when the game ends,
on pense à ajouter ce bloc stop tout. Nous verrons ça dans un script,
we remember to add this 'stop all' block. We'll demonstrate it in a script,
dans un autre épisode.
in the next episode.
Donc voilà, ce script est opérationnel et il est terminé.
That’s it—the script is now operational and complete.
Cet épisode est donc terminé aussi,
So this episode ends here too,
ne ratez pas le prochain épisode dans lequel nous verrons comment ajouter de
Don’t miss the next episode, where we’ll learn how to add interaction between sprites,
l'interaction entre des lutins.
that is, interaction between sprites.
À bientôt!
See you soon!