Exploration de Scratch


Introduction et objectifs

Bonjour ! Bienvenu à cette activité d’exploration de Scratch. Scratch est un langage de programmation visuel, c’est-à dire qu’on peut faire de la programmation sans écrire du code, mais en utilisant des blocs visuels, qui ont été programmé pour exécuter des actions pour nous. Il suffit de les placer au bon endroit et dans le bon ordre pour créer des histoires interactives, des jeux et des animations.

Dans cette activité, tu vas d’abord faire un jeu de mathématique pour réviser l’addition. Ensuite nous verrons ensemble comment ce jeu a été construit, et tu pourra explorer le logiciel pour créer ton propre jeu.

Ici, tu ne peux pas te tromper, il s'agit d'explorer un nouveau monde !

Première activité : le jeu

Tout d’abord, clique sur le drapeau vert sur l’image ci-dessous et suis les instruction du pingouin Pongo. Si tu veux rejouer une autre fois, clique sur le drapeau vert en haut à gauche de l’image.

Deuxième actvité : Regardons dans le projet

Es-tu curieux de savoir comment ce jeu a été créé ? Très bien ! Pour ce faire, clique sur ce lien et ensuite reviens sur cette page pour suivre les explications.

Clique sur le bouton “See inside”.

scratch-see-inside

Tu verra une image comme celle ci-dessous. Tout est en anglais, mais tu peux changer la langue en cliquant sur l’icône cerclé en rouge et choisir le français.

scratch-change-language

Très bien, maintenant tu devrais voir quelque chose comme ça :

scratch-jeu-math

Les formes en couleur sont appelées blocs et c’est grâce à eux qu’on construit (on programme) dans Scratch. Les personnages et les objets sont appelés Lutins (ou « Sprites » en anglais) et on peut leur faire faire beaucoup de choses ! Ici en particulier, on a dit à notre Pongo de parler avec toi et ensuite de te poser des questions de mathématique.

Essaie de changer les valeurs dans les champs en blanc et regarde ce qui se passe quand tu lances la simulation en cliquant sur le drapeau vert.

Troisième activité : créons notre jeu!

Pour pouvoir créer un projet dans Scratch il faut d’abord s’inscrire en cliquant sur « Rejoindre Scratch ». C’est facile et gratuit ! Demande à ton enseignant de t'aider…

… Maintenant que tu est inscrit, si tu cliques sur « Voir la page du projet » tu trouveras un bouton appelé « Remix ». Si tu cliques ce bouton, Scratch créera pour toi une copie du projet que tu pourras ensuite modifier et sauvegarder dans tes projets.

scratch-remix

Nous allons travailler sur une version très simplifiée du projet initial, qui est disponible à ce lien. Si tu cliques sur « Remix » tu verras une page comme celle ci-dessous : c’est ton canevas pour explorer !

Scratch-dialogue

La structure de Scratch

Tout d’abord voyons les différents zones d’un projet Scratch, qui sont décrites dans l’image ci-dessous.

scratch-zones

Manipulations de base

Les manipulations de base décrites ci-dessous te seront utiles pour tout projet sur Scratch.

Les blocs sont des briques de code en forme de pièce de puzzle, utilisées pour créer des programmes. Ils peuvent s’emboîter les uns dans les autres et former des « scripts ». Pour choisir un bloc dans la section « Code » dans les onglets des lutins, il te suffit de le glisser et le déposer sur le canevas de travail, qui est la zone centrale, aussi appelée « Zone des scripts ». Glisse à nouveau un bloc dans cette réserve pour le supprimer.

Tous les lutins utilisés dans ton projet sont affichées dans la zone « Les lutins ». Pour ajouter des blocs à un lutin en particulier tu dois cliquer sur son image dans la zone des lutins. Pour ajouter un autre lutin, clique sur le bouton indiqué dans l’image et choisi dans la bibliothèque des lutins de Scratch.

La « Zone de la scène » te permet de déplacer manuellement les lutins, d’ajouter des arrière-plans et, surtout, de lancer la simulation pour tester ton script. Pour ce faire, clique sur le drapeau vert. Pour arrêter la simulation, clique sur le bouton rouge à côté du drapeau.

Les blocs

Il existe différents type de blocs en Scratch :

scratch-blocs


