Création et déplacement d’un

lutin sur la scène

Description du projet
Ce projet est un projet d’introduction destiné à se
familiariser avec Scratch, son langage et son interface. Dans
ce projet, nous allons ajouter un lutin à l’écran, le faire se
déplacer à l’aide des touches directionnelles du clavier
(droite, gauche, haut, bas) et l’animer conformément à ses
mouvements. Il permet de créer une première série de petits
enchainements logiques simples.

Partie 1 – Préparation de l’application et ajout des

ressources

Supprimer le lutin de SCRATCH présent à l’écran par défaut (le

chat)

Ajouter l’ image d’arrière-plan contenue dans les ressources de

ce projet ( l’arrière-plan n’est, dans ce projet, pas
nécessaire au fonctionnement du programme ).

Ajouter le lutin contenu dans les ressources de ce projet, le

modifier et le renommer.

Commandes utilisées : l’interface de SCRATCH.

Info : vous pouvez consulter la vidéo de tutoriel Scratch

concernant l’ajout de lutin si vous ne l’avez pas déjà fait ou
si vous souhaitez un rappel.

Partie 2 – Programmation

Le cheminement de ce programme est le suivant :

à chaque évènement de touche directionnelle pressée (droite,

gauche, haut, bas), nous allons associer un mouvement du lutin
sur la ‘scène’, c’est à dire sur l’écran de l’application
SCRATCH, dans la direction choisie;

par ailleurs, à chaque changement de direction nous allons

changer l’ apparence du lutin pour qu’elle corresponde à l’état
dans lequel il se trouve (tourné vers la gauche, vers la droite
ou de dos) , nous allons donc modifier son costume .

Voyons d’abord comment cela pourrait se traduire en pseudo

code:

Lien

La notion de pseudo code ainsi que les conventions que nous

utilisons sont disponibles ici : cliquer
Pseudo code pour le lutin ‘cody’

Si touche "fleche droite" pressee==vrai Alors l'abscisse x du

lutin est incrémentée de 2 il s'affiche représenté du coté
gauche Fin Si Si touche "fleche gauche" pressee==vrai Alors
l'abscisse x lutin est décrémentée de 2 il s'affiche représenté
du coté droit Fin Si Si touche "fleche haut" pressee==vrai
Alors l'ordonnée y du lutin est incrémentée de 2 il s'affiche
représenté de dos Fin Si Si touche "fleche bas" pressee==vrai
Alors l'ordonnée y du lutin est décrémentée de 2 il s'affiche
représenté de dos Fin si

Dans SCRATCH, cet algorithme peut se programmer de deux

manières différentes. La différence réside dans l’approche de
la gestion des évènements clavier, c’est à dire la façon dont
on saura si telle ou telle touche du clavier est pressée par
l’utilisateur.

La première est plus simple et plus basique et si elle est tout

à fait logique d’un point de vue de la programmation
évènementielle, son rendu dans SCRATCH n’est pas très bon et
donne un effet saccadé au déplacement. La seconde implique plus
de notions mais a un rendu beaucoup plus fluide (dans le cadre
de la programmation d’un jeu où les mouvements sont importants,
c’est elle qui sera privilégiée).

Le code Scratch du lutin ‘cody’

Méthode 1 – gestion des touches claviers par les blocs de type

‘évènements’

Pour cette méthode nous utiliserons les blocs de type:

‘Evènements’ : afin de savoir quand l’utilisateur appuiera sur

les touches directionnelles

‘Mouvements’ : afin de déplacer le lutin sur la scène

‘Apparence’ : afin de modifier l’apparence du lutin

Dans cette approche nous allons prendre un bloc évènement pour

savoir quand telle ou telle touche du clavier sera pressée par
l’utilisateur et lui juxtaposer les blocs d’instructions que
l’on souhaite lui voir déclencher : changer de costume,
s’orienter et se déplacer dans la direction correspondante.

Ainsi, si nous plaçons le code suivant dans notre lutin:

Il produira la chose suivante :

Lorsque la touche ‘flèche droite’ est pressée :

le lutin change de costume pour être visuellement de profil,

s’oriente vers la droite,

avance de 2 pixels sur l’axe des abscisses.

Le code complet pour les 4 directions sera sur le même

principe:
Méthode 2 – gestion des touches claviers grâce aux blocs de
type ‘capteurs’

Cette méthode est un petit peu plus complexe que la précédente

car elle comprend des conditions et une boucle. Elle demande
d’utiliser les blocs de type ‘Capteurs’, de type ‘Mouvements’ ,
de type ‘Apparence’ et de type ‘Contrôle’.

Les blocs de type ‘Capteurs‘ vous permettent d’identifier

certains évènements (la position du pointeur de la souris sur
l’écran, s’il y a une collision entre un lutin et une couleur,
…) à un moment t par une condition.

Le bloc qui ‘capte’ les évènements de type ‘clavier’

est . Pour que nous puissions

identifier, ‘capter’, si l’utilisateur appuie sur une touche,
nous devons définir une condition. Et pour vérifier cette
condition à tout moment dans notre programme, nous allons la
vérifier en permanence, c’est à dire dans une boucle infinie,
ou en langage Scratch, le bloc ‘répéter indéfiniment’.

Le code SCRATCH qui suit exécutera en permanence la chose

suivante pour le lutin qui le contient : si la touche ‘flèche’
gauche est pressée’ , avance de 2 pixels sur l’axe des
abscisses.

Le code pour les 4 directions sera basé sur le même principe

avec les valeurs adéquates:
Ce projet en vidéo

Pour ceux qui veulent aller plus loin lors de cette

séance

Ajouter un second lutin à l’application et le faire se déplacer

avec d’autres touches.

Animer les lutins et les faire marcher lors de leurs

mouvements.

Suggestion de projet suivant :

(code source, ressources graphiques et fiche récapitulative)