A2 · Episode 6 · 5:59
Moving and Orienting a Sprite: Left and Right
This episode teaches how to program a sprite to move left or right when the corresponding arrow key is pressed, while automatically rotating to face the correct direction. It covers setting initial position, using conditional blocks for movement, orientation values (90° and -90°), and the 'move forward' block that respects current direction.
Source：ericgrisperez / tube-numerique-educatif.apps.education.fr · License：CC BY 4.0
Transcript
Bonjour à tous, dans cette vidéo nous allons voir comment orienter un personnage
Hello everyone! In this video, we’ll learn how to orient a character while it moves.
lors d'un déplacement.
while it’s moving.
Ici j'appuie sur la flèche droite, ici j'appuie sur la flèche gauche,
Here I press the right arrow key; here I press the left arrow key.
on peut voir que mon personnage s'oriente dans la bonne direction en fonction de la
You can see that my character automatically faces the correct direction based on which key is pressed.
touche appuyée.
the key pressed.
Voyons comment faire.
Let’s see how to do it.
Nous voici sur notre espace de travail.
Here we are in our workspace.
Pour commencer, nous allons venir ajouter un arrière- plan à notre scène.
First, we’ll add a background to our scene.
Je vais dans la rubrique Arrière- plan,
I go to the ‘Background’ section.
puis je vais choisir par exemple le fond Blue Sky.
Then I choose, for example, the ‘Blue Sky’ background.
Ici mon fond d'écran est en place.
Here, my background is now in place.
Je vais pouvoir maintenant m'occuper du programme de mon lutin.
Now I can start programming my sprite.
Pour commencer, je vais lui dire d'aller se mettre à une position de départ sur
First, I’ll tell it to move to its starting position on screen.
l'écran. Pour cela, je déplace mon lutin à l'endroit de départ.
To do this, I drag my sprite to the starting location.
Je vais le mettre ici, en bas à gauche.
I’ll place it here, at the bottom-left corner of the screen.
Je vais initialiser son programme en allant chercher l'événement drapeau vert qui me
I’ll initialize its program using the ‘Green Flag’ event,
servira de point de départ.
which will serve as the program’s starting point.
Puis je vais lui indiquer ses coordonnées pour qu'il commence toujours à la même
Then I’ll set its coordinates so it always starts at the same spot.
place. Pour cela, je récupère le bloc de mouvement aller à x- 162 y- 119 que
For this, I grab the ‘go to x: -162 y: -119’ motion block,
je viens mettre ici, ce
and place it here.
qui me permettra, si le personnage est déplacé malencontreusement,
This way, if the character is accidentally moved,
en appuyant sur le drapeau vert de le remettre directement à sa bonne position.
clicking the green flag will instantly return it to the correct position.
Nous allons lui donner aussi une autre consigne,
We’ll also give it another instruction,
une autre instruction qui sera l'orientation du personnage.
namely, setting the character’s orientation.
En effet, ici mon personnage peut se déplacer soit vers la droite,
Indeed, right now my character can move to the right,
soit vers la gauche.
or to the left.
Donc je veux pouvoir le faire tourner soit vers la droite, soit vers la gauche.
So I want it to rotate either to the right or to the left.
Donc je vais fixer directement
So I’ll set directly
le sens de rotation.
the rotation direction.
Ici je vais choisir fixer le sens de rotation à gauche/ droite.
Here, I’ll choose to fix the rotation direction to left/right.
Voilà ces instructions de départ.
Here are these starting instructions.
Occupons nous maintenant du mouvement et de l'orientation du personnage.
Now let’s handle the character’s movement and orientation.
Je t'ai préparé ici les blocs nécessaires pour réaliser ce défi.
I’ve prepared here the blocks you’ll need to complete this challenge.
Le chat pourra se déplacer vers la droite ou vers la gauche en regardant toujours
The cat can move right or left,
dans la bonne direction en fonction de la flèche appuyée.
always facing the correct direction based on which arrow key is pressed.
Certaines valeurs, ici par exemple touche espace,
Some values—like the space key here,
ou peut- être l'orientation ou le nombre de pixels,
or perhaps the orientation or the number of pixels,
devront être modifiées selon ce que tu as en tête.
will need to be modified according to what you have in mind.
Tu peux appuyer sur pause dans cette vidéo pour essayer de réaliser ce défi.
You can pause this video to try completing this challenge yourself.
Voyons maintenant ensemble comment faire pour déplacer le chat et qu'il regarde dans
Now let’s see together how to make the cat move,
la bonne direction.
and face the correct direction.
Première chose, j'initialise mon programme avec le drapeau vert,
First, I’ll start my program with the green flag,
ça sera le point de départ de ce programme.
which will be the starting point of this program.
Puis je vais m'occuper de faire le déplacement du chat de manière très facile.
Then I’ll handle the cat’s movement in a very simple way.
Donc je vais utiliser un bloc de condition: si
So I’ll use a conditional block: if
la touche espace est pressée, ici cette touche ne convient pas,
the space key is pressed—though this key isn’t suitable here,
donc je vais choisir la bonne touche.
so I’ll choose the correct key instead.
Si la touche flèche droite est pressée,
If the right arrow key is pressed,
alors le chat devra avancer de dix pixels sur l'axe des x.
then the cat will move forward 10 pixels along the x-axis.
Si, en revanche, la touche ici gauche est pressée,
If instead the left arrow key is pressed,
le chat devra avancer sur moins dix x.
the cat will move 10 pixels along the negative x-axis.
sur l'axe des abscisses.
on the x-axis.
Voyons ensuite à quoi servent les blocs qui me restent.
Next, let’s see what the remaining blocks are for.
L'orientation, si j'appuie sur la petite bulle ici,
Orientation: if I click this small bubble here,
va me permettre de dire dans quelle direction le chat doit regarder.
it lets me specify which direction the cat should face.
Donc je m'aperçois, soit si le chat est orienté à 90 degrés,
So I notice that when the cat is oriented at 90 degrees,
il regardera vers la droite.
it looks to the right.
Donc ce bloc doit être associé à la touche flèche droite.
So this block must be linked to the right arrow key.
Si la touche flèche droite est pressée,
When the right arrow key is pressed,
alors le chat regardera à droite et avancera de 10 pixels.
the cat faces right and moves forward by 10 pixels.
En revanche, ici, si je veux aller à gauche,
Conversely, if I want it to go left,
donc je peux utiliser la flèche en tournant,
I can use rotation with the arrow,
je m'aperçois que la valeur est- 90. Donc
and I see the value becomes -90. So,
si la touche flèche gauche est pressée,
when the left arrow key is pressed,
alors le chat devra s'orienter vers la gauche et devra avancer de- 10 pixels.
the cat must turn left and move -10 pixels (i.e., leftward by 10 pixels).
Ici, si je teste le programme, ça ne fonctionne pas.
Here, if I test the program, it doesn’t work.
On se rappelle dans l'ancienne vidéo, il faut faire
As we recalled in the previous video, we need the computer to repeatedly ask:
en sorte que l'ordinateur se répète systématiquement la question:
‘Is the right arrow key or the left arrow key pressed?’
est- ce que la touche droite ou la touche gauche est pressée?
—this question must be asked continuously.
Je vais prendre tout mon programme et le mettre à l'intérieur de la répétition.
I’ll place my entire program inside this repeat loop.
Et je vois maintenant, avec cette initialisation là,
And now, with this initialization,
l'ordinateur se posera la question: est- ce que flèche droite est pressée,
the computer will repeatedly ask: ‘Is the right arrow key pressed?,’
est- ce que flèche gauche est pressée, est- ce que flèche droite est pressée,
‘Is the left arrow key pressed?,’ ‘Is the right arrow key pressed?,’ and so on.
etc. J'appuie sur drapeau vert, je teste mon programme,
I click the green flag to run my program,
et ici je vois que mon chat se déplace de gauche à droite en regardant dans la bonne
and here I see my cat moving left and right while always facing the correct direction.
direction. L'autre solution que l'on peut ici proposer,
Another solution we can propose here is:
étant donné que le chat regarde dans la bonne direction,
since the cat is already facing the correct direction,
nous avons le droit d'utiliser un nouveau bloc qui s'appelle Avancer.
we’re allowed to use a new block called ‘Move Forward.’
Ce bloc se trouve dans le bloc de mouvement, en tout premier.
This block is in the Motion category, at the very top.
Avancer de dix pas.
Move forward ten steps.
Je vais ici pour t'expliquer enlever ajouter dix à x et ajouter moins dix à x.
I’ll explain here how to add 10 to x, and how to subtract 10 from x.
Je vais simplement dupliquer ce bloc pour l'avoir deux fois.
I’ll simply duplicate this block so I have two copies.
Je vais donc dire que si la flèche droite est pressée,
So I’ll set the condition: if the right arrow key is pressed,
le chat regarde vers la droite et va avancer de dix pas.
the cat faces right and moves forward ten steps.
Et ici l'avantage de ce bloc, je vais pouvoir mettre exactement le même.
The advantage of this block here is that I can use exactly the same one.
Pour la flèche gauche, il n'y a plus de signe négatif.
For the left arrow, there’s no minus sign needed.
Pourquoi? Simplement parce que le lutin se déplacera systématiquement dans le sens
Why? Because the sprite always moves in the direction it’s facing.
dans lequel il est orienté.
its direction.
Donc l'ordinateur comprend que si le chat regarde vers la gauche,
So when the cat faces left,
quand je lui dis avance, c'est qu'il doit se déplacer vers la gauche.
the computer understands that ‘move forward’ means moving left.
Donc voici les deux solutions que tu as pour faire déplacer ton chat.
So here are the two ways you can make your cat move.
Soit tu utilises l'orientation 90 avec le bloc avancer,
One is to use the ‘point in direction 90’ block together with the ‘move’ block;
soit tu utilises le bloc d'orientation plus les blocs dont tu as l'habitude sur
the other uses the ‘point in direction’ block plus the x-axis movement blocks you’re already familiar with;
l'axe de x avec les valeurs positives et les valeurs négatives selon la flèche qui
using positive or negative values depending on which arrow key is pressed;
est appuyée.
that is, whichever arrow key is pressed.