ZigZag Avion - GDevelop
Sur cette page, tu trouveras :
Le concept du jeu
Tu vas créer un jeu où un avion avance automatiquement et doit éviter des obstacles, en tapotant sur l’écran ou avec la touche « ESPACE ».
Le but est simple : tenir le plus longtemps possible sans toucher les obstacles ou le sol.
QRCODE pour tester le jeu :
Dans notre exemple, on a un avion qui doit éviter des pics. Mais tu es libre de changer les obstacles comme tu veux, et même de modifier tout l’univers du jeu.
Ça peut très bien se passer sous la mer, sous la terre, dans l’espace ou dans n’importe quel autre décor que tu imagines.
Le Héros
Créer un nouveau projet
Une fois le logiciel GDevelop ouvert, clique sur « Créer » dans le menu à gauche. Puis sur « Créer un nouveau jeu ». Puis cliques sur « Projet Vide ».
- Sélectionne l’orientation par défaut, choisis : Téléphone en mode Portrait.
- Puis Donne un nom à ton projet
- Et surtout choisis « Votre ordinateur » pour le lieu de stockage !
- Coche la case « Optimiser pour le Pixel Art »
- Ensuite clique sur « Créer un nouveau projet » pour démarrer
Tu peux de suite, si tu veux, choisir une couleur de fond à ton jeu.
Le dessin du Héros
Pour commencer, fais un clic droit, puis clique sur Nouvel objet.
Ensuite, choisis le type d’objet que tu veux créer, un Sprite.
- Clique sur Piskel (c’est l’outil pour dessiner dans GDevelop).
- Choisis une taille de dessin : 128 x 87 pixels
Cette taille est importante car elle permet d’avoir un avion assez petit pour laisser de la place dans le jeu, mais assez visible pour le joueur.
Dessine ton avion. Essaie de faire un avion simple, sans trop de détails, mais surtout sans espaces vides inutiles.
Pourquoi c’est important ?
Parce que plus ton dessin est “plein”, plus les collisions seront précises et logiques.
- Clique sur Sauver et appliquer.
- Place ensuite ton avion dans la scène, sur ton écran de jeu, vers la gauche et au centre.
Donner des capacités à l’avion (comportement)
Maintenant ton avion existe, mais il ne fait rien.
Dans GDevelop, un comportement est un système prêt à l’emploi qui donne des règles à un objet (comme tomber, marcher, sauter…).
- Double-clique sur ton avion.
- Clique sur Ajouter un comportement.
- Choisis : “Personnage se déplaçant sur des plateformes” (Platformer Object)
Pourquoi on utilise ça alors que c’est un avion ?
Même si ce comportement est prévu pour un personnage qui marche et saute, on va l’utiliser intelligemment pour donner une gravité à l’avion.
Donc l’avion va tomber tout seul vers le bas, comme dans Flappy Bird. Si tu lances le jeu maintenant :
- L’avion tombe
- Mais si tu appuies sur Espace, il ne saute pas.
Normal : il n’a pas de sol pour sauter !Mais on va arranger ça avec le code !
Permettre à l’avion de sauter
On va maintenant créer une règle dans la feuille d’événements.
La feuille d’événements, c’est le “cerveau du jeu” : c’est ici qu’on code et qu’on déclenche des actions si les conditions sont remplies.
On va coder la condition : à savoir détecter la chute de l’avion.
Etape 1 : Ajouter un nouvel évènement :
- Avion → est en train de tomber
Etape 2 : Clic sur ajouter une action.
Etape 3 :
- Avion → Permettre de sauter à nouveau.
Normalement, le comportement empêche de sauter en continu.
Mais ici, on dit au jeu : “OK, si l’avion est en train de tomber, autorise un nouveau saut.”
Maintenant, teste ton jeu : Appuie sur Espace = L’avion saute !
Rendre le jeu compatible mobile
On veut que le jeu fonctionne sur téléphone et tablette. Ajoute un nouvel événement :
- Condition :
Souris et écran tactile → Bouton de souris appuyé ou pression tactile → Gauche
- Action :
Avion → Simuler un appui sur la touche de saut
Sur mobile, il n’y a pas de clavier. Donc on ajoute “le clic” et/ou “toucher l’écran”.
Test
- Clique avec la souris → ça marche, c’est top !
- Sur mobile → tap écran → l’avion saute aussi normalement !
Créer les obstacles
Dessine l’obstacle
Maintenant on crée les dangers. On va créer les pics / poteau/tuyaux ou que sais-je !
Pour commencer, fais un clic droit, puis clique sur Nouvel objet.
Ensuite, choisis le type d’objet que tu veux créer, un Sprite
- Dessine un obstacle avec Piskel
- Taille : 200 x 650
Place le pic en haut de la scène
Deuxième l’obstacle
- Place un deuxième pic en bas (Ctrl + D)
- Retourne le deuxième verticalement
Tu viens de créer un passage à travers lequel l’avion doit passer.
Créer une variable “game_over”
Maintenant que tes pics sont placés, on va leur donner du mouvement pour qu’ils arrivent vers l’avion. Mais avant de faire bouger les obstacles, on doit créer une variable qui va nous permettre de savoir si le jeu est terminé (si l’avion est mort) ou non (si l’avion est en vie) .
Une variable, c’est une valeur que le jeu peut stocker et modifier (comme un interrupteur ON/OFF ou un compteur).
- Va dans la feuille d’événements
- Clique sur Ajouter un nouvel evenement.
- Autres conditions
- Cherche : Variables
- Clique sur “Valeur d’une variable”
- Clique sur : Ajouter ou modifier des variables
- Nom :
game_over - Valeur :
0
- 0 = le jeu continue
- 1 = le jeu est terminé
Faire avancer les pics
Maintenant, on va dire au jeu de déplacer les obstacles. Ajoute un action :
Pics → Modifier la position X
→ choisis soustraire
→ valeur : 5
À chaque image du jeu(environ 60 fois par seconde), on enlève 5 à la position X du pic. Donc il se déplace vers la gauche.
Lance le jeu :
- Les obstacles doivent avancer vers l’avion
- Si ça va trop vite ou trop lentement, tu peux changer la valeur (ex : 3 ou 7)
Tu peux dupliquer les deux pics et les disposés à la suite en changeant leurs positions en hauteur.
Faire revenir les obstacles (boucle infinie)
On va créer un point de réapparition pour les Pics.
- Crée un nouvel objet
- Choisis n’importe quel type Sprite.
- Renomme-le : Spawner
Le joueur ne verra jamais cet objet, il sert juste de repère, donc il n’a pas besoin d’être beau.
Place-le à droite de la scène.
Détecter quand un obstacle sort de l’écran
Ajoute un nouvel événement. Ajoute une condition :
- Pics → Position droite de la boîte englobante → inférieur à 0
Ajoute une action :
- Pics → Position X → définir à : Spawner.X
Cela veut dire que le pic est complètement sorti de l’écran à gauche, il revient à droite et recommence son trajet. Ton jeu devient infini !
Ajuster la difficulté
Regarde l’espace entre les deux pics :
- S’il est trop petit → le jeu est impossible
- S’il est trop grand → le jeu est trop facile
Prends le temps de tester plusieurs fois et ajuste la position. Les collisions ne sont pas encore coder, mais tu peux tout de même te rendre compte.
Créer les zones de mort
Maintenant, on va ajouter des zones qui font perdre le joueur.
Créer le sol et le plafond
- Crée un nouvel objet.
- Choisis Mosaïque (Tiled Sprite). Cela permet de répéter une image sans la déformer.
Important : Ton image doit pouvoir se répéter correctement (le bord gauche doit correspondre au bord droit).
Place :
-
- un en haut (plafond)
- un en bas (sol)
Créer le bouton Game Over
Pour commencer, tu dois créer un objet qui apparaîtra quand le joueur perd.
- Clique sur Ajouter un objet
- Clique sur Magasin de ressources
Cette fois, au lieu de dessiner toi-même, on va utiliser une image déjà prête.
Le magasin de ressources, c’est une bibliothèque d’images gratuites intégrées à GDevelop que tu peux utiliser directement dans ton jeu.
- Cherche une image de type : “Game Over”
- Ajoute l’image/bouton à ton projet
Important : Ne place pas cet objet dans la scène maintenant. On va le faire apparaître uniquement quand le joueur perd.
Détecter la collision avec le sol
On va maintenant dire au jeu : “si l’avion touche le sol, la partie est terminée”. Va dans la feuille d’événements.
Ajoute un nouvel événement :
- Avion → collision → sol
Ajoute plusieurs actions :
- Changer la variable game_over = 1. Cela indique que le jeu est terminé.
- Avion > Supprimer. L’avion disparaît après la collision.
- GameOver > Créer un objet définir à Position X : 100 position Y : 560. Cela place le bouton au centre de l’écran (tu peux ajuster selon ta scène)
Test
Lance le jeu et fais toucher le sol à ton avion :
- L’avion disparaît
- Le bouton Game Over apparaît
- Les obstacles s’arrêtent (grâce à
game_over = 1)
Ajouter la collision avec les obstacles
On veut aussi perdre si on touche les pics ! Pour ça :
- Clique droit sur ton événement précédent (tout devant le texte).
- Ctrl + D pour Dupliquer l’évènement dans son intégralité.
- Modifie simplement la condition : remplace sol par pics.
Maintenant, toucher un obstacle déclenche aussi la défaite
Créer le bouton pour recommencer
Maintenant que le bouton apparaît, on va lui donner une action.
Ajoute un nouvel événement Condition :
- GAMEOVER → Bouton de redémarrage cliqué
Ajouter une action :
- Autres actions → scène → changer de scène → choisis ta scène actuelle
Ajouter une deuxième action, à ce même évènement :
- Changer la variable
game_over→ définir à 0
Test et Petit ajustement important
- Tu perds → bouton apparaît
- Tu cliques → le jeu redémarre correctement
Si tu trouves que tu perds trop facilement :
- Clique sur un obstacle
- Ouvre Modifier le masque de collision
- Ajuste les points Cela permet de rendre le jeu plus juste et plus agréable
Bravo !! Ton jeu Zigzag Avion est maintenant terminé et entièrement jouable !
Tu peux déjà t’amuser avec, mais si tu veux aller plus loin, regarde la suite pour ajouter des bonus, comme un score !
Les Bonus
Ajouter un score
On va maintenant ajouter un système de score pour rendre ton jeu plus intéressant.
Comme pour game_over, on va créer une nouvelle variable.
- Va dans la feuille d’événements
- Ajoute une action en dessous de la réaparition des obstacles à droite.
- Choisis Variables → Modifier une variable de la scène
- Clique sur Créer une variable
- Nom :
score - Valeur :
0
Cette variable va compter les points du joueur. Termine de coder l’action : Changer la variable Score > ajouter 0.5.
Pourquoi 0.5 ?
Parce que tu as deux pics (haut et bas), donc le score augmente de 0.5 x 2, donc = 1
Afficher le score à l’écran
Pour voir le score, on doit ajouter du texte.
- Clique sur Ajouter un objet
- Choisis Texte
- Ajoute-le à la scène
Clique sur ton texte et modifie :
- la taille
- la couleur
- le gras
- l’alignement
Maintenant, on va faire en sorte que le texte affiche le score en direct.
- Va dans l’événement :
Variable game_over = 0 (ce même événement où les obstacles bougent)
- Ajoute une action :
Texte → Modifier le texte
Écris : "Score : "+score
Ajouter un objet bonus
Dans cette partie, on va ajouter un bonus dans ton jeu.
Ce bonus va apparaître de temps en temps, et si l’avion le touche, il gagnera plus de points.
Concrètement :
- un objet apparaît toutes les X secondes
- il se déplace comme les obstacles
- si tu le touches → tu gagnes des points bonus
- Clique sur Ajouter un objet
- Choisis Sprite
- Dessine ou importe une image (ex : pièce, étoile…)
- Clique sur Ajouter un comportement
- Choisis :
Projectile avancé
On va utiliser un chronomètre pour faire apparaître le bonus à intervalles réguliers.
Un chronomètre sert à mesurer le temps dans le jeu.
- Nom :
"TEMPS"
- Va dans la feuille d’événements
- Trouve ton événement :
game_over = 0 - Ajoute une action :
Temps et chronomètres → Démarrer (ou réinitialiser) un chronomètre de scène
- Nom :
"TEMPS"
Ce chronomètre va commencer à compter dès que le jeu tourne.
On va maintenant dire :
“Toutes les X secondes, un bonus apparaît”
- Ajoute un nouvel événement
- Condition :
Temps et chronomètres → Valeur du chronomètre de scène
- Nom :
"TEMPS" - Condition : ≥ 2 secondes
(tu pourras changer plus tard en 5 ou 10 secondes selon la difficulté)
On va faire apparaître le bonus au niveau du spawner (donc à droite de l’écran), puis il va se déplacer vers la gauche. Pour ça, ajoute une action :
L’objet Bonus > Créer objet >
- Position X :
Spawner.X() - Position Y :
Spawner.Y()
Ajoute une autre action dans le même événement : Réinitialiser le chronomètre « TEMPS »
Maintenant, on va dire ce qu’il se passe quand le joueur touche le bonus.
- Ajoute un nouvel événement
- Condition :
Avion → collision avec →l'objet bonus
Ajoute deux actions :
- Variable
score→ ajouter 5 - Supprimer objet →
Money_Symbol
