Scratch : Thésée et le Minotaure

Image non disponible

Le but de ce tutoriel est de vous montrer pas à pas la réalisation du jeu « Thésée et le Minotaure ».

Vous pouvez commenter l'article en suivant le lien suivant : 3 commentaires Donner une note à l'article (5), alors après votre lecture, n'hésitez pas.

Article lu   fois.

Les deux auteurs

Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Introduction

Scratch est un nouveau langage de programmation qui facilite la création d'histoires interactives, de dessins animés, de jeux, de compositions musicales, de simulations numériques, etc. et leur partage sur le Web.

Il est conçu pour initier les enfants, âgés de 8 ans et plus, à des concepts importants en mathématiques et informatique, tout en apprenant à développer une pensée créative, un raisonnement systématique et à travailler en équipe.

II. Installer et découvrir Scratch

Télécharger SCRATCH à l'adresse suivante : http://scratch.mit.edu/download.

Il est disponible pour Mac OS X, Windows et pour Linux.

L'aide standard est en anglais. Il vous faut télécharger l'aide en français à l'adresse suivante : http://scratchfr.free.fr/Scratchfr_v2014/blocks_editor_Experiment.po.zip.

Ensuite vous ouvrez Scratch. Vous obtenez l'écran suivant :

Figure 1 : interface de programmation

Image non disponible

Image non disponible

  • La zone 1 est la palette qui vous permet de choisir la catégorie de blocs.
  • Dans la zone 2 apparaissent les blocs de la catégorie choisie.
  • Vous déplacez vos blocs dans la zone 3 pour assembler vos scripts.
  • La zone 4 affiche le résultat de votre programme.
  • Dans la zone 5 s'affichent tous les objets graphiques que vous utilisez.

Automatiquement au démarrage la mascotte Scratch apparaît comme « lutin » ou « sprite » par défaut.

Essayez le script suivant en recherchant les blocs correspondants :

Figure 2 : notre premier script

Image non disponible

Image non disponible

Attention à ces trois petits boutons :

Image non disponible

Image non disponible

Ils définissent l'orientation automatique de votre lutin.

Cliquez sur celui du milieu.

Cliquez sur le drapeau vert et appuyez sur les touches de déplacement du curseur de votre clavier.

Voilà ! le résultat est immédiat.

Je vous propose maintenant un jeu à réaliser : « Thésée et le Minotaure ».

Le cycle de développement d'un programme SCRATCH est itératif, comme le montre la figure ci-dessous :

Figure 3 :cycle de développement SCRATCH

Image non disponible

Les étapes proposées ci-dessous sont la première itération de développement de notre jeu. Vous pourrez refaire une itération pour améliorer les différents aspects du jeu.

III. Créer son premier jeu vidéo avec Scratch

III-A. Le but du jeu

Il s'agira d'aider Thésée à traverser le labyrinthe en évitant le Minotaure, en trouvant le trésor puis la sortie.

Ce jeu simple doit permettre de couvrir les principes élémentaires de programmation d'un jeu :

Figure 4 :ce que vous allez apprendre avec ce tutoriel

Image non disponible

III-B. Dessiner les différents éléments

Il faudra dessiner les personnages (Thésée, le Minotaure), les objets (le trésor), les décors (le « générique/intro », le labyrinthe).

Scratch est pourvu d'un outil de dessin intégré qui couvre la plupart des besoins :

Figure 5 : accéder à l'outil de dessin

Image non disponible

Image non disponible

Figure 6 : l'outil de dessin Scracth

Image non disponible

Image non disponible

  • Zone 1 Image non disponible : agrandir ou réduire votre dessin.
  • Zone 2 Image non disponible : effectuer une rotation à votre dessin.
  • Zone 3 Image non disponible : retourner votre dessin.
  • Zone 4 Image non disponible : importer une image.
  • Zone 5 Image non disponible : annuler ou rétablir une action.
  • Zone 6 Image non disponible : effacer votre dessin.
  • Zone 7 Image non disponible : palette d'outil de dessin.
  • Zone 8 Image non disponible : taille du crayon à dessin.
  • Zone 9 Image non disponible : palette de couleurs.
  • Zone 10 Image non disponible : définir l'axe de rotation de votre dessin.
  • Zone 11 Image non disponible : zoom.
  • Zone 12 : zone de dessin.

III-C. Créer et dessiner Thésée

Nous allons reprendre la mascotte Scratch et lui ajouter un casque d'hoplite en définissant le centre du costume :

Figure 7 : dessiner Thésée

Image non disponible

Image non disponible

III-D. Créer le personnage du Minotaure

Pour aller vite, nous allons importer un lutin de la bibliothèque fournie avec Scratch en cliquant sur le dossier avec l'étoile :

Figure 8 : insérer un nouveau lutin

Image non disponible

Image non disponible

Nous accédons à la bibliothèque d'objets graphiques et nous choisissons celui qui se rapproche le plus du Minotaure dans le répertoire /Costumes/Fantasy :

Figure 9 : choisir le Minotaure

Image non disponible

Image non disponible

III-E. Dessiner le labyrinthe

Cliquez sur scène :

Figure 10 :choisir Scène

Image non disponible

Image non disponible

L'outil de dessin pour la scène est le même que pour les autres objets :

Figure 11 :dessiner l'arrière-plan labyrinthe

Image non disponible

Image non disponible

Le point vert symbolise l'arrivée.

Après avoir réalisé notre labyrinthe, nous nous apercevons que nos personnages sont trop gros par rapport au décor :

