Runner Urbain
Création du décor et des personnages
Dans ce jeu, nous allons programmer un personnage qui avance sur une route défilante. Des ennemis apparaîtront sur la route, et le joueur devra cliquer sur son personnage pour le faire sauter et les éviter.
Pour créer ce jeu, nous avons besoin de :
- Un arrière plan
- Un personnage (joueur)
- Un ennemi (obstacle)
- Une route (en 2 exemplaires pour créer le défilement)
Choisir l’arrière plan : Tu peux soit sélectionner une scène directement dans la bibliothèque Scratch, soit importer une image de ton choix.
Choisis un décor cohérent avec ton univers (ville, nuit, futuriste, etc.)
Choisir le personnage : Sélectionne un sprite existant dans Scratch.
Choisis un sprite qui possède plusieurs costumes. Cela permettra de créer un effet de marche ou de course plus réaliste.
Astuce : reste sur un seul sprite pour voir tous ses costumes qui donneront l’illusion du mouvement.
Ajouter un ennemi : Les sprites Scratch sont généralement orientés vers la droite. Dans notre jeu, les ennemis arriveront de la droite vers la gauche. Il faut donc vérifier leur orientation.
Pour retourner un ennemi :
- Va dans l’onglet Costumes de ton ennemi
- Clique sur Retourner horizontalement
Pour la route : Pour créer l’effet de défilement, nous aurons besoin de deux routes identiques.
Pourquoi deux routes ? Lorsque Sol1 sortira de l’écran, Sol2 prendra sa place. Puis Sol1 reviendra à droite pour continuer le défilement. C’est ce mécanisme qui donne l’impression d’une route infinie.
Dessiner la première route :
- Il te faut choisir « peindre » un sprite. Et il te faudra la dessiner.
- Dessine une grande bande horizontale (couleur sombre). Puis ajoute une ligne centrale en pointillés.
- Astuce pour les pointillés : dessine une longue bande jaune, puis utilise la couleur de la route pour “effacer” des portions et créer l’effet pointillé.
- Renomme ce sprite « Sol1«
Dupliquer la route :
Nous avons besoin d’une deuxième route identique.
- Sur ordinateur : clique droit sur Sol1 et choisis Dupliquer
- Sur tablette : appuie longuement sur le sprite Sol1, un menu s’ouvre et choisis Dupliquer
- Renomme ce second sprite de route « Sol2«
Illusion de marche et de route qui défile
Programmation des routes
Maintenant, nous allons programmer la route pour qu’elle donne l’impression que le personnage avance. En réalité, le personnage ne bouge pas. C’est la route qui se déplace vers la gauche.
Nous voulons que :
- la route avance vers la gauche
- quand elle sort complètement de l’écran
- elle réapparaisse à droite
- et que cela recommence à l’infini
C’est ce mécanisme qui crée l’illusion d’un mouvement continu.
Sur le sprite Sol1 :
- Nous allons mettre la route derrière le joueur pour nous assurer que le personnage restera toujours visible.
- Ensuite, nous allons d’abord placer la route à droite au démarrage du jeu.
- Puis on va boucler le comportement du jeu en lui disant de déplacer la route vers la gauche en permanence (ajouter -10 à x), car la coordonnée x correspond à la position horizontale sur l’écran (plus x est grand, plus l’objet est à droite).
- Ensuite, si son abscisse x devient plus petite que -400 (c’est-à-dire qu’elle est sortie complètement à gauche), on la replace à x = 400 pour la faire réapparaître à droite et créer une boucle infinie.
Pour Sol2, on va faire exactement le même programme que pour Sol1, afin qu’il se déplace à la même vitesse et qu’il se replace au même moment.
La seule chose qui change, c’est sa position de départ : au lieu de le placer à x = 400, on le place à une autre coordonnée (par exemple x = 0) pour qu’il soit déjà visible pendant que Sol1 arrive.
Ainsi, les deux routes se suivent : quand l’une sort de l’écran à gauche, l’autre est déjà en place, ce qui permet de créer un défilement continu sans trou.
Ajuster les coordonnées (important)
Les valeurs -400 et 400 sont des repères. Mais selon la taille de ta route, ces nombres peuvent être légèrement différents. Et en programmation, on teste, on observe, on ajuste. C’est normal de devoir corriger les valeurs.
Si :
- tu vois un trou entre les deux routes : cela signifie que la route revient trop tard.
- les routes se superposent : cela signifie qu’elle revient trop tôt.
Par exemple :
- essayer -420 au lieu de -400
- ou 380 au lieu de 400
On modifie petit à petit jusqu’à obtenir un défilement parfait.
Programmer le joueur
Faire marcher le personnage
Commence par bien positionner ton joueur à gauche de l’écran (par exemple autour de x = -150).
Le personnage ne se déplacera pas horizontalement pendant le jeu. L’illusion de marche sera créée par le changement de costumes, et l’impression d’avancer viendra du défilement de la route en arrière-plan.
Maintenant, nous allons donner l’impression que le personnage marche (ou court, ou vole, suivant ce que tu as choisi). Pour cela, on va faire défiler ses costumes en boucle.
Chaque costume représente une position différente du mouvement (jambe en avant, jambe en arrière, etc.).
En changeant de costume toutes les 0,3 secondes, on crée une animation fluide.
Le bloc répéter indéfiniment permet à cette animation de continuer pendant toute la durée du jeu.
Création des variables du jeu
Pour que notre jeu fonctionne correctement, nous allons créer trois variables importantes.
Clique sur “Créer une variable” et ajoute les suivantes :
- en_jeu : sert à savoir si la partie est en cours ou non
- quand en_jeu = 1, alors le jeu fonctionne normalement
- quand en_jeu = 0, alors le jeu s’arrête (game over)
- score : sert à compter les points du joueur
- lorsque le joueur évite un obstacle
- vitesse_Y : sert à gérer le saut du personnage (sur l’axe Y)
- valeur positive = le joueur monte
- valeur négative = le joueur redescend
Puis, initialise leurs valeurs de départ pour démarrer chaque partie avec :
- La vitesse_Y à 0, car le personnage ne saute pas au démarrage.
- Le score à 0 en début de partie.
- Le jeu à 1 pour indiquer qu’il est en cours dès qu’on lance une partie.
Programmer le saut et la gravité
Dans cette partie, on va gérer le mouvement vertical du personnage : le saut et la descente.
Positionne le personnage pour qu’il débute toujours au même endroit, puis on lance une boucle qui tourne en permanence.
Si en_jeu = 1, alors :
- On enlève 2 à vitesse_Y → cela simule la gravité (le personnage est attiré vers le bas).
- On ajoute vitesse_Y à la position en Y → cela fait monter ou descendre le personnage selon la valeur actuelle de sa vitesse.
Ensuite, on vérifie sa position. Si l’ordonnée Y est inférieure à -37 (le niveau du sol), alors :
- On remet Y à -37 → pour empêcher le personnage de traverser le sol.
- On remet vitesse_Y à 0 → pour arrêter la chute.
Déclencher le saut :
Ici, on dit au jeu :
- Quand le sprite est cliqué, on vérifie d’abord que le personnage est bien au sol (ordonnée Y = -37).
- Si c’est le cas, on met vitesse_Y à 22 : cela donne une impulsion vers le haut et déclenche le saut. (pour sauter plus haut, il faut augmenter ce chiffre)
Pourquoi vérifie-t-on Y = -37 ? Pour éviter que le joueur puisse sauter dans les airs à l’infini. Il ne peut sauter que lorsqu’il touche le sol.
Les obstacles
Apparition des obstacles
Pour créer des obstacles arrivant à l’infini, on va se servir de la notion de clonage. Nous allons cloner notre ennemi pour qu’il se multiplie !
Au démarrage du jeu, on cache le sprite obstacle. On ne veut pas voir l’original, seulement ses clones.
Ensuite, on crée une boucle infinie :
Le programme attend un temps aléatoire entre 0,7 et 1,5 secondes.
Puis il crée un clone de lui-même.
Grâce au temps aléatoire, les obstacles n’apparaissent pas toujours au même rythme. Cela rend le jeu plus dynamique et moins prévisible.
Pense à bien positionner ton sprite obstacle sur la droite de l’écran.
On doit le voir commencer à apparaître, mais pas entièrement. Cela évite un effet d’apparition brutale et donne l’impression qu’il arrive réellement de loin, depuis la droite de la route.
L’objectif est de créer une entrée fluide et naturelle, comme s’il avançait déjà avant d’entrer dans le champ de vision du joueur.
Déplacement et gestion d’un obstacle
Programme le comportement d’un obstacle : il apparaît à droite de l’écran, traverse la route vers la gauche, puis disparaît. S’il arrive au bout sans toucher le joueur, on ajoute un point au score.
Comme nous créons des clones pour générer plusieurs obstacles, nous devons programmer le comportement des clones (et non du sprite original). Chaque clone va apparaître, traverser l’écran, puis disparaître.
- Quand je commence comme un clone : ce bloc signifie que les instructions suivantes concernent uniquement chaque copie créée.
- Montrer : le clone devient visible à l’écran.
- Aller à x: 243 y: -108 : on place l’obstacle au point de départ, à droite de la route.
- Répéter indéfiniment : on lance son déplacement.
- Glisser en 2 secondes à x: -243 y: -108 : l’obstacle traverse l’écran vers la gauche à vitesse constante.
- Ajouter 1 à score : si l’obstacle arrive au bout sans toucher le joueur, le score augmente.
- Supprimer ce clone : l’obstacle disparaît une fois sorti de l’écran.
Gestion du Game Over
Sur le sprite joueur, nous allons gérer la fin de partie.
Si le joueur touche un obstacle :
- On met en_jeu à 0 : cela arrête la logique du jeu
- On envoie à tous le message « game over »
- On arrête les scripts avec stop tout
Toujours sur le sprite du joueur, on peut programmer l’action que va déclencher le fait de recevoir le message « game over »
- quand je reçois « game over »
- dire « GAME OVER » pendant 2 secondes
