Tutoriel de la formation # 2
Félix et Herbert
1. On commence par Démarrer ‘Scratch’ depuis son icône
• Un nouveau projet vide s’ouvre comme illustré ci-dessous
Renommage du 1er caractère
• On renomme notre 1er caractère vers « Félix »
Changement de scène (1)
• Depuis la zone à droite en bas, on clique sur « Scène » :
Changement de scène (2)
• Depuis la zone en centre, on bascule vers l’onglet « Arrière-plan »
• Puis on choisit « Importer...
Changement de scène (3)
• Ensuite, on voit un ensemble de scènes catégorisées par thèmes :
• Pour cet exemple, on choisit ...
Les costumes (1)
• Chaque caractère dans ce mini-jeu peut porter une ou plusieurs
costumes (comme dans la vie courante). I...
Les costumes (1)
• Pour Herbert, on doit le créer en premier lieu :
Les costumes (1)
• Comme pour Félix, on le renomme :
Les costumes (1)
• On peut maintenant ajouter de nouvelles costumes à Herbert :
Donner de la vie à Félix (1)
• Pour commencer à faire bouger Félix et le programmer
convenablement, on commence par le sél...
Donner de la vie à Félix (2)
• Ensuite, dans la zone centrale, on s’assure qu’on est dans l’onglet
« Script » pour commenc...
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 ve...
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 centr...
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 ...
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
touj...
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 ...
Donner de la vie à Félix (8)
• Ensuite, pour commencer un peux à voir Félix bouger, on agrandit la
scène depuis le coin à ...
Donner de la vie à Félix (9)
• Jusqu’à ce moment, Félix ne fait que tourner à Droite ou à Gauche
selon le curseur de la so...
Donner de la vie à Félix (10)
• Félix commence à bouger, mais ses jambes ne le sont pas. Comme en
Dessins animées, on ench...
Donner de la vie à Félix (11)
• Pour donner un peu plus d’ambiance, on ajoute du son (sous la
catégorie « Sons » ):
• On o...
Donner de la vie à Félix (12)
• Ensuite, on doit faire face au fait que Félix attrape Herbert. Pour cela
on ajoute un ‘Con...
Donner de la vie à Félix (13)
• On obtient
• Puis :
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...
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 ém...
Donner de la vie à Félix (16)
• On crée le message à émettre:
Donner de la vie à Félix (17)
• Puis on ajoute de l’effet sonore pour indiquer la collision :
• Ce qui nous donne enfin un...
La gestion du score (1)
• Pour gérer le score, on doit le stocker dans une variable dont la valeur
serait affiché dans la ...
La gestion du score (2)
• Pour gérer le changement du score, on commence par choisir la scène
de la partie à droite :
La gestion du score (3)
• Au démarrage du jeu, le score est à 0 :
La gestion du score (4)
• Au déroulement du jeu, le score augmente :
La gestion du score (5)
• Dans le cas où un message ‘touché’ est émit :
Donner vie à Herbert (1)
• Maintenant, c’est le tour de Herbert d’avoir vie aussi pour qu’il puisse
s’enfuir de Félix. Pou...
Donner vie à Herbert (2)
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...
Donner vie à Herbert (4)
• Gestion de la collision :
Formation Scratch - Felix et Herbert
Prochain SlideShare
Chargement dans…5
×

Formation Scratch - Felix et Herbert

578 vues

Publié le

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

Publié dans : Logiciels
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
578
Sur SlideShare
0
Issues des intégrations
0
Intégrations
16
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Rapidité du mvt  changer le nbre de pas
  • Formation Scratch - Felix et Herbert

    1. 1. Tutoriel de la formation # 2 Félix et Herbert
    2. 2. 1. On commence par Démarrer ‘Scratch’ depuis son icône
    3. 3. • Un nouveau projet vide s’ouvre comme illustré ci-dessous
    4. 4. Renommage du 1er caractère • On renomme notre 1er caractère vers « Félix »
    5. 5. Changement de scène (1) • Depuis la zone à droite en bas, on clique sur « Scène » :
    6. 6. Changement de scène (2) • Depuis la zone en centre, on bascule vers l’onglet « Arrière-plan » • Puis on choisit « Importer »
    7. 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. 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. 9. Les costumes (1) • Pour Herbert, on doit le créer en premier lieu :
    10. 10. Les costumes (1) • Comme pour Félix, on le renomme :
    11. 11. Les costumes (1) • On peut maintenant ajouter de nouvelles costumes à Herbert :
    12. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 24. Donner de la vie à Félix (13) • On obtient • Puis :
    25. 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. 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. 27. Donner de la vie à Félix (16) • On crée le message à émettre:
    28. 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. 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. 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. 31. La gestion du score (3) • Au démarrage du jeu, le score est à 0 :
    32. 32. La gestion du score (4) • Au déroulement du jeu, le score augmente :
    33. 33. La gestion du score (5) • Dans le cas où un message ‘touché’ est émit :
    34. 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. 35. Donner vie à Herbert (2)
    36. 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. 37. Donner vie à Herbert (4) • Gestion de la collision :

    ×