Figure 12 : résultat intermédiaire

Image non disponible

Il faut donc les réduire. Pour cela, nous allons utiliser le bloc Image non disponible qui se trouve dans le groupe « Apparence » :

Figure 13 : script de réduction des lutins

Image non disponible

Image non disponible

Nous allons maintenant ajouter le trésor :

Figure 14 : insérer le trésor en choisissant un nouvel objet

Image non disponible

Image non disponible

Choisir un nouvel objet dans la bibliothèque symbolisant le trésor dans le répertoire /Costumes/letters.

Pour nous, ce sera la lettre « T » :

Figure 15 : les éléments de notre jeu

Image non disponible

Image non disponible

Nous avons maintenant tous les éléments de notre jeu : Thésée, le Minotaure, le trésor et le labyrinthe.

III-F. Déplacer son personnage (Thésée)

Les directions dans Scratch sont les suivantes :

Figure 16 : les angles de direction

Image non disponible

Allez dans le groupe de blocs jaunes « Contrôle » et choisissez « Quand Espace est pressé ».

Allez dans le groupe de blocs bleus « Mouvements » et choisissez « se diriger en faisant un angle puis avancer de 5 pas ».

Ce qui nous donne le script suivant pour déplacer notre lutin :

Figure 17 :script de déplacement

Image non disponible

Image non disponible

III-G. Détecter les obstacles (murs du labyrinthe, sortie) avec les capteurs

Les murs du labyrinthe sont jaunes. Il faut que si notre personnage touche un mur jaune il recule.

Vous savez maintenant où trouver les blocs jaunes de « contrôle ». Les capteurs sont dans le groupe bleu clair. Choisissez le capteur qui convient le mieux : « couleur touchée » dans notre cas. Lorsque vous cliquez sur le carré de couleur jaune du bloc « couleur touchée ? », une pipette apparaît à la place du curseur et vous cliquez ensuite sur la couleur à détecter :

Figure 18 : détecter le mur jaune

Image non disponible

Image non disponible

S'il atteint la sortie (de couleur verte), c'est la fin du jeu. Il faut donc le signaler en « envoyant un message » :

Figure 19 :sortie atteinte

Image non disponible

Image non disponible

Nous verrons plus loin comment utiliser les messages avec « Trésor_trouvé ».

III-H. Faire apparaître le trésor aléatoirement dans le labyrinthe

Dans le groupe « Mouvement » choisir « Aller à x : y : », puis dans « Opérateurs » choisir « nombre aléatoire entre _ et _ ». Glissez et déposez ce bloc comme dans la figure ci-dessous :

Figure 20: apparition aléatoire du trésor

Image non disponible

Image non disponible

III-I. Détecter les collisions/interactions avec les capteurs et incrémenter la variable SCORE

Qui dit jeu, dit SCORE. Nous allons donc créer une variable SCORE :

Figure 21 :variable SCORE

Image non disponible

Image non disponible

Lorsque nous créons une variable, de nouveaux blocs apparaissent :

Figure 22: blocs de gestion des variables

Image non disponible

Image non disponible

III-J. Thésée a-t-il trouvé le trésor ?

Figure 23 : 10 points si le trésor est trouvé

Image non disponible

Image non disponible

Si le trésor est trouvé et que Thésée l'emporte, il doit disparaître avec le bloc « cacher » :

Figure 24 : le trésor est emporté par Thésée

Image non disponible

III-K. Déplacement pseudoaléatoire du Minotaure

Le déplacement des personnages non joueurs (PNJ) est la fonction la plus difficile à programmer. C'est elle qui fait la difficulté du jeu. Difficulté tant du côté du programmeur que du joueur. C'est pour cela que nous avons choisi une option relativement simple. Ici, nous allons utiliser une variable pour déterminer une direction aléatoire :

Figure 25 : créer la variable de direction aléatoire

Image non disponible

Image non disponible

Dans « Variables » vous choisissez le bloc prend la valeur. Dans le groupe « Opérateur » vous choisissez nombre aléatoire entre __ et __ pour obtenir le script suivant.

Voici ensuite un algorithme possible pour déplacer votre Minotaure :

Figure 26 : exemple de déplacement aléatoire du Minotaure

Image non disponible

Image non disponible

III-L. Fin de la première itération

Voilà, nous avons fini notre première itération. Nous avons un labyrinthe dans lequel le joueur déplace le personnage Thésée. Si Thésée trouve le trésor, il marque 10 points. S'il arrive à la sortie, il a terminé le jeu. Nous avons utilisé six groupes de blocs d'instructions sur les huit disponibles.

Dans vos itérations suivantes, vous pourrez :

  • déterminer si Thésée doit tuer le Minotaure et avec quoi (une épée, une boule de feu…) ;
  • ajouter un générique de début et de fin ;
  • améliorer le déplacement du Minotaure.

Amusez-vous bien !

IV. Remerciements

Nous remercions Christophe THOMAS d'avoir autorisé Developpez.com à gabariser son tutoriel, et aussi zoom61 pour avoir remis à jour le tutoriel.

Ainsi que milkoseck et ClaudeLeloup pour la relecture orthographique.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Licence Creative Commons
Le contenu de cet article est rédigé par Christophe THOMAS et est mis à disposition selon les termes de la Licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Pas de Modification 3.0 non transposé.
Les logos Developpez.com, en-tête, pied de page, css, et look & feel de l'article sont Copyright © 2013 Developpez.com.