Faire un jeu avec le Godot Engine



Orga




Le jeu



Le dépôt git : https://gogs.jovian-hersemeule.eu/DricomDragon/RaquetteFracassante

Le guide



Introduction



Principe de l'atelier



Attention aux briques qui nécessitent d'être frappées plusieurs fois !

Le projet sera disponible en deux versions permettant aux personnes présentes lors de l'atelier d'orienter leur découverte du Godot Engine :

Image : carte des dépendances

Note : Afin que le chacun et chacune puisse ici s'y retrouver, nous présenteront les fonctionnalités par domaine et par niveau de difficulté. Ainsi même les débutants vont pouvoir ajouter des fonctionnalités qui les intéressent à notre casse-brique minimaliste.

Décommenter le code


Il y aura du code déjà présent à décommenter dans les scripts. Essayez de comprendre chaque bout de code vous-même.

Les commentaires en Godot commencent avec #. Raccourci pour décommenter les lignes selectionnées : Ctrl + K.

Note : les commentaires doubles ## sont des commentaires spéciaux dits de documentation (docstrings). Il ne faut pas les décommenter ! Le texte associé est visible dans l'éditeur.

Description de Godot





Éditeur Godot



Concepts Godot



Mécanique idéale pour faire communiquer des nœuds entre eux. Les signaux permettent d'envoyer des messages à zéro, un ou plusieurs destinataires en même temps. À chaque émission de signal correspond l'exécution d'une fonction pour tous les nœuds connectés à ce signal. Les nœuds de la bibliothèque offrent des signaux et des fonctions déjà utilisables, et il est possible d'en créer dans nos scripts.


Étapes



Lancer le jeu depuis l'éditeur



La fenêtre de gestion des projets s'ouvre (importation, création de nouveau projet, lancement de l'éditeur, etc).
L'éditeur s'ouvre automatiquement, sinon sélectionner le projet dans la liste et cliquer sur "Éditer".
Une nouvelle fenêtre s'ouvre et le jeu démarre.

Lorsqu'on démarre le jeu (via l'éditeur ou un exécutable), ce qui est démarrer est une scène dites "principale", définie dans l'éditeur. Et c'est de cette scène que vont ensuite être démarrer toutes les autres scènes qui composent le jeu.

Note : L'ensemble de ses fichiers et dossiers doivent être édité dans le l'éditeur de Godot et non directement via le navigateur de fichiers

Graphisme



En bleu sur la carte.

Changer l'image de la raquette


Niv. 1

La raquette est un composant on va donc trouver la scène qui lui est dédié dans le dossier "composants/objets/raquette".
La scène est le fichier ".tscn" dans le dossier.


La scène de la raquette est composée de 3 nœuds :
- Un nœud StaticBody2D,
- Un nœud Sprite2D,
- Un nœud CollisionShape2D.
C'est le nœud Sprite2D, dénommé "image", qui va permettre l'affichage de l'image de la raquette.


Dans l'Inspecteur, on peut voir le champs "Texture". C'est le contenu de ce champ qu'il faut modifier pour changer l'image de la raquette dans le jeu.

Avant de changer l'image, il ne faut pas oublier de mettre votre nouvelle image en .png dans le dossier "composants/objets/raquette".


Changer la couleur de la raquette


Niv. 1

La raquette est un composant on va donc trouver la scène qui lui est dédié dans le dossier "composants/objets/raquette".
La scène est le fichier ".tscn" dans le dossier.


La scène de la raquette est composée de 3 nœuds :
- Un nœud StaticBody2D,
- Un nœud Sprite2D,
- Un nœud CollisionShape2D.
C'est le nœud Sprite2D, dénommé "image", qui va permettre de changer la couleur de la raquette.


Dans l'Inspecteur, dans la section "Visibility", on peut voir le champs "Self-Modulate". C'est le contenu de ce champ qu'il faut modifier pour changer l'image de la raquette dans le jeu.


Note : vous pouvez aussi changer la valeur du champ "Modulate" du noeud racine `StaticBody2D`, ce qui change la couleur de tous les enfants, y compris l'image.

Changer la couleur de la brique en fonction de sa vie


Niv. 2

Il y a déjà un dégradé de noir grâce à l'étape précédente.

