Bouger un lutin
Créez un compte gratuit pour suivre votre avancement et reprendre où vous avez laissé.
Créer un compteCe tuto fait suite à Découvrir Scratch. On y apprend à faire bouger un lutin de toutes les façons possibles : avancer en ligne droite, tourner, se téléporter à une position précise, glisser en douceur. À la fin, on assemble ces blocs avec une boucle pour faire parcourir un carré au lutin.
La direction du lutin
Chaque lutin possède une direction : c'est l'angle dans lequel il « regarde ». Cette direction décide du sens dans lequel il avancera quand on utilisera un bloc de mouvement. À l'ouverture d'un projet, le chat regarde à droite : sa direction vaut $90$.
Scratch utilise une convention bien à lui : la direction est mesurée en degrés, à partir du haut de la scène, et tourne dans le sens des aiguilles d'une montre. Les quatre directions principales sont donc :
| Direction $\mathbf{0}$ | Le lutin regarde vers le haut |
| Direction $\mathbf{90}$ | Le lutin regarde vers la droite (valeur par défaut) |
| Direction $\mathbf{180}$ | Le lutin regarde vers le bas |
| Direction $\mathbf{-90}$ | Le lutin regarde vers la gauche |
Pour modifier la direction d'un seul coup, on utilise le bloc s'orienter à de la catégorie Mouvement. Un clic sur la valeur affichée dans le bloc fait apparaître un petit volant circulaire qui permet de choisir la direction visuellement.
Attention
La convention Scratch n'est pas celle des mathématiques. En classe, un angle est mesuré à partir de la droite, dans le sens inverse des aiguilles d'une montre (sens trigonométrique). En Scratch, on part du haut et on tourne dans le sens des aiguilles d'une montre. Pour le moment, retenir simplement les quatre valeurs ci-dessus : c'est largement suffisant au collège.
Avancer et reculer
Le bloc avancer de … pas fait avancer le lutin dans la direction où il regarde. Un « pas » Scratch correspond à un pixel de la scène : avancer de $100$ pas fait parcourir $100$ pixels au lutin. La scène mesure $480$ pixels de large et $360$ pixels de haut.
Avancer puis revenir
On veut que le chat avance de $100$ pas, attende une seconde, puis revienne à son point de départ.
Avancer d'un nombre négatif de pas fait reculer le lutin : il se déplace dans le sens opposé à sa direction, sans changer d'orientation.
Astuce
Si le lutin se retrouve coincé contre un bord après plusieurs essais, glisser-déposer son icône sur la scène pour le replacer où l'on veut. Sa position $(x\,;\,y)$ se met à jour automatiquement.
Tourner à droite, tourner à gauche
Pour changer la direction du lutin, on dispose de deux blocs Mouvement très visuels : tourner ↻ de … degrés (sens des aiguilles d'une montre, vers la droite) et tourner ↺ de … degrés (sens inverse, vers la gauche). Contrairement à s'orienter à, ces blocs font tourner le lutin à partir de sa direction actuelle : ils ajoutent ou retranchent l'angle indiqué.
Faire un quart de tour
Le chat regarde initialement vers la droite (direction $90$). On veut qu'il tourne d'un quart de tour vers la droite : il regardera alors vers le bas (direction $180$).
Un quart de tour correspond à $90^{\circ}$, un demi-tour à $180^{\circ}$, un tour complet à $360^{\circ}$.
Attention
Bien distinguer deux blocs qui se ressemblent : s'orienter à $90$ fixe la direction (le lutin regardera vers la droite, peu importe sa position de départ), tandis que tourner ↻ de $90$ degrés ajoute $90$ à la direction actuelle. Si le lutin regardait déjà vers la droite, ces deux blocs ne donnent pas le même résultat final.
Se positionner sur la scène
La scène est un repère orthogonal centré sur l'origine $(0\,;\,0)$. L'axe horizontal va de $-240$ à $+240$, l'axe vertical de $-180$ à $+180$. Pour téléporter un lutin à un endroit précis, on utilise les blocs de la catégorie Mouvement qui agissent directement sur ses coordonnées.
| aller à x: … y: … | Téléporte le lutin à la position $(x\,;\,y)$ |
| mettre x à … | Change uniquement l'abscisse ($y$ inchangé) |
| mettre y à … | Change uniquement l'ordonnée ($x$ inchangé) |
| ajouter … à x | Décale le lutin horizontalement |
| ajouter … à y | Décale le lutin verticalement |
Placer le lutin à trois endroits
On veut envoyer le chat successivement en bas à gauche, en haut à droite, puis au centre, avec une pause entre chaque téléportation.
Le lutin saute d'une position à l'autre instantanément : on ne voit pas le trajet, seulement les positions d'arrivée.
Glisser d'un point à un autre
Pour que le lutin parcoure le trajet de façon visible, on utilise le bloc glisser en … secondes à x: … y: …. Le déplacement se fait alors en ligne droite et à vitesse constante, sur la durée indiquée. C'est avec ce bloc qu'on crée les animations fluides.
Aller-retour en glissant
On veut que le chat parte du bord gauche, glisse jusqu'au bord droit en $2$ secondes, attende un instant, puis revienne en glissant.
?
Remarque
Le bloc glisser bloque le script pendant toute la durée du déplacement : aucun autre bloc situé en dessous ne s'exécute tant que le glissement n'est pas terminé. C'est commode pour enchaîner plusieurs trajets, mais à garder en tête quand on programmera des jeux où plusieurs choses doivent se passer en même temps.
La boucle « répéter N fois »
Quand on doit faire plusieurs fois la même chose, on évite de recopier les blocs : on les place dans une boucle. Le bloc répéter … fois se trouve dans la catégorie Contrôle (jaune). On glisse les instructions à répéter à l'intérieur du bloc, qui s'élargit pour les accueillir.
Sans boucle, faire avancer le chat de $50$ pas quatre fois oblige à empiler quatre blocs identiques :
Avec une boucle, le même comportement tient en deux blocs, et il devient très facile de changer le nombre de répétitions :
Astuce
Pour transformer un programme qui se répète en programme avec boucle : faire glisser le bloc répéter … fois au-dessus de la première instruction concernée, puis vérifier que toutes les répétitions s'insèrent bien dans la bouche du bloc. Les blocs en trop peuvent être supprimés d'un clic droit > Supprimer le bloc.
Premier projet : un carré au déplacement
On va maintenant assembler tout ce qu'on a vu pour faire parcourir au lutin les quatre côtés d'un carré. L'idée : avancer d'un côté, tourner d'un quart de tour, et recommencer quatre fois. On choisit un côté de $80$ pas et un quart de tour de $90^{\circ}$ vers la droite.
Le carré du chat
Pour le construire :
- Glisser un bloc quand drapeau vert cliqué (Événements) dans la zone de script.
- Ajouter aller à x: $-40$ y: $-40$ pour placer le chat au coin inférieur gauche du futur carré.
- Ajouter s'orienter à $90$ pour qu'il regarde vers la droite (sinon on ne sait pas dans quelle direction il partira).
- Glisser le bloc répéter $4$ fois (Contrôle).
- À l'intérieur, empiler avancer de $80$ pas puis tourner ↻ de $90$ degrés.
- Cliquer sur le drapeau vert : le chat parcourt les quatre côtés.
À la fin du programme, le chat se retrouve exactement à sa position de départ, dans la même direction : c'est le signe que le carré est bien refermé. Si la dernière rotation est oubliée, le carré ne ferme pas.
?
Remarque
Dans ce projet, le chat se déplace mais ne laisse pas de trace : on voit son trajet seulement pendant qu'il bouge. Pour qu'il dessine vraiment le carré sur la scène, il faudra activer l'extension Stylo et utiliser le bloc stylo en position d'écriture. C'est le sujet du tuto suivant.
À toi de jouer
Modifier le programme du carré pour que le chat parcoure un rectangle de $120$ pas de long et $60$ pas de large.
Corrigé
Un rectangle a quatre côtés, mais ils sont de deux longueurs différentes : la boucle répéter $4$ fois ne convient plus telle quelle. On utilise une boucle répéter $2$ fois qui contient successivement les deux longueurs et leur quart de tour :
Récapitulatif des blocs Mouvement
| Bloc | Effet |
|---|---|
| aller à x: … y: … | Téléporte le lutin à la position $(x\,;\,y)$ |
| glisser en … secondes à x: … y: … | Déplace le lutin en ligne droite à vitesse constante |
| avancer de … pas | Déplace le lutin dans sa direction (négatif = recule) |
| tourner ↻ de … degrés | Ajoute l'angle à la direction (rotation à droite) |
| tourner ↺ de … degrés | Retranche l'angle de la direction (rotation à gauche) |
| s'orienter à … | Fixe la direction du lutin ($0$ haut, $90$ droite, $180$ bas, $-90$ gauche) |
| mettre x à … | Change uniquement l'abscisse du lutin |
| mettre y à … | Change uniquement l'ordonnée du lutin |
| ajouter … à x | Décale horizontalement (utile au clavier) |
| ajouter … à y | Décale verticalement |
Astuce
Projet tout-en-un — Le fichier ci-dessous regroupe les trois scripts vus dans ce tuto : aller-retour en glissant (sur le drapeau vert), carré au déplacement (touche c) et rectangle (touche r). Ouvrir le projet dans Scratch avec Fichier > Importer depuis votre ordinateur, puis lancer chaque script tour à tour pour comparer leurs trajets.