Construire notre menu principal de jeu avec Godot

En créant notre menu principal, vous allez apprendre quelques concepts supplémentaires sur le moteur de jeu Godot.
Avant de continuer, nous aurons besoin de ressources graphiques supplémentaires, qui seront à l’intérieur du répertoire ressources.

Afin d’organiser nos ressources, dans le dossier images, créez un dossier gui pour abriter les images de l’interface et un dossier sound pour les effets sonores.

Voici quelques ressources graphiques supplémentaires qui vont nous servir dans la création de notre menu principal. Elles sont soigneusement organisées dans leurs répertoires :

ressources/ images/adventure_guy.png

resources/images/gui/fx.png

resources/images/gui/fx_off.png

resources/images/gui/music.png

resources/images/gui/music_off.png

resources/images/gui/play.png

resources/images/logo.png

resources/sound/glitter-blast.ogg

resources/sound/pop.wav

Accédez à ce site pour télécharger la police. Après l’extraction des fichiers, ouvrez le dossier et choisissez Chocolate Covered Raindrops.

Nous avons vu comment ajouter des images à notre menu principal, en créant un nœud de type TextureRect, puis en ajoutant l’image en tant que texture. Nous allons ajouter l’image adventure_guy.png. Une fois ajoutée, dans l’éditeur visuel, vous pouvez cliquer et faire glisser l’image pour la placer où vous le souhaitez.

En fait, il faut ajouter le deuxième nœud TextureRect2 en tant qu’enfant de MainMenu et non de TextureRect. Si vous faites une erreur, vous pouvez taper Ctrl + Z pour annuler. Déplacez les nœuds en les faisant glisser avec la souris.

Cela prend forme ! N’oubliez pas que si vous appuyez sur F5 (ou sur le bouton de lecture, en haut à droite), le jeu se lancera et vous pourrez voir le résultat.

Faites maintenant de même avec le logo.png, et placez-le au centre. Et maintenant, profitez-en pour renommer les nœuds et les rendre plus claires dans l’arborescence.

Glissez vos images pour avoir ce rendu.

menu principal de jeu

Nous pouvons utiliser Gimp (l’équivalent de Photoshop en open source) pour modifier l’image de notre menu principal et l’agrandir. Mais au lieu de cela, nous allons en profiter pour regarder un peu plus les propriétés des nœuds.

En sélectionnant le nœud Logo, dans l’inspecteur, nous voyons ses propriétés. Affichez la section Rect. Nous avons les propriétés du rectangle qui contient l’image. Par exemple, si vous modifiez les propriétés de Position/x à 1200 et Position/y à 600, vous verrez comment le logo va se déplacer. En fait, il est plus utile de placer les éléments avec des coordonnées précis plutôt qu’avec la souris.

Aussi, nous voulons l’agrandir. Donc, définissez les propriétés Scale/x et Scale/y sur 2, et nous verrons l’image deux fois plus grande. Puis, si nous réglons les positions x et y sur 600 et 0, le résultat devrait être le suivant :

menu principal de jeu

Ajouter des boutons au menu principal

Godot possède des nœuds spéciaux pour les boutons, qui prennent en charge les textes, différentes images (enfoncés ou non), et beaucoup d’autres choses. Cependant, Godot y met certains styles et ombrages par défaut, et aussi une fois cliqués, ils restent comme sélectionnés, produisant un effet que nous n’aimons pas.

Par conséquent, au lieu d’utiliser des nœuds de bouton, nous allons utiliser des images simples, puis nous les ferons agir comme des boutons.

A ce stade, vous allez pouvoir faire les choses tout seuls avec votre menu principal de jeu. Ajoutez trois nouveaux nœuds de type TextureRect, et définissez-les comme textures play.png, music.png et fx.png. Ensuite, jouez avec les tailles et la position dans Rect pour que votre scène ressemble à ceci.

godot_3

La musique dans un menu principal de jeu Godot

La musique et les effets sonores améliorent grandement le jeu et font une énorme différence dans l’expérience utilisateur. En effet, Godot nous permet d’ajouter très facilement de la musique à une scène. Nous ajoutons un nœud de type AudioStreamPlayer en tant qu’enfant de MainMenu.

Afin de choisir le clip audio de ce nœud, nous allons faire quelque chose de similaire à ce que nous avons fait avec les images. Faites glisser le fichier glitter-blast.ogg du système de fichiers vers la propriété Stream de ce nœud dans l’inspecteur. Et puisque nous sommes dans l’inspecteur, cochez la case Autoplay pour qu’il ouvre la music automatiquement lors du chargement de la scène. Sauvegardez avec Ctrl + S, lancez le jeu avec F5 et… Ça commence à ressembler de plus en plus à un jeu !

Les scripts Godot

