Tir Parfait - GDevelop
Le concept du jeu
Dans ce jeu, tu dois lancer un oiseau pour faire tomber des cochons.
Tu as aussi un nombre limité d’essais.
Jouer sur téléphone avec le QR code :
- Scanne le code avec ton téléphone.
- Clique d’abord sur le bouton plein écran en bas du jeu.
- Puis tourne ton téléphone en mode paysage.
Jouer sur téléphone avec le QR code :
- Scanne le code avec ton téléphone.
- Clique d’abord sur le bouton plein écran en bas du jeu.
- Puis tourne ton téléphone en mode paysage.
Thème
Dans cet exemple, le joueur propulse un projectile depuis une catapulte pour atteindre une cible, à la manière d’Angry Birds.
Tu peux bien sûr reprendre l’idée d’un oiseau lancé… mais ce n’est qu’un point de départ.
Tu es libre de personnaliser entièrement l’univers du jeu :
- remplacer l’oiseau par n’importe quel objet ou personnage,
- changer l’apparence des projectiles,
- modifier les décors, les ennemis ou les obstacles,
- inventer ton propre thème (fantasy, espace, nourriture, monstres, etc.).
Le principe du jeu reste le même : viser, lancer, détruire. C’est ensuite à toi de créer un univers original autour de cette mécanique.
Créer les éléments du jeu
Créer le héros
On va créer le personnage principal. Ajoute un objet de type Sprite. Tu peux dessiner ton oiseau dans Piskel.
Tu peux changer la taille pour lui donner un taille plus grande, par exemple : 50px
Fais attention à ne pas laisser d’espace vide autour du dessin, sinon les collisions fonctionneront mal.
Renomme cet objet : OISEAU ou HEROS
Ensuite, ajoute le comportement Physics 2D.
Choisis le type Dynamique pour qu’il puisse bouger.
Choisis une forme cercle pour qu’il roule correctement.
Ensuite, ajoute le comportement Camera Fluide.
Important : Ne place pas l’oiseau dans la scène c’est le code qui le fera venir !
Créer le sol
Le sol sert à détecter quand le joueur rate son tir et que le l’oiseau touche le sol, alors la scène recommencera.
Ajoute un sprite en forme de rectangle.
Renomme-le : SOL.
Ajoute le comportement Physics 2D, avec le type Fixe et une forme rectangle.
Place-le en bas de la scène. Mais également duplique le pour en positionner un à gauche, à droite et en haut, car si on tir trop vers le haut et qu’on ne touche pas le SOL, le HERO ne pourra pas mourir et revenir à son point de départ.
Place le tout au tour mais en étant en dehors de la zone du cadre qui sera visible par le joueur en jeu.
Créer le canon
On va maintenant créer un canon qui s’orientera dans la direction du tir. Il va pivoter sur lui-même, donc ne dessine pas son pied : celui-ci restera fixe et sera créé dans une image séparée juste après.
Le canon n’a besoin d’aucun comportement particulier. Une fois créé, place-le simplement dans la scène, légèrement au-dessus du sol.
Test ton jeu pour voir si il est bien placé dans la scène et à une bonne taille.
Important : Fais bien en sorte que ton canon soit orienter vers la droite !
En jeu :
Créer le support du canon
On va pouvoir dessiner le pied du canon et le placer sous le canon. C’est totalement optionnel de dessiner le support, ça ne rjoute rien mise à part de la cohérence visuelle.
Créer les caisses
et cherche “box”. Et choisis une caisse simple en 2D vue de côté. Et clic sur ajouter à la scène.
Clique sur l’objet et ouvre le via Piskel.
Si l’image est mal cadrée, redimensionne là, il ne faut pas d’espace autour de l’objet.
Ajoute le comportement Physics 2D,avec le type Dynamique à la caisse.
Créer les cochons
Les cochons sont les cibles à faire tomber.
Ajoute un sprite et dessine un cochon ou importe une image.
Renomme-le : COCHON.
Ajoute le comportement Physics 2D, avec le type Dynamique et une forme cercle.
Cela permettra au cochon de rouler et de tomber.
Placer les éléments
Place tous les objets dans ta scène :
- les caisses,
- les cochons.
Tu vas créer plusieurs niveaux, qui deviendront progressivement plus difficiles.
Pour commencer, fais un niveau simple : il servira aussi de test pour vérifier que tout fonctionne bien.
Important : place seulement 3 cochons par niveau, sauf si tu adaptes le code.
Ajouter une barre de puissance du Tir
Cette barre va se remplir plus on charge notre tir, pour pouvoir donner une estimation au joueur de la puissance de l’envoi !
Ensuite, ajoute le comportement Camera Fluide.
Ainsi la caméra va se reposition au niveau de la barre de puissance si l’oiseau n’est pas en jeu.
En fonction de son positionnement dans la scène change la position en Xet/ou Y. Test en lançant ton jeu et en ajustant la caméra pour qu’on voit bien au moins le canon et le sol.
Ajouter un décor
Pense aussi à ajouter un arrière-plan pour donner une vraie ambiance à ton jeu.
Tu peux :
- utiliser une image trouvée sur internet,
- dessiner ton propre décor sur Piskel,
- ou aller chercher une image dans le Magasin de ressources de GDevelop.
Dans le Magasin de ressources, tu peux simplement taper “background” dans la barre de recherche pour trouver rapidement un décor à ajouter.
Pour placer un élément devant ou derrière un autre, clic droit sur l’objet :
- Mettre au premier plan
- Mettre à l’arrière-plan
Au choix :
- Plus facile et Rapide : Tu peux maintenant utiliser l’image directement comme un sprite, mais le rendu risque de ne pas être très joli. Si cela te suffit, c’est très bien !
- Plus long et plus complexe : Sinon, tu peux suivre les étapes suivantes pour obtenir un meilleur résultat, mais c’est un peu plus long et compliqué.
Le mieux est de créer un nouvel objet de type Mosaïque. Donne-lui une taille un peu plus petite que l’image originale (par exemple passer de 1024 à 1220).
Ensuite :
- Clique sur Ajouter une image
- Choisis Depuis les ressources du projet
- Sélectionne ton image
Ouvre ensuite Piskel :
- Prends l’outil Pipette
- Clique dans le ciel, tout en haut de l’image
- Récupère le code de la couleur, car on en aura besoin après
Applique ensuite la mosaïque et étire-la pour remplir la scène.
Fais un clic droit dessus puis Mettre en arrière-plan.
Enfin, va dans la couleur d’arrière-plan de la scène et colle le code couleur récupéré avec la pipette.
Tir du canon et lancement de l’oiseau
Créer les variables qui vont servir au tir
Avant de pouvoir tirer, on doit créer deux variables.
Ces variables vont permettre au jeu de savoir :
- si le joueur peut encore jouer
- à quelle puissance le projectile doit être lancé
Sans ces variables, le canon ne saurait ni quand tirer, ni avec quelle force.
La première variable s’appelle ESSAIS.
Elle sert à compter combien de tirs il reste au joueur. À chaque fois que le joueur tire et rate, on enlève 1. Quand cette variable arrive à 0, le joueur ne peut plus tirer. C’est ce qui permet de limiter le nombre de tentatives.
La deuxième variable s’appelle VELOCITY.
Elle sert à stocker la puissance du tir. Quand le joueur garde le doigt appuyé, cette variable monte petit à petit. Quand il relâche, cette valeur est utilisée pour lancer le projectile. Plus VELOCITY est grande, plus le projectile part loin.
Faire tourner le canon
Maintenant qu’on a les variables, on peut commencer à coder le système de tir.
La première partie du code sert à viser. Quand le joueur garde le doigt appuyé, le canon se tourne vers la souris (ou le doigt). Cela permet de choisir la direction du tir.
En même temps, la variable VELOCITY augmente petit à petit. Cela simule une charge de puissance. Plus le joueur garde appuyé longtemps, plus le tir sera fort.
Comme condition, choisis : ESSAIS > 0
Première action :
- Cannon > Tourner vers une position (vers le curseur de la souris) ) une vitesse de 0.
Deuxième action :
- Barre de Progression > Valeur > définir à la variable « VELOCITY » diviser par 10. Car en réalité la valeur de vélocity tournera en moyenne entre 50 et 150. Et vu que la barre ne comprend les valeur qu’entre 0 et 100. On divise la valeur à donner à la barre.
Charger le tir
Cette condition vérifie si le joueur garde le doigt appuyé. Tant qu’il appuie, le jeu comprend qu’il est en train de charger son tir.
Le projectile ne part pas encore : on prépare seulement la puissance.
Créer un nouvel évènement :
Autres Conditions > Bouton de souris appuyé ou pression tactile > Gauche.
Cette action augmente la puissance du tir.
Tant que le joueur garde le doigt appuyé, la variable VELOCITY monte.
Plus elle monte, plus le projectile partira loin quand il sera lancé.
Le Tir !
Quand le joueur relâche le doigt, le projectile est créé au bout du canon puis lancé dans la direction visée.
Le jeu utilise la valeur de VELOCITY pour choisir la force du tir. Plus la puissance était chargée, plus le projectile part loin.Une fois le tir lancé, VELOCITY revient à 0 pour préparer le prochain tir.
Créer un nouvel évènement :
Autres Conditions > Bouton de souris relâché > Gauche.
Et on rajouter une autre condition sous la première, car on ne veut pas que le canon lance plusieurs oiseau à la fois.
On va créer l’action de l’arriver de l’oiseau au déclenchement du tir, au centre du canon. Première Action :
- OISEAU > Créer un objet > canon.CenterX() / canon.CenterY()
On va créer une deuxième Action. On va donner une force à l’oiseau pour pouvoir l’éjecter. Cette force dépendra de la charge accumulée pendant le temps où le joueur reste appuyé, stockée dans notre variable Velocity.
La direction du tir dépend de la position du curseur de la souris (ou du doigt sur téléphone). Le point d’application de la force doit être placé au centre de l’oiseau lui-même (Le point d’application correspond à l’endroit exact où la force est appliquée sur l’objet).
Puis on remet la variable VELOCITY à zéro pour pouvoir charger correctement un prochain tir.
Gérer les essais
Dans cette partie, on va ajouter les règles qui permettent au jeu de savoir si le joueur réussit ou rate son tir. Cette étape est importante, car elle permet de donner une vraie règle au jeu : le joueur ne peut pas tirer à l’infini, il doit réussir avec un nombre limité d’essais.
Le but est simple : si l’oiseau touche le sol ou une caisse, le tir est considéré comme raté.
Dans ce cas, on enlève un essai au joueur.
Si l’oiseau touche le sol
- OISEAU est en collision avec SOL
Actions :
- supprimer OISEAU
- enlever 1 à ESSAIS
Ça veut dire : si l’oiseau tombe au sol, le tir est raté.
Si l’oiseau touche une caisse
- OISEAU est en collision avec CAISSE
Actions :
- supprimer OISEAU
- enlever 1 à ESSAIS
Ça veut dire : si l’oiseau tombe au sol, le tir est raté.
Réinitialiser la variable ESSAIS
- Au lancement de la scène
Actions :
- mettre ESSAIS à 10 (tu peux mettre la valeur que tu souhaites évidemment)
Ça sert à remettre le compteur au début du niveau.
Afficher les infos à l’écran
Maintenant que la variable ESSAIS existe, on va l’afficher directement dans le jeu. Le but est simple : permettre au joueur de voir combien de tirs il lui reste pendant la partie. Pour cela, on va demander au jeu de mettre à jour le texte en permanence avec la valeur de la variable.
Il servira à afficher le nombre d’essais restants.
Ajoute donc 1 objet de type Texte, puis renomme-les clairement, par exemple :
- Text_NOMBRE_ESSAIS
Tu peux ensuite modifier leur taille, leur police ou leur couleur dans les options pour qu’ils soient bien lisibles à l’écran.
Place-le ensuite dans la scène, en haut de l’écran par exemple, pour que le joueur puisse toujours voir ces informations pendant qu’il joue.
On va pouvoir coder le changement de texte à l’écran. Pour ça créer un nouvel évènement.
On vérifie ici la valeur de la variable ESSAIS. Cela permet au jeu de savoir combien d’essais il reste au joueur. Tant que cette valeur est supérieure ou égale à 0, le jeu peut continuer à afficher le compteur correctement.
Le jeu remplace le contenu du texte par :
Nombre d’essais : suivi de la valeur actuelle de ESSAIS.
Cela permet au joueur de voir le compteur se mettre à jour en direct après chaque tir raté.
Condition :
- La variable « ESSAIS » est supérieure ou égale 0
Actions :
- Text_Nombre_essais > Text >définir à : « Nombre d’essais : » + ESSAIS
Game Over
Créer un écran de défaite
Maintenant que le joueur a un nombre limité d’essais, on va ajouter une condition de défaite.
Le but est simple : si le joueur n’a plus d’essais, la partie s’arrête et il est envoyé vers un écran de fin.
Avant de coder, il faut créer une nouvelle scène.
Cette scène servira d’écran de fin quand le joueur perd.
Pour la créer, va dans la liste des scènes de ton projet.
- Tu peux en profiter pour renommer ta scène de jeu en « Niveau 1″
- Puis clique sur le bouton pour ajouter une nouvelle scène.
- Renomme cette scène : « PERDU »
Tu peux ensuite y ajouter un fond, un texte comme “Perdu” ou et un bouton pour rejouer.
Créer un bouton
Change le non dans la partie Label que tu veux voir apparaitre à l’écran.
Coder la défaite et le retour au jeu
Dans la scène niveau 1 :
Dans cette scène, on va vérifier si le joueur a encore des essais.
Le but est simple : dès que le joueur n’a plus d’essais, la partie s’arrête.
Il faut donc créer un événement qui :
- vérifie si ESSAIS < 0
- change de scène
- envoie le joueur vers la scène PERDU
Cela permet de détecter la défaite automatiquement.
Dans la scène PERDU :
Dans cette scène, on va permettre au joueur de recommencer.
Ajoute un bouton dans la scène PERDU.
Ce bouton servira à relancer la partie.
Ensuite, dans la feuille d’événements de PERDU, crée un événement qui :
- détecte le clic sur le bouton
- change de scène
- renvoie vers niveau 1
Cela permet au joueur de rejouer après avoir perdu.
Faire gagner des points avec les cochons
On va maintenant faire en sorte que les cochons rapportent des points quand ils tombent au sol.
Ajouter un texte pour le score
Commence par créer un nouvel objet Texte.
Ce texte servira à afficher le nombre de cochons tombés.
Renomme-le par exemple : Text_OBJETS_TOMBES
Place-le dans la scène, à un endroit visible pour le joueur.
Créer une variable
Va dans les variables globales et crée une nouvelle variable.
- Nom de la variable : OBJETS
- Valeur de départ : 0
Cette variable va compter le nombre de cochons tombés au sol.
Ajouter des points quand un cochon touche le sol
Dans la feuille d’événements du niveau 1, crée un nouvel événement.
Condition :
- COCHON est en collision avec SOL
Actions :
- supprimer COCHON
- ajouter 1 à la variable OBJETS
Cela veut dire : quand un cochon tombe au sol, il disparaît et le score augmente.
Afficher le nombre de cochons tombés
Ajoute ou complète l’événement qui met à jour les textes à l’écran.
Action :
- Changer le texte de Text_OBJETS_TOMBES en : « Cochons tombés : » + OBJETS
Comme ça, le joueur voit le nombre de cochons tombés pendant la partie.
Remettre le compteur à zéro au début
Dans l’événement Au lancement de la scène, ajoute :
- définir OBJETS à 0
Cela permet de recommencer proprement si la scène est relancée.
Créer le niveau 2
Pour passer au niveau suivant, crée une nouvelle scène.
Le plus simple est de dupliquer le niveau 1 :
- Va dans la liste des scènes
- Clique sur les trois petits points du niveau 1
- Clique sur Dupliquer
- Renomme la nouvelle scène : niveau 2
Tu peux ensuite modifier les obstacles, les caisses ou les cochons pour créer un nouveau niveau.
Dans la feuille d’événements du niveau 1, crée un nouvel événement.
Condition :
- OBJETS = 3
Action :
- Aller à la scène niveau 2
Cela veut dire : quand 3 cochons sont tombés au sol, le joueur passe automatiquement au niveau suivant.
Et voilà Bravo !!! Il ne teste plus qu’à réer des niveau supplémentaires différents et de plus en plus dur !
Bonus : Créer un menu de sélection des niveaux
Créer une scène menu
En bonus, on peut créer un menu d’accueil avec un bouton pour chaque niveau.
Crée une nouvelle scène et renomme-la : MENU
Dans cette scène, ajoute :
- un titre
Ajouter un titre avec Textcraft
Pour donner une identité à ton jeu, tu peux créer un titre stylisé.
Pour ça, tu peux utiliser : https://textcraft.net/
Tu vas simplement :
- écrire le nom de ton jeu
- choisir un style (pixel, contour, ombre…)
- Clic sur CREATE
- télécharger l’image en cliquant sur DOWNLOAD
- l’importer dans GDevelop comme un sprite
Ensuite, tu places ce titre en haut de ton écran.
Ajouter les boutons des niveaux
Rajoute l’objet bouton et place le dans la scène Perdu.
Change le non dans la partie Label que tu veux voir apparaitre à l’écran.
Duplique le bouton depuis les objets de scène, en cliquant sur les 3 petits points.
Change le label de chaque bouton et place les dans la scène.
Fais en sorte que ton jeu s’ouvre sur la scène Menu. En cliquant sur les 3 petits points de la scène Menu et cliquer sur « Définir comme scène de départ »
Coder les boutons du menu
Dans la feuille d’événements du MENU, ajoute :
Si le joueur clique sur Bouton_Niveau_1
→ aller à la scène niveau 1
Si le joueur clique sur Bouton_Niveau_2
→ aller à la scène niveau 2
Revenir au menu après une défaite
- Si bouton est cliqué
- → aller à la scène MENU
Bonus : Créer un Scène Victoire
On peut aussi créer une scène VICTOIRE pour afficher un écran de fin quand le joueur termine le jeu.
Le principe est le même que pour l’écran de défaite.
Il suffit de créer une nouvelle scène, de la renommer VICTOIRE, puis d’y ajouter un fond, un texte comme “Bravo !” ou “Tu as terminé le jeu !”, ainsi qu’un bouton pour revenir au menu.
Ensuite, dans la feuille d’événements du dernier niveau (par exemple niveau 3), il suffit d’ajouter une condition :
si OBJETS = 3
→ aller à la scène VICTOIRE
Cela permet de terminer le jeu proprement après le dernier niveau.
Bravo ! Ton jeu est terminé ! Mais tu peux encore rajouter des niveaux supplémentaires !!