Maintenant, programmons !

Interaction : le dialogue

Clique sur le drapeau vert pour voir d’abord ce que Pongo fait. Qu’est ce que tu vois ?

Quand tu cliques le drapeau vert, Pongo te dit « Bonjour, je suis Pongo le pingouin ». Comment il a pu faire ça ? Voyons ensemble.

Tout d’abord on a dit à Scratch quand Pongo doit parler. Cela se fait avec un des blocs jaunes. Ces blocs gèrent les événements. Ici, l’événement déclencheur est : « quand le drapeau est cliqué ».

scratch-events

Essaie de changer l’événement. Pour ce faire, positionne le pointeur de ta souris sur le bloc violet et glisse-le loin du bloc jaune pour les séparer.

scratch-events

Dans la réserve des blocs jaunes (événements), sélectionne le bloc « Quand ce sprite est cliqué », glisse et dépose-le sur le bloc violet. Pour effacer l’ancien bloc, glisse-le dans la réserve des blocs. Tu peux également changer le texte dans le bloc violet et le temps pendant lequel le message est affiché à l’écran.

scratch-events

Clique maintenant sur le drapeau vert et ensuite sur le pingouin pour voir ce qui se passe.

Maintenant, ajoutons une question! Dans les blocs « Capteurs » (en bleu claire), sélectionne le bloc « Demander … et attendre » et glisse-le en dessous du bloc violet.

Que veux-tu demander ? Choisi ta question et saisi le texte dans la partie blanche du bloc. Moi, j’ai décidé de demander « Comment tu t'appelles ? ». Clique sur le drapeau vert pour lancer la simulation.

scratch-looks

Comment Pongo peut savoir ce que tu as répondu pour te dire quelque chose qui prend en compte ta réponse ?

Sélectionne dans la réserve des blocs violets « Apparence », le bloc « dire… pendant… seconds » et glisse-le en dessous des autres blocs.

scratch-join

Maintenant, pour grouper plusieurs parties (dans notre cas, des buts de phrase), dans la réserve des blocs verts « Opérateurs » sélectionne le bloc « regrouper … et … » , mais cette fois-ci glisse le dans la première zone blanche du dernier bloc violet, comme dans l’image ci-dessous.

scratch-sensing

Dans la partie « pomme », saisi la première partie de ton message, par exemple « Hello » (PS. Ajoute un espace après le mot « Hello »).

scratch-sensing

Ensuite, sélectionne dans la réserve des « Capteurs » le bloc « réponse » et glisse-le dans la deuxième zone blanche (où il est écrit « banana » ). Tu devrais avoir quelque chose comme cela :

scratch-sensing

Interaction : les mouvements

Très bien, tu sais désormais comment dialoguer avec ton lutin. Et si on veut qu’il se déplace sur la scène, comment fait-on ?

Tout d’abord, quel type de mouvements on veut assigner à Pongo ? Tous les mouvements disponibles se trouvent dans la réserve bleu « Mouvements ».

Disons qu’on veut que Pongo se déplace à droite et à gauche et en haut et à droit dans la scène. Ces mouvements engendrent des changements de position du lutin (ou de tout objet) dans la scène. En général, chaque « position » sur la scène est décrit par des coordonnées, en termes de x et y. Par exemple, si tu regardes dans la zone des lutins, tu verra que Pongo, dans sa position actuelle, a les coordonnées suivantes : x = 6, y = - 97. Les x décrivent les positions horizontales et les y décrivent les positions verticales.

scratch-motion

Essaie d’abord de déplacer manuellement Pongo sur la scène. Quels changements vois-tu dans ses coordonnées ?

Passons à la programmation! Glisse et dépose les blocs « ajouter … à x » et « ajouter… à y », deux fois pour chaque bloc. Maintenant, il faut indiquer à Scratch quand ajouter à x et à y. Dans la réserve des « Événements », sélectionne le bloc « Quand la touche… est pressée » et dépose-le sur un des blocs de mouvement sur la zone des scripts.

scratch-events-motion

Si tu cliques sur la partie « espace » un menu déroulant te propose plusieures touches parmi lesquelles choisir.

scratch-motion

