Tutoriel – Scratch : raconter une histoire

Ce tutoriel permet de découvrir certaines des fonctions de base de Scratch, par leur utilisation dans la création d’une courte scène interactive. Cette scène forme alors la base d’une histoire interactive.

Cette réalisation est destinée à un public découvrant Scratch et permet d’aborder les bases des mouvements, le suivi du curseur, les dialogues et les messages.

Tout d’abord, il va falloir choisir le décor de l’histoire.

Cliquer sur l’icône d’image en dessous de la scène. Choisir un décor qui convient ; pour l’exemple ce sera «underwater2», il est dans le dossier «nature».

Il faut que ce décor soit visible. Pour cela, il faut le faire apparaître au démarrage de l’animation, grâce au bloc « basculer sur l’arrière-plan », qu’il faut accrocher au bloc « quand drapeau vert est cliqué », comme ceci :

Il faut ajouter le personnage qui va vivre une histoire.

Pour cela, créer un nouveau lutin avec le bouton de lutin sous la scène, et choisir un modèle, par exemple « octopus » :

Les modèles proposés possèdent plusieurs costumes, montrant le personnage ou la créature dans différentes poses. Ceci va permettre de les animer. Basculer sur l’onglet script, et ajouter les blocs ci-dessous :

Explication du code : quand le jeu commence (càd quand le drapeau vert est cliqué), le lutin va commencer à faire, sans s’arrêter (« indéfiniment »), les choses suivantes : changer de costume pour prendre le costume A, attendre 1 seconde, changer de costume pour prendre le costume B, attendre 1 seconde. Puis il va recommencer, encore et encore.

Cliquer sur le drapeau vert pour vérifier le résultat. Comme les costumes A et B montrent les tentacules dans des positions différentes, en changeant de costume, on obtient l’impression que le lutin bouge. Essayer différentes valeurs d’attente (2 secondes, 0,5, …) et cliquer sur le drapeau vert pour tester différentes vitesses d’animation.

A présent, faisons parler le lutin. Deux blocs « dire … » peuvent servir à cela. Ajouter le bloc qui possède une durée (« dire … pendant … secondes ») plusieurs fois, et remplir le texte comme ci-dessous pour créer un dialogue ::

-Salut!

-Je suis Poulpy et je me suis perdu…

-Tu veux bien m’aider à retrouver mon chemin ?

Le tout sous un nouveau bloc « quand le drapeau est cliqué » :

Maintenant, faisons en sorte que le lutin suive le curseur de la souris, ce qui permettra au joueur de le guider dans le décor. Pour que le lutin suive la souris sans s’arrêter, il faut placer un bloc « répéter indéfiniment », et à l’intérieur mettre les blocs bleus servant aux mouvements :

Explication du code : le lutin va d’abord se tourner vers le pointeur de la souris, puis avancer de 5 pas. S’il a touché le pointeur, il va avancer de « -5 » pas, c’est-à-dire reculer.

Relier ces blocs à ceux du dialogue :

Une fois qu’il a parlé, le lutin nage vers le pointeur.

Pour comprendre à quoi sert de reculer si le lutin touche le curseur, ne pas hésiter à retirer les blocs et cliquer le drapeau vert pour tester ce qu’il se passe. Le lutin va s’emballer ; en plaçant cette condition (« si…alors… »), on évite que le problème ne se produise.

Nous avons notre décor, notre héros, son histoire, mais il manque un voyage : passer de décor en décor pour découvrir de nouvelles personnes… .Il va falloir créer un panneau sur lequel on pourra cliquer et voyager d’un décor à l’autre.

Cliquer sur «Dessiner un nouveau lutin» (l’icône de pinceau sous la scène) :

Dessiner un panneau et utiliser l’outil texte (icône T) pour inscrire le nom d’un lieu dessus, par exemple « Corail City » :

Il faut que lorsque le panneau est visible, et lorsqu’il est cliqué, le décor change. Ajouter les blocs suivants dans le script du panneau :

Explication du code : quand l’histoire commence (le drapeau vert est cliqué), le panneau apparait (« montrer »). Quand le panneau est cliqué, il envoie le message « corail city » (cliquer la petite flèche puis « nouveau message » et lui donner un nom) à tous les éléments de Scratch (décor, lutins,…).

Cet envoi de message permet de signaler à Scratch qu’il se passe quelque chose, et qu’il faut réagir. Nous allons pouvoir ajouter des réactions au décor, ce qui lui permettra de changer.

Cliquer sur Scène et entrer les blocs suivants :

Quand l’arrière-plan reçoit le message «Corail City», l’arrière-plan suivant s’affiche.

Le message envoyé par le panneau a été reçu par le décor, et le décor réagit en se changeant lui-même. Envoyer des messages permet donc de faire beaucoup de choses qui seraient autrement impossibles. Dans cet exemple, le panneau ne peut pas changer le décor. A la place, le panneau envoie un message, et le décor se change lui-même.

Mais changer en quoi ? Il faut ajouter un autre arrière-plan ! Cliquer l’onglet arrière-plan, et le bouton pour ajouter un nouveau :

Cliquer le drapeau vert pour tester le résultat et cliquer sur le panneau. On observe que le changement entre les deux décor est très rapide. Il est possible de rendre cette transition plus douce et animée, en ajoutant les blocs suivants :

Explication du code : quand l’arrière-plan reçoit le message «Corail City», en dix étapes (« répéter 10 fois »), l’arrière-plan va attendre 0,5 secondes puis se déformer (effet tournoyer). Il va ensuite changer. Enfin, il va de nouveau tournoyer en dix étapes, mais dans l’autre sens (la valeur est -100, alors que la première fois elle était de 100).

Cliquer le drapeau vert, puis le panneau, pour tester le résultat.

Maintenant que la base de l’histoire est posée et que les mécanismes pour la rendre active sont posés, vous pouvez ajouter plein de choses pour continuer l’histoire :

• ajouter des décors
• ajouter d’autres personnages, avec qui avoir des dialogues
• ajouter un personnage qui suive le personnage principal (par exemple un requin)
• ajouter des lutins « nourriture » et les manger
• faire un niveau avec des trésors cachés à trouver en cliquant dessus
• …

Scratch offre plein de possibilités, à vous d’imaginer vos histoires !

Conseil médiation 

Pour aller plus plus loin sur le sujet, nous vous conseillons de vous référer à la fiche outil « Guide de présentation de Scratch«