Formation Scratch d'un simple jeu "Felix et Herbert" pour Orange Developer Center

1. Tutoriel de la formation # 2
Félix et Herbert

2. 1. On commence par Démarrer ‘Scratch’ depuis son icône

3. • Un nouveau projet vide s’ouvre comme illustré ci-dessous

4. Renommage du 1er caractère
• On renomme notre 1er caractère vers « Félix »

5. Changement de scène (1)
• Depuis la zone à droite en bas, on clique sur « Scène » :

6. Changement de scène (2)
• Depuis la zone en centre, on bascule vers l’onglet « Arrière-plan »
• Puis on choisit « Importer »

7. Changement de scène (3)
• Ensuite, on voit un ensemble de scènes catégorisées par thèmes :
• Pour cet exemple, on choisit le « desert » sous le dossier « Nature »
(Ce n’est qu’un exemple, utilisez votre imagination pour une scène qui
semble convenable pour vous )

8. Les costumes (1)
• Chaque caractère dans ce mini-jeu peut porter une ou plusieurs
costumes (comme dans la vie courante). Ici, une costume représente
plus précisément une image d’un état particulier d’un caractère.
• Pour Félix, il a 2 costumes pour faire en sorte qu’il marche.
• On clique sur Félix une autre fois et on bascule vers l’onglet
‘Costumes’ ou on s’assure qu’il y a les 2 costumes convenables par
défaut :

9. Les costumes (1)
• Pour Herbert, on doit le créer en premier lieu :

10. Les costumes (1)
• Comme pour Félix, on le renomme :

11. Les costumes (1)
• On peut maintenant ajouter de nouvelles costumes à Herbert :

12. Donner de la vie à Félix (1)
• Pour commencer à faire bouger Félix et le programmer
convenablement, on commence par le sélectionner à droite au
dessous de la scène :

13. Donner de la vie à Félix (2)
• Ensuite, dans la zone centrale, on s’assure qu’on est dans l’onglet
« Script » pour commencer :
• Dans le coin gauche en haut, on peut voir les différents types de
scripts qu’on peut faire sur les différents caractères de ce mini-jeu

14. Donner de la vie à Félix (3)
• Après, la 1ère étape à faire est à lier l’enchaînement des événements
au clic du drapeau vers dans le coin à droite de la scène
• On commence par choisir le type de scripts « contrôle » sous lequel
on trouve une liste de scripts depuis lesquels on cite à titre d’exemple

15. Donner de la vie à Félix (4)
• On choisit le premier élément, pour cela on fait glisser cet élément
vers l’espace au centre :
• On doit aboutir à cela après le glissement :

16. Donner de la vie à Félix (5)
• Maintenant, on peut faire l’enchainement des actions de Félix sous
l’élément récemment mis dans l’espace se travail
• Félix va bouger tant qu’on n’a pas arrêté le jet (Cercle rouge près du
drapeaux vert) donc ces actions vont se faire ‘toujours’. Pour cela on
ajoute l’élément correspondant depuis la liste des contrôles :

17. Donner de la vie à Félix (6)
• On obtient :
• Tous ce que Félix va faire se met dans ce bloc, en premier lieu il doit
toujours se diriger vers là ou le curseur du souris pointe (pour
attraper Herbert), pour cela on utilise un élément sous la catégorie
« Mouvement »

18. Donner de la vie à Félix (7)
• Dans le dernier élément ajouté, on remarque qu’il y a une liste
déroulante . Si on l’ouvre on va trouver vers quoi Félix peut pointer :
• Dans notre cas, Félix doit pointer vers le ‘pointeur de souris’

19. Donner de la vie à Félix (8)
• Ensuite, pour commencer un peux à voir Félix bouger, on agrandit la
scène depuis le coin à droite en haut :
•
• Puis on clique sur le drapeaux vert.
• On remarque que Félix ne fait que de la rotation, pour changer ce
comportement, on choisit depuis la zone centrale :

20. Donner de la vie à Félix (9)
• Jusqu’à ce moment, Félix ne fait que tourner à Droite ou à Gauche
selon le curseur de la souris. Pour qu’il se ‘dirige’ vers le curseur, sous
la même catégorie ‘Mouvement’ on choisit :
D’où on obtient :

21. Donner de la vie à Félix (10)
• Félix commence à bouger, mais ses jambes ne le sont pas. Comme en
Dessins animées, on enchaine deux images successives de Félix
obtenus depuis les costumes déjà vus dans les pages qui précèdent.
• Sous la catégorie « Apparence », on choisit l’élément qui permet de
changer successivement la ‘costume’ de Félix :

22. Donner de la vie à Félix (11)
• Pour donner un peu plus d’ambiance, on ajoute du son (sous la
catégorie « Sons » ):
• On obtient :

23. Donner de la vie à Félix (12)
• Ensuite, on doit faire face au fait que Félix attrape Herbert. Pour cela
on ajoute un ‘Contrôle’ qui teste à chaque mouvement de Félix s’il a
touché Herbert:
• Dans ce nouveau bloc de ‘si’ , on met :

24. Donner de la vie à Félix (13)
• On obtient
• Puis :

25. Donner de la vie à Félix (14)
• Ce qui donne :
• Donc, tout ce qui est dans ce nouveau bloc de contrôle se déroule
lorsque Félix touche Herbert

26. Donner de la vie à Félix (15)
• Maintenant qu’on a pu détecter l’événement de collision entre Félix
et Herbert, on fait émettre un message au autres entités de notre jeu
(Scène pour le changement de score et Herbert pou qu’l change de
costume vers le fantôme).

27. Donner de la vie à Félix (16)
• On crée le message à émettre:

28. Donner de la vie à Félix (17)
• Puis on ajoute de l’effet sonore pour indiquer la collision :
• Ce qui nous donne enfin un Félix qui bouge :

29. La gestion du score (1)
• Pour gérer le score, on doit le stocker dans une variable dont la valeur
serait affiché dans la scène. Pour cela, dans la catégorie « Variables »
on en crée une nouvelle:

30. La gestion du score (2)
• Pour gérer le changement du score, on commence par choisir la scène
de la partie à droite :

31. La gestion du score (3)
• Au démarrage du jeu, le score est à 0 :

32. La gestion du score (4)
• Au déroulement du jeu, le score augmente :

33. La gestion du score (5)
• Dans le cas où un message ‘touché’ est émit :

34. Donner vie à Herbert (1)
• Maintenant, c’est le tour de Herbert d’avoir vie aussi pour qu’il puisse
s’enfuir de Félix. Pour ce faire, on choisit Herbert de la partie à droite :

35. Donner vie à Herbert (2)

36. Donner vie à Herbert (3)
• C’est le curseur de la souris que Herbert va suivre :
On fait le même pour résoudre le problème de rotation de Herbert :

37. Donner vie à Herbert (4)
• Gestion de la collision :