GDevelop – ZigZag Avion

ZigZag Avion - GDevelop

Sur cette page, tu trouveras :

Le concept du jeu
Le Héros
Créer les obstacles
Créer les zones de mort
Bonus

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)

Pour que le jeu ne s’arrête jamais, on va faire réapparaître les obstacles à droite quand ils sortent de l’écran à gauche.

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

Créer l’objet 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

EXPÉRIMENTER PARTAGER RAISONNER INVENTER S'AMUSER

ZigZag Avion - GDevelop

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 :

Le Héros

Créer un nouveau projet

Le dessin du Héros

Pour commencer, fais un clic droit, puis clique sur Nouvel objet.

Donner des capacités à l’avion (comportement)

Permettre à l’avion de sauter

On va coder la condition : à savoir détecter la chute de l’avion.

Etape 1 : Ajouter un nouvel évènement :

Etape 2 : Clic sur ajouter une action.

Etape 3 :

Maintenant, teste ton jeu : Appuie sur Espace = L’avion saute !

Rendre le jeu compatible mobile

Test

Créer les obstacles

Dessine l’obstacle

Pour commencer, fais un clic droit, puis clique sur Nouvel objet.

Place le pic en haut de la scène

Deuxième l’obstacle

Créer une variable “game_over”

Faire avancer les pics

À 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.

Faire revenir les obstacles (boucle infinie)

On va créer un point de réapparition pour les Pics.

Détecter quand un obstacle sort de l’écran

Ajoute une action :

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 :

Créer les zones de mort

Créer le sol et le plafond

Place :

Créer le bouton Game Over

Détecter la collision avec le sol

Ajoute un nouvel événement :

Ajoute plusieurs actions :

Test

Ajouter la collision avec les obstacles

Créer le bouton pour recommencer

Les Bonus