Alternatif : Essayer de modifier la fonction "_montrer_nombre_vies" le script "brique.gd" de la scène "brique.tscn" pour faire un dégradé vers le rouge à la place.


Note : Le script a comme première instruction @tool : cela signifie qu'il s'exécute aussi dans l'éditeur. Cela permet de voir le changement de couleur aussi dans l'éditeur lorsque vous fabriquez un niveau.

Faire une trainée à la balle


Niv. 3


Note : GPU signifie Graphical Process Unit, cela signifie que les particules sont calculées avec le processeur graphique. Il est préférable de l'utiliser car plus performant ; cependant ça ne marche pas sur toutes les machines. Auquel cas, on utilisera CPUParticles2D (https://docs.godotengine.org/fr/4.x/classes/class_cpuparticles2d.html#class-cpuparticles2d).

Effet impact d'une balle


Niv. 3


Effet de flamme


Niv. 3

 
Note pour améliorer la performance : stocker la référence vers le nœud dans une variable pour éviter de demander à Godot de chercher le nœud à chaque fois.
@onready image : Sprite2D = $Image

Effet électrique


Niv. 4


Effet de récupération de pouvoir


Niv. 4


UI



Interface utilisateur.

Créer un menu d'accueil


Sera déjà fait, comme le menu pause.

Afficher le compteur de balles


Niv. 2


Note Si le label renvoie une erreur : "Cannot convert argument 1 from int to String.", cela veut juste dire qu'il faut convertir la valeur de "nombre_de_balles" en String avant d'émettre le signal


Afficher une jauge de balles


Niv. 4 : naviguer la doc et expérimenter

Remplacer le label par une jauge, dont le nombre de points représente le nombre de balles.


Afficher un écran de game over


Niv. 1


Afficher un écran de victoire


Niv. 3 : beaucoup d'étapes


Note : comme les balles créées par le lanceur sont des nœuds enfants, détruire le lanceur détruit aussi toutes les balles.

Compter et afficher le score


Niv. 4 : le·a participant·e se débrouille

Pouvoir scroller les planètes


Niv. 1


Mécanique de pseudo


Niv. 4 : le·a participant·e se débrouille

Idem leaderboard, afficher pseudo en jeu.

Sons



Bruitages et musique.

Insérer une musique dans un niveau


Niv. 1

Les AudioStreamPlayer sont les nœuds permettant de jouer des sons, on peut les intégrer dans tout types de scènes et les manipuler avec des fonctions simples comme play() ou stop() par exemple. Il existe 3 AudioStreamPlayer, le simple (stéréo), l'AudioStreamPlayer2D (qui gère l'audio positionnel en 2 dimensions) et l'AudioStreamPlayer3D (audio positionnel en 3 dimensions).








Faire un bruit à l'impact d'une balle


Niv 1


Faire un bruit au clic sur bouton début


Niv. 2



Faire un bruit au game over


Niv. 1



Bruit lorsqu'un pouvoir est récupéré


Niv. 1



Effet audio dynamique : diminuer l'importance de la musique quand un effet sonore joue


Niv. 2

Les bus audio sont des "tubes virtuels" dans lesquels on fait passer les flux audio. Ils sont visibles dans l'onglet "Audio" du panneau inférieur de l'éditeur. Par défaut il n'existe qu'un bus dit "Master" à l'intérieur duquel le son circule de haut en bas, passant du contrôleur de volume, aux effets éventuels pour finir par sortir via vos hauts-parleurs. De nouveaux bus peuvent être ajoutés facilement pour contenir les musiques, les effets sonores, les voix, etc et leur appliquer des traitements dédiés.

Le compresseur est un effet audio complexe a utilisé qui sert à établir un plancher au-dela duquel le volume sonore du son augmentera moins ou plus du tout. Cela va permettre ici de faire perdre en définition la musique quand les effets sonores sont joués afin que le joueur/la joueuse dispose toujours des informations audio nécessaires pour jouer dans de bonnes conditions et que la musique ne couvre jamais les effets sonores.

En l'état le compresseur s'active et agit quand le contenu du bus "Musique" voit son volume passer au-dessus du "Treshold". Il faut changer cela, car on veut que le compresseur s'active quand les effets sonores joues (contenu du bus "Bruits").


Effet audio dynamique sur le menu pause


Niv. 3

Il faut ici passer par un peu de script pour piloter le bus "Musique" et activer l'un de ses effets.





