Chute en fusion
Sur cette page, tu trouveras :
Créer les sprites dans Piskel
Le concept du jeu
Créer le bac
Avant même de créer les balles, on va créer la zone de jeu, il faut créer un sol et deux murs invisibles. On va créer des sprites avec piskel.
Crée un objet rectangle nommé « MURS ». Dupliquer l’objet et place l’un en bas, un autre à droite et à gauche, afin de former un bac.
Le comportement des Murs
Ces objets utilisent Physics 2, mais en mode FIXE pour qu’ils ne bougent pas.
Créer chaque balle dans Piskel
Dans notre projet exemple on choisit les couleurs de l’arc-en-ciel, mais tu peux totalement changer le thème :
- Des fruits (cerise → pomme → pastèque…)
- Des animaux (bébé → adulte → géant)
- Des planètes
- Des cristaux
On va utiliser une progression de taille. Exemple avec 6 balles :
- Indigo → 50 px
- Bleu → 64 px
- Vert → 75 px
- Jaune → 114 px
- Orange → 172 px
- Rouge → 260 px
Tu n’es PAS obligé de t’arrêter à 6 balles.
Si tu veux en faire plus (ex: 9 balles), tu peux utiliser une progression :
- 32 px
- 40 px
- 50 px
- 64 px
- 80 px
- 100 px
- 128 px
- 160 px
- 200 px
L’étape la plus importante ici n’est pas le dessin lui-même, mais le respect des marges autour de chaque balle sans ça, les collisions dans GDevelop seront bugguées.
La physique des Balles
La physique est le moteur invisible qui rend le jeu satisfaisant. C’est elle qui fait que les balles tombent, rebondissent un peu, roulent sur les côtés et s’empilent de façon réaliste. GDevelop propose le comportement « Physics 2 » qui gère tout ça automatiquement, il suffit de le configurer correctement.
Ces objets utilisent Physics 2, en mode DYNAMIQUE pour qu’ils bougent. Mais surtout le collider est en forme de Cercle.
Le nuage et la zone de déplacement
Le nuage (qu’on appelle Spawner) est l’objet que le joueur contrôle. Il se déplace horizontalement de gauche à droite de l’écran, et c’est depuis lui que les balles sont lâchées. La chose la plus importante ici, c’est de le contraindre à une zone précise, il ne doit pas pouvoir sortir des limites du bac.
Créer le nuage
- Crée un nouvel objet Sprite et importe ton image de nuage
- Nomme-le « Spawner »
- Place-le en haut de la scène, centré au-dessus du bac
- Ne lui ajoute PAS de comportement Physics 2, il ne doit pas être affecté par la gravité
- On va lui rajouter par contre le comportement « Déplaçable »
Déplacer le nuage avec la souris
On veut que le nuage suive la position horizontale de la souris ou du doigt en temps réel.
Dans l’éditeur d’événements, crée un nouvel événement
- Condition : Spawner > En train d’être déplacé
- Action : Spawner → Position X → Définir à → CursorX()
Sans limitation, le joueur peut déplacer le nuage n’importe où sur l’écran, même en dehors du bac, et lâcher des balles qui tombent dans le vide. On va déjà bloquer les mouvements en haut et en bas, sur l’axe Y. On va le bloquer à une position fixe. Dans notre exemple c’est à 30, mais pour toi c’est possiblement à une toute autre hauteur.
Bloquer le nuage dans la zone du bac
Maintenant que notre nuage ne bouge que seulement sur l’axe X. Il faut donc définir une zone minimale et maximale pour la position X du nuage. Imaginons que ton bac s’étende de X = 120 jusqu’à X = 600. Le nuage doit rester entre ces deux valeurs.
Note : Les valeurs 120 et 600 sont des exemples. Remplace-les par les coordonnées exactes des bords intérieurs de ton bac. Tu peux les trouver en plaçant un objet test dans la scène et en lisant sa position X dans l’éditeur. Voici comment faire :
- Dans l’éditeur d’événements, crée un événement Condition : Nuage → Position X → inférieur ou égale à 120.
- Ajoute l’action : Changer la position X de Spawner → Définir à → 110
Attention : Attention : la limitation doit concerner le centre du nuage (son origine).- Dans l’éditeur d’événements, crée un événement Condition : Nuage → Position X → supérieur ou égale à 600.
- Ajoute l’action : Changer la position X de Spawner → Définir à → 590
C’est la même logique pour l’autre côté, à adapter selon votre projet.
Et voilà notre Nuage se déplace correctement. On va pouvoir lui faire lâcher des balles.
La preview et lâcher les balles
Maintenant qu’on a un nuage qui se déplace correctement dans sa zone, il faut gérer la logique de tir : quelle balle va être lâchée, comment l’afficher à l’avance au joueur, et comment la créer au bon endroit au bon moment.
Afficher la preview
- Crée un objet Sprite nommé « PreviewSprite »
- Ce sprite contient plusieurs animations :
- animation 1 = Indigo
- animation 2 = Bleu
- animation 3 = Vert
Maintenant on va faire en sorte que ce Sprite « PreviewSprite » se déplace avec le nuage pour être toujours visible.
- Condition : La scène « Nom de la scène » existe
- Action : Changer la position « PreviewSprite » → Position :
- définir à Position X : Spawner.CenterX()-20
- définir à Position Y : Spawner.CenterX()+ 40
La variable ProchaineCouleur
Au début de la partie, on tire au sort la prochaine balle à afficher et on va la monter. Nouvel évènement :
- Condition : Au lancement de la scène
- Action : Changer le numéro d’animation de « PreviewSprite » → définir à →« Aleatoire »
Puis à chaque fois qu’une balle est lâchée, on tire au sort la prochaine balle à afficher. Nouvel évènement :
- Condition : « Spawer » vient d’être lâcher
- Action 1 : Changer la variable « ProchaineCouleur » → définir à →Aleatoire
- Action 2 : Changer la variable « Aleatoire » → définir à →RandomInRange(0, 2)
- Action 3 : Changer le numéro d’animation de PreviewSprite » → définir à →« Aleatoire »
Notre système fonctionne, à chaque relachement de la souris, le sprite PreviewSprite présente un nouvelle balle !
Lâcher la bonne balle au clic
- Condition : Le bouton gauche de la souris vient d’être relâché
- Sous-condition : ProchaineCouleur = 0
- Action : Créer Indigo1 à X=Spawner.CenterX()-20, Y=Spawner.CenterY()+40
- Sous-condition : ProchaineCouleur = 1
- Action : Créer Bleu à X=Spawner.CenterX()-20, Y=Spawner.CenterY()+40
- Sous-condition : ProchaineCouleur = 2
- Action : Créer Vert à X=Spawner.CenterX()-20, Y=Spawner.CenterY()+40
La fusion
La fusion est déclenchée quand deux balles identiques se touchent. C’est le cœur mécanique du jeu.
La fusion entre deux balles
- Condition : Indigo est en collision avec Indigo
- Action 1 : Créer Bleu à X = Indigo.X(), Y = Indigo.Y()
La collision avec deux balles indigo créer bien une nouvelle balles Bleu ! Il ne reste plus qu’à supprimer les deux balles Indigo.
- Action 2 : Supprimer Indigo1 (les deux instances sélectionnées par la collision)
La fusion des deux balles Indigo créer bien une nouvelle balle bleu, en supprimant les balles qui ont servit à la fusion. Il ne reste plus qu’à faire de même avec les autres balles.
Le game over
On crée une zone invisible en haut du bac. Si une balle la touche (et qu’elle n’est pas le PreviewSprite), la partie est terminée.
La variable
Le
Crée un objet Sprite. Va dans « Magaisin de ressources » et tape « GameOver » Choisis le Game Over de ton choix.
Et intègre le à la scène.
Place le au milieu de la scène
Ajouter le comportement « Etat de bouton » à ce sprite
On va coder cet nouvel objet pour qu’il relance le jeu quand on clique dessus.
- Condition : « GameoverDialogue » est préssé
On va coder cet nouvel objet pour qu’il relance le jeu quand on clique dessus.
- Condition : « GameoverDialogue » est préssé
- Action 1 : Autre actions > Variables > Changer la valeur de la variable > « GameOver » définir à 0
- Action 2 : Autre actions > Scène > Changer la scène > Choisir une scène : « Nom de la scène de jeu »
Notre bouton relance bien la scène c’est parfait ! A présent, on va créer un nouvel évènement pour dire que si « GameOver » = 0 ne pas afficher l’image de Game Over et réactiver le déplacement du nuage (oui on va bloquer son déplacement plus tard)
- Condition : Autre actions > Variables > Changer la valeur de la variable > « GameOver » = 0
- Action 1 : l’objet sprite « GAME OVER » CACHER
- Action 2 : l’objet sprite « GAME OVER » désactiver le comportement « BoutonFSM »
- Action 3 : l’objet sprite « NUAGE » activer le comportement « Déplaçable »
Copie coller et adapte le code quand la variable passe à 1. Ceux sont les mêmes actions qui se produisent quand on perd, mais à l’inverse ! A savoir le bouton GameOver apparait et on ne peut plus bouger le nuage.
Rajoute juste la fait que le sprite GameOver se place au premier plan, devant tous les objets !
La zone de danger
Crée un objet rectangle nommé « ZoneDanger » et place-le juste au-dessus du bac et du nuage.
Tu peux la rendre un peu transparente. (Et si tu fais un clic droit dessus tu peux l’envoyer en arrière plan)
Attention il ne faut surtout qu’il touche le sprite PreviewSprite qui génère les balles, sinon tu perdra de suite.
Code pour déclencher le Game Over
- Condition : Indigo est en collision avec ZoneDanger
- Action : GameOver = 1
Répète cette condition pour chaque type de balle (Bleu, Vert, etc.)
Répète cette condition pour chaque type de balle (Bleu, Vert, etc.)
Ton projet est maintenant fonctionnel !!! Bravo !!
Tu peux maintenant ajouter un peu de “juice” (du fun et des effets) pour rendre le jeu plus agréable et satisfaisant.
Voici quelques idées de bonus à ajouter en dessous.
Bonus
Améliorer la présentation de ton jeu
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 un texte explicatif
Même si ton jeu est logique pour toi, ce ne sera pas forcément le cas pour quelqu’un qui découvre. Il faut donc ajouter un petit texte pour expliquer les règles.
Tu peux créer un objet texte dans GDevelop et écrire quelque chose de simple comme :
- BUT : Crée les plus grosses possibles
- COMMENT: Fusionne les balles de même couleur. En déplace le nuage avec le souris ou le doigt. Relâche pour faire tomber une balle au bon endroit.
- PERDU : Ne dépasse pas la limite
Place ce texte sur le côté du bac.
Le but n’est pas de faire un long paragraphe, mais de guider rapidement le joueur. Sans ça, il risque de ne pas comprendre le principe de fusion.
Ajouter un visuel de progression
Une très bonne idée est de montrer directement au joueur comment les balles évoluent. Tu peux afficher une ligne avec toutes tes balles, de la plus petite à la plus grande. Par exemple : indigo → bleu → vert → jaune → orange → rouge
Tu peux simplement aligner les sprites dans un coin de l’écran et ajouter des flèches entre eux. Cela permet au joueur de comprendre visuellement l’objectif du jeu sans même lire les règles. C’est très puissant, car le cerveau comprend plus vite une image qu’un texte.
Ajouter un système de score
Tu peux maintenant ajouter un système de score pour rendre ton jeu plus motivant. L’idée est simple : à chaque fois que deux balles fusionnent, le joueur gagne des points, et plus la balle obtenue est grosse, plus le score est élevé.
Commence par créer une variable de scène appelée Score et initialise-la à 0. Ensuite, dans tes événements de fusion (au moment où tu supprimes les deux balles et crées la nouvelle), ajoute des points : par exemple +10 au début, puis augmente progressivement (+20, +40, +80, etc.). Cela permet de récompenser les grosses fusions, qui sont plus difficiles à obtenir.
Tu peux aller voir cette ressources, qui te seras utile, en cliquant sur le lien suivant : les variables