Puisque nous avons placé le bloc sur le mouvement de la position x, et donc nous souhaitions déplacer Pongo à droite ou à gauche, nous pouvons choisir une des flèches du clavier (droite ou gauche) comme notre événement déclencheur. Choisi la flèche droite, lance la simulation et regarde ce qui se passe. Pongo se déplace vers la droite, n’est-ce pas ? Mais comment le faire bouger vers la gauche ? Et, bien on refait la même opération avec un autre bloc événement, que nous allons placer sur l’autre bloc mouvement x qui se trouve déjà sur notre zone de script. Pour ce script, choisi la flèche gauche, lance la simulation et regarde ce qui se passe…. Pongo ne se déplace que vers la droite ! Pourquoi ? Réfléchis un instant et essaie de changer quelque chose dans ton script avant de poursuivre la lecture…

Tu as trouvé la solution ? Je suis sûre que oui, mais si tu n’a pas réussi, ce n’est pas grave ! Continue la lecture. Revenons plus en détail à la significations des x et y. Dans Scratch, chaque lutin est placé dans un repère mathématique, c'est-à-dire une grille. Au centre de cette grille, se trouve l'origine, point d'intersection des deux droites du plan : la droite horizontale (axe des abscisses), et la droite verticale (axes des ordonnées). Ainsi, la position d'un lutin est définie par 2 valeurs :

Si on veut déplacer le lutin vers la droite, on doit spécifier un paramètre positif, et si on veut le déplacer vers la gauche, on doit spécifier un paramètre négatif. Le même raisonnement se fait pour les positions verticales, pour les coordonnées y.

Maintenant paramètre les 4 blocs afin d’avoir : un mouvement de 10 vers la droite et la gauche avec les flèches droites et gauches, respectivement ; et un mouvement de 10 vers le haut et le bas avec les flèches haut et bas, respectivement. Tu devrais avoir quelque chose comme cela :

scratch-motion

Pour vérifier si tu as bien fait, lance la simulation et regarde ce qui se passe…

À la poursuite !

Pour faire ce jeu on aura pas besoin de René, on va chercher un autre de lutin ! Tout d’abord, pour se débarrasser de René, on sélectionne son image dans la zone des lutins et on clique sur l’icône de la poubelle. Ensuite, on rajoute un lutin en cliquant sur l’icône du chat. Ces icônes sont montrées dans l’image ci-dessous :

Scratch-add-delete-sprite

Moi, j'ai décidé d'ajouter une libellule, mais tu peux choisir n'importe quel lutin, il y en a plein !

Scratch-choose-sprite

Si tu n'est pas dans la zone de Lulu la libellule, clique deux fois sur Lulu sur la scène, ou sélectionne-la dans la zone des lutins. Tu es maintenant sur sa zone des scripts. Je trouve que Lulu est trop grande et qu’elle devrait être sur un côté et pas pointer vers le haut. Pour changer ces paramètres modifie sa taille en 40 et sa direction en 180°, comme montré dans l’image ci-dessous.

Scratch-change-properties

Nous devons donner à Lulu un mouvement pour que Pongo puisse le poursuivre. Pour ce faire, choisi le bloc mouvement « glisser en … secondes à… » et y dépose dessous le bloc événement « quand le drapeau vert est cliqué ». Pour que Lulu continue à se déplacer à l’infini, sélectionne le bloc « répéter indéfiniment » dans la réserve des blocs « Contrôle » et glisse-le entre le bloc événement et le bloc mouvement. Tu devrais avoir quelque chose comme cela :

scratch-game

Les blocs contrôle servent à contrôler l'exécution du script (faire une pause, conditions, répétitions et arrêt). Ici, nous avons dit à Lulu de continuer à se déplacer indéfiniment sur la scène de manière aléatoire. Clique sur le drapeau vert pour lancer la simulation.

Maintenant, revenons à Pongo. On doit lui dire que, à chaque fois qu’il touche Lulu, nous gagnons 1 point. Pour ce faire, la première chose à faire est de dire à Scratch (qui ne le sait pas encore !) que nous allons compter les points. Pour créer le compteur des points, nous devons définir une variable. Les variables sont des objets contenant une valeur. Celle-ci peut être sous forme de nombre, de lettres, de lettres et de nombres à la fois ou encore de caractères spéciaux. La valeur d’une variable peut rester constante ou changer au cours du temps, d'où le nom de « variable » (qui peut varier). Pour créer une variable, il faut aller dans la réserve des variables puis cliquer sur le bouton « Créer une variable ».