Jusqu’à présent, nous avons tout fait graphiquement, mais il est temps de commencer à programmer. Godot prend en charge différents langages. Mais par défaut, il utilise GDScript, un langage de haut niveau très similaire à python.

L’écriture d’un code dans une scène est associée à un script. Sélectionnez le nœud racine MainMenu, puis, juste au dessus à droite cliquez sur l’icône (Attacher un nouveau script). Nous laissons les valeurs par défaut et cliquons sur Créer.

menu

Ce qui va créer un nouveau script appelé MainMenu.gd associé à notre scène. Aussi, cela changera la partie centrale de l’éditeur et au lieu de voir un aperçu, nous aurrons le code source du script.

menu

En fait, vous pouvez basculer entre l’affichage de l’aperçu et le code source avec les boutons en haut. Appuyez sur 2D pour l’aperçu, et Script pour le code source.

Le script est créé à partir d’un modèle. La fonction ready est appelée automatiquement lorsque la scène est chargée.
Écrivez le code suivant dans cette fonction :

func _ready():
    print ("Hello World!")

Enregistrez et exécutez avec F5. En fait, l’exécution de la scène affichera « Hello World! » en dessous, dans Sortie.

Les boutons et les signaux

Les signaux Godot permettent à un nœud d’envoyer une notification aux nœuds d’écoute, chaque fois que quelque chose se produit. Par exemple, au lieu de vérifier en permanence si un bouton est enfoncé, il peut émettre un signal lorsqu’il est enfoncé.

En fait, nous allons écouter le signal émis par un bouton, et arrêter ou démarrer la musique à partir de celui-ci. Comme vous le verrez, Godot permet d’accrocher facilement notre code à un signal.

Tout d’abord, renommez les derniers nœuds TextureRect que vous avez ajoutés. Nommez-les PlayButton, MusicButton et FxButton.

Cliquez sur MusicButton, dans l’inspecteur, vous verrez ses propriétés. Toutefois, ce qui nous intéresse, c’est l’onglet Nœud qui se trouve à côté de l’Inspecteur. Là, vous pouvez voir tous les signaux de ce nœud.

Si vous double-cliquez sur l’un d’eux, Godot associera ce signal à une fonction dans votre script. Double-cliquez sur gui_input (event: InputEvent, et vous verrez une boîte de dialogue. Laissez les paramètres tels quels et appuyez sur Connecter.

script

En cas de problème, refaites l’opération à partir de la création du script, il se peut que vous ayez loupé quelque chose.

Si tout va bien, vous verrez que Godot a créé une nouvelle fonction dans le script, qui sera appelée automatiquement lorsque ce nœud recevra une sorte d’interaction de l’utilisateur. Puisque nous voulons réagir à quelque chose de spécifique (lorsque l’utilisateur clique sur l’image), on peut écrire le code suivant dans la fonction :

func _on_MusicButton_gui_input(event):
	if event is InputEventMouseButton and event.pressed and event.button_index == 1:
		print("User click")

Si nous exécutons avec F5, nous verrons comment User click apparaît dans la section Sortie chaque fois que nous cliquons sur le bouton de la musique.

Notre prochaine étape consiste à activer ou désactiver la musique dans le menu principal au lieu d’afficher un message.

Dans GDScript, nous avons une nomenclature pour faire référence à un nœud dans l’arbre de scène. Vous devez mettre le symbole $ puis le chemin du nœud. Dans notre cas, pour faire référence au nœud du lecteur de musique, ce serait $AudioStreamPlayer.

La documentation de Godot est très complète, et nous renseigne sur toutes les méthodes et propriétés des nœuds. En effet, nous avons dans la documentation AudioStreamPlayer, la propriété playing et les méthodes play et stop. On peut donc écrire ce code :

func _on_MusicButton_gui_input(event):
	if event is InputEventMouseButton and event.pressed and event.button_index == 1:
			if $AudioStreamPlayer.playing:
				$AudioStreamPlayer.stop()
			else:
				$AudioStreamPlayer.play()

Si nous exécutons, nous verrons que maintenant la musique s’arrête et recommence lorsque nous appuyons sur le bouton.

Plus de signaux

Nous allons faire la même chose avec le bouton son, FxButton. Tout d’abord, nous allons ajouter un nouveau nœud de type AudioStreamPlayer à MainMenu. Cette fois nous allons l’ajouter d’une autre manière, dans l’arborescence des nœuds, cliquez sur AudioStreamPlayer, puis appuyez sur ctrl + d (ou bouton droit / Dupliquer) pour dupliquer le nœud. Ce qui va créer une copie, avec les mêmes valeurs. En réalité, cette fonctionnalité est très utile, car en copiant toutes les valeurs, cela peut vous faire économiser beaucoup de travail.

Maintenant, renommez-le AudioStreamPop.

Ensuite, faites glisser le fichier pop.wav après l’avoir ajouté à système de fichiers vers la propriété Stream du nœud AudioStreamPop. Et, dans l’inspecteur, décochez la propriété Autoplay pour qu’elle ne sonne pas au démarrage de la scène.

À présent, sélectionnez le nœud FxButton dans l’arborescence des nœuds, cliquez sur l’onglet Nœud à côté de l’inspecteur, puis double-cliquez gui_input, et appuyez sur Connecter, et enfin dans la fenêtre de code nous écrivons ce qui suit :

func _on_FxButton_gui_input(event):
	if event is InputEventMouseButton and event.pressed and event.button_index == 1:
		$AudioStreamPop.play()

Exécutez avec F5 et appuyez sur le bouton Fx.

Afficher et masquer

Nous avons vu que tous les nœuds que vous ajoutez à une scène sont visibles lors de l’exécution de la scène. Mais cela ne doit pas toujours être le cas. Nous pouvons cacher les choses, qui sont affichées en fonction des actions de l’utilisateur.

Par exemple, ce que nous voulons configurer sur cet écran, c’est si oui ou non les effets sonores et/ou la musique doivent être joués dans notre jeu. Nous allons donc afficher les boutons en couleur ou en gris selon que la musique et les effets sont actifs ou non.

Comme toujours, il existe de nombreuses façons de faire les choses, mais nous allons choisir la manière la plus simple. Dans l’arborescence des nœuds, cliquez sur MusicButton et dupliquez-le avec ctrl + d. En fait, nous avons dupliqué les propriétés, donc il se situe exactement où nous voulons, à la même position que MusicButton. Renommez le nouveau nœud en MusicButtonOff et placez l’image music_off.png en tant que texture.

Nous allons maintenant configurer un signal pour ce nœud. Avec MusicButtonOff sélectionné dans l’arborescence des nœuds, allez dans l’onglet Nœud à côté de l’inspecteur. Mais attendez, vous avez déjà le signal gui_input connecté. En dupliquant le nœud, ses signaux sont également dupliqués. N’oubliez pas cela, car cela peut être une source de bugs à l’avenir.

Pour l’instant, la solution est simple. Cliquez sur la connexion existante, marquée en vert (avec le texte .. :: _on_MusicButton_gui_input), et en bas de l’onglet cliquez sur Déconnecter. À présent, double-cliquez sur gui_input, et appuyez sur connecter.

Ce bouton s’affiche lorsque la musique est éteinte. Ce que nous voulons obtenir en appuyant dessus, ce sont trois choses :

  1. Le bouton MusicButtonOff soit masqué.
  2. Le bouton MusicButton soit affiché.
  3. La chanson commence à jouer.

Pour cela, ajoutez ce code à votre script :

func _on_MusicButtonOff_gui_input(event):
	if event is InputEventMouseButton and event.pressed and event.button_index == 1:
		$AudioStreamPlayer.play()
		$MusicButtonOff.hide()
		$MusicButton.show()

De plus, nous allons changer ce que fait MusicButton de manière. Modifiez le code que nous avions déjà pour qu’il ressemble à ceci :

func _on_MusicButton_gui_input(event):
	if event is InputEventMouseButton and event.pressed and event.button_index == 1:
		$AudioStreamPlayer.stop()
		$MusicButtonOff.show()
		$MusicButton.hide()

Une dernière chose, nous voulons que le bouton MusicButtonOff soit masqué au démarrage. Dans l’arborescence des nœuds, juste à côté de son nom, il y a une icône en forme d’œil. Si nous cliquons dessus, nous pouvons rendre un début de nœud visible ou masqué. Cliquez dessus pour le masquer.

Exécutez avec F5, et vous verrez que maintenant lorsque vous appuyez sur le bouton de la musique, en plus d’arrêter la chanson, il semble qu’il passe au gris. Et si vous appuyez dessus quand il est gris, la musique commence et il redevient coloré.

Un petit exercice pour améliorer le menu principal

Il est temps pour vous de tester vos compétences sans que quelqu’un vous guide. Votre mission est d’obtenir le même effet de bouton couleur/gris pour le bouton de son FxButton.

Ce que vous devriez obtenir :

Que le jeu commence avec un bouton son coloré. En appuyant sur ce bouton :

  1. Le bouton de son coloré doit être masqué.
  2. Le bouton de sons gris devrait s’afficher.

    Et en appuyant sur le bouton gris :
  3. Le bouton de son coloré doit s’afficher.
  4. Le bouton de son gris doit être masqué.
  5. Avoir le son pop...pop.

Créer une scène enfant et un sol pour le jeu avec Godot

Construire notre menu principal de jeu avec Godot

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

Retour en haut