Créer le Chemin Stylo
Dans ce projet, tu vas créer un jeu où ton héros devra traverser des îles séparées par de l’eau.
Il pourra marcher uniquement sur la terre, et pour avancer, tu devras dessiner des ponts avec la fonction stylo de Scratch.
L’objectif est simple : atteindre le drapeau d’arrivée sans tomber dans l’eau.
Dans cette page tu trouveras :
Dessine les îles sur Piskel
Le Format
Commence par ouvrir Piskel.
C’est ici que tu vas créer les cartes de ton jeu.
Ton image doit être à la même taille que l’écran de Scratch, c’est-à-dire 480 pixels de large sur 360 pixels de haut.
Les Couleurs
Utilise trois couleurs bien différentes pour ton décor :
- Une couleur pour le sol, sur lequel ton héros pourra marcher.
- Une couleur pour l’eau ou la lave, les zones où il n’a pas le droit d’aller.
- Et une troisième couleur pour les barrières, qui empêcheront ton stylo de tracer des traits.
Dessine les îles
Pour dessiner :
Tu peux utiliser les outils ligne, rectangle ou cercle.
Puis remplir les zones avec le pot de peinture.
Ajoute des barrières
Tu peux créer des contours pour simuler des barrières, mais attention pas partout !
Cela influera sur le tracer que devra faire le joueur avec le stylo.
Essaie de ne pas trop réduire les zones où le joueur va pouvoir mettre le stylo ! Donc à ne pas faire de trop petites ouvertures de barrières !
Nouveau Niveau
Quand ton premier décor est terminé, tu peux créer un nouveau niveau dans Piskel, modifier un peu la forme des îles et ainsi orienter le chemin que le joueur devra suivre.
Essaie de garder une organisation simple : ton héros commencera toujours en bas à gauche, et le drapeau d’arrivée sera en haut à droite. Cela t’évitera d’ajouter trop de code.
Exporter tes arrière-plans
Enfin, exporte chaque image en GIF (cela te permettra de télécharger tous les arrière-plans d’un seul coup).
La base du projet
Importe les niveaux dans Scratch
Une fois tes arrière-plans prêts, ouvre Scratch.
Va dans la partie “Arrière-plan” et clique sur Importer. Sélectionne ton GIF dans le dossier “Téléchargements”.
Ensuite, dans la section “Arrière-plan” :
- Supprime le fond blanc par défaut.
- Ajoute un dernier arrière-plan “Victoire”, qui s’affichera à la fin du jeu.
- Renomme bien chaque arrière-plan : Niveau 1, Niveau 2, Niveau 3, etc.
Le héros
Crée ton héros
Pour ton personnage, tu peux soit le dessiner toi-même dans Piskel, soit choisir un sprite dans la bibliothèque Scratch.
Fais attention à ne pas le faire trop grand, sinon il ne passera pas entre les îlots.
Place ton héros en bas à gauche de ton décor, sur une zone de terre.
Vérifie qu’il est bien positionné sur chaque arrière-plan et ajuste sa position si nécessaire, pour qu’il soit bien placé partout.
Déplacement de ton héros
On va faire en sorte que le héros se déplace avec les flèches du clavier dans les quatre directions.
À chaque fois qu’on appuie sur une flèche, on modifie soit la position X (pour aller à gauche ou à droite), soit la position Y (pour aller en haut ou en bas).
Dans son code, ajoute aussi :
- Quand le drapeau vert est cliqué
- Aller à x: [ ] y: [ ]
Cela permet de replacer automatiquement ton héros au bon endroit à chaque début de partie.
Le faire éviter l’eau
Maintenant, il faut empêcher ton héros d’aller dans l’eau !
Pour cela, utilise la pipette pour récupérer la couleur de l’eau sur ton décor.
Ensuite, dans ton code, ajoute une condition :
- Si je touche la couleur de l’eau.
- Alors je reviens à ma position de départ.
Le stylo
Extension stylo
C’est ici que ton jeu devient vraiment original !
Tu vas utiliser l’extension Stylo de Scratch pour dessiner des ponts entre les îles.
- Va dans “Ajouter une extension” et sélectionne Stylo.
Nouveau Sprite : la balle
Ajoute un nouveau sprite, par exemple une balle. C’est elle qui servira de pointe de stylo.
Si tu n’utilises pas la balle, choisis un objet pas trop gros ou réduis sa taille (environ 30 %).
Dans son code, tu vas lui indiquer quand dessiner :
- Quand le drapeau vert est cliqué.
- Choisis l’épaisseur du stylo (entre 40 et 60 selon ton décor).
- Choisis la couleur du tracée.
- Ajoute une boucle infinie.
- Aller à [pointeur de souris]
De cette façon, ton stylo suivra les mouvements de ta souris en permanence.
Dessiner avec le stylo
Ajoute un bloc si… sinon… :
- Si la touche ESPACE est pressée
- → tracer
- Sinon
- → relever le stylo
En maintenant appuyé la touche ESPACE le joueur pourra dessiner !
Enfin, pour éviter que le joueur ne triche, fais en sorte que le stylo ne puisse pas dessiner sur les barrières.
Utilise à nouveau la pipette pour récupérer la couleur des barrières et ajoute une condition :
- Si la balle touche cette couleur, alors efface tout le dessin.
Fais bien attention à ne pas toucher les barrières, même lorsque tu ne traces pas de traits, sinon ton dessin sera effacé !
Le drapeau d’arrivée
Ajoute un sprite “Drapeau” et place-le en haut à droite du décor.
Vérifie qu’il est bien positionné sur chaque arrière-plan et ajuste sa taille si besoin.
Dans le code du héros, quand il touche le drapeau, il doit passer au niveau suivant :
- Si je touche le drapeau, alors :
- Aller à la position de départ (pour commencer le nouveau niveau)
- Effacer tous les tracés
- Passer à l’arrière-plan suivant
Bonus
Bouton “Maison” pour recommencer
Il est possible que tu te bloques ou que tu rates ton tracé.
Alors, on va ajouter un petit bouton “Maison” pour recommencer le niveau.
Crée un nouveau sprite (une maison ou un autre bouton que tu peux dessiner toi-même).
Le code du Bouton
- Pour que le bouton soit toujours au premier plan et qu’il soit cliquable :
- Quand ce sprite est cliqué
- Répéter indéfiniment
- Aller à [l’avant] plan
- Place-le dans un coin de l’écran et ajoute ce code :
- Quand ce sprite est cliqué
Envoyer à tous le message “Recommencer”
Le code du Héros
Dans le héros :
- Quand je reçois “Recommencer”
- Aller à la position de départ
Le code du Stylo
Et dans la balle (le stylo) :
- Quand je reçois “Recommencer”
- Effacer tout
Limite d’encre
Pour rendre ton jeu plus difficile, tu peux ajouter une quantité d’encre limitée.
Crée une variable appelée “Encre” et donne-lui une valeur de départ, par exemple 70 ou 100.
À chaque fois que tu dessines (quand tu appuies sur ESPACE), tu enlèves un peu d’encre :
- Changer Encre de -1
Quand l’encre arrive à zéro, le dessin s’efface et tu ne peux plus tracer.
Et bien sûr, quand tu recommences un niveau ou que tu passes au suivant, pense à remettre ton encre au maximum.
Là dans le code du héros
