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 ajoute 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 !!