Exportation






Architecte



Modifier le niveau existant


Niv. 1


Créer un autre niveau


Niv. 1


Artisan



Faire descendre les briques au fil du temps


Niv. 2

Complètement facultatif.


Faire perdre la partie si une brique sort du terrain


Niv. 4


Avoir un nombre limité de vies


Niv. 2


Faire accélérer la balle


Niv. 2


Passer au niveau suivant une fois un niveau terminé


Niv. 4

Attribut par niveau, script niveau.

Pouvoir configurer le nombre de vies d'une brique


Niv. 3


Note : quand vous modifiez la vie dans l'éditeur, sa couleur change en direct ! Cela est possible grâce à l'annotation "@tool" en haut du script, qui permet de faire fonctionner le script dans l'éditeur (à utiliser avec précaution) ; et la méthode "set_nombre_de_vies", utilisée pour modifier le nombre de vie (set = set_nombre_de_vies), qui rafraichit la couleur de la brique dès que le nombre de points de vie est modifié.

Faire un obstacle avec une nouvelle forme


Niv. 3


Faire une brique avec une nouvelle forme


Niv. 4


Note : comme votre nouvelle brique a le même script que la brique de base, les deux ont le même comportement !

Collectibles qui donne des points


Niv. 4


Pouvoir de ralentissement


Niv. 3


Pouvoir de vie/balles supplémentaires


Niv. 3


Pouvoir agrandissement raquette


Niv. 4


Malus diminution taille de raquette


Niv. 4


Faire une carte de niveaux interactive


Niv. 4

Pouvoir de feu


Niv. 3

Ici, lorsque le pouvoir sera activé, la (ou les) balle sera transformée en balle de feu. Cela signifie qu'il y a une scène dédiée à la balle de feu, qui existe et que vous pouvez regarder.


Note : une méthode statique est une fonction qui peut être appelée sans avoir à créer l'objet associé.

Pouvoir laser


Niv. 4


Pouvoir électrique


Niv. 4

La balle électrique possède une zone d'influence qui détruit les briques à distance.


Pouvoir balle collante


Niv. 4

La balle colle à la raquette, et peut être renvoyée avec un clic ou un appui sur espace.

Pouvoir balle spectrale


Niv. 4

La balle spectrale devient transparente au contact sur la raquette : elle ne rentre pas en collision avec les briques, jusqu'à son premier rebond contre un mur.

Faire un nouveau pouvoir de balle


Niv. 4

À vous de l'imaginer, et de l'implémenter. :-)







**Features testées :
- Changer l'image de la raquette,
- Changer la couleur de la raquette,
- Changer la couleur de la brique en fonction de sa vie,
- Faire une trainée à la balle,
- Effet impact d'une balle (non réussie),
- Afficher le compteur de balles,
- Afficher un écran de game over,
- Pouvoir scroller les planètes,
- Insérer une musique dans un niveau,
- Faire un bruit au game over,
- Modifier le niveau existant,
- Créer un autre niveau,
- Avoir un nombre limité de vies (voir commentaire ci-dessous),
- Faire accélérer la balle,
- Pouvoir configurer le nombre de vies d'une brique,
- Pouvoir de vie/balles supplémentaires (commencé, mais arrêter par
flemme).

**Lignes du guide avec des soucis/commentaires : 
194 - Manque le code à décommenter dans la fonction frappe() de
brique.gd.
215 - j'y suis pas arrivé, le node GPUParticule2D fait une erreur par
rapport au matériau.
401 - "Faire un bruit à l'impact d'une balle" = déjà dans le projet
starter, soit on l'enlève du guide, soit du projet starter. -> On l'enlève du projet
522 - "Image : editor_gd4_raquette_config_grille.png" = je ne sais pas
ce que ça fait là -> screenshot en attente
558 - Pour faire le compteur de balle, je suis aller copier-coller le
code dans le projet fini. Du coup pas besoin de suivre le guide sur
"Avoir un nombre limité de vies" -> dépendances non respectées
594 - Pouvoir configurer le nombre de vies d'une brique = je suis aller
copier-coller le code dans le projet fini. Du coup pas besoin de suivre
le guide sur "Avoir un nombre limité de vies" -> idem
694 - Le node Lanceur fait déjà partie du groupe des lanceurs -> à enlever dans le starter