scratch-variable

Nous allons donc créer une variable appelée « points », pour tous les sprites. Ensuite, nous allons dire à Scratch que, à chaque fois que Pongo touche Lulu, les points sont incrémentés d’une unité.

Pour ce faire, glisse sur la scène l'événement « quand le drapeau vert est cliqué », puis ajoute à celui-ci les blocs « répéter indéfiniment » et « si… alors », qui se trouvent dans la réserve « Contrôle ». Dans l'espace libre de ce bloc, glisse le bloc « touche le … ? » de la réserve « Capteurs » et dans le menu déroulant sélectionne Lulu (ce lutin s’appelle « Drangonfly » en Scratch). Pour finir, dans la réserve des variables, sélectionne le bloc « ajouter … à… » et glisse-le dans l’espace vide du bloc de contrôle orange. Dans le menu déroulant de ce bloc, choisi la variable « points » que nous avons créé au préalable.

C’est important de remarquer que la valeur d’une variable persiste une fois le projet arrêté. Si tu lance à nouveau le projet, la variable aura alors la même valeur qu'à l'arrêt précédent. Il faut donc donner une valeur de départ (initialiser) à chaque variable au lancement du projet. Pour ce faire, interpose un bloc orange « mettre … à 0 » entre les deux blocs jaunes et choisi la variable “points” dans le menu déroulant.

À la fin de cette série d’opérations, tu devrais avoir quelque chose comme cela :

scratch-game

Pour résumer ce passage, nous avons dit à Scratch : « Quand le drapeau vert est cliqué, remet les points à 0 et si Pongo (puisqu’on est dans la zone des scripts de Pongo) touche Lulu, alors ajoute 1 unité à mes points. Fait cela à l'infini ». Tu verras que, à côté de la variable « points » un signe bleu est présent. Cela veut dire que la valeur de cette variable sera visible tout le temps dans la scène. Clique le drapeau vert pour lancer la simulation et jouer à ton premier jeu !

Quatrième activité : exploration libre

Maintenant, tu peux explorer Scratch et ajouter d’autres fonctionnalités à ton jeu, par exemple tu peux essayer de :

Ensuite, reprend le jeu de mathématique et essaye de changer des paramètres, le type d'opération, ou toute autre chose que tu penses puisse améliorer le jeu. À toi d'explorer Scratch !

Si tu ne sais pas d’où partir, commence par lire le Wiki de Scratch, ou regarde les Tutoriels sur le site de Scratch.


Évaluation

Qu’est-ce que tu as appris aujourd'hui ? Répond aux questions suivantes :

Question 1 : Qu’est-ce que c’est Scratch ?

C’est un site web pour faire des jeu vidéo et des dessins animés.
C’est un langage de programmation visuelle grâce auquel on peut programmer en utilisant des blocs visuels.
C’est un logiciel pour enseigner aux enfants les mathématiques.

Feedback

Question 2 : Que représentent les valeurs de x et y ?

Elles représentent les coordonnées d’un objet sur une grille mathématique.
Elles représentent la largeur et la hauteur d’un objet sur la scène de Scratch.
Elles représentent la position des blocs de code dans la Zone des scripts.

Feedback

Question 3 : Qu’est-ce que c’est une variable ?

Elle est un objet contenant une valeur qui varie toujours.
Elle est un objet contenant une valeur qui est toujours constante.
Elle est un objet contenant une valeur qui peut être constante ou varier.

Feedback

Question 4 : À quoi servent les blocs « contrôle » ?

Ils servent à contrôler l'exécution du script (faire une pause, conditions, répétitions et arrêt) et à gérer l’exécution de clones.
Ils servent à contrôler les déplacements possibles du lutin, ainsi que sa position à tout moment dans la scène.
Ils servent à lancer un script quand il se passe une action précise.

Feedback

Question 5 : À quoi servent les blocs « événement » ?

Ils servent à effectuer des opérations mathématiques.
Ils servent à lancer un script quand il se passe une action précise.
Ils servent à gérer tous les déplacements possibles du lutin.

Feedback

Bibliographie

Ressources