Installer Godot Tour

Godot Tour est un add-on qui permet de créer des tutoriels ou guides sur l'éditeur Godot. Cette page a pour but de vous donner des indications claires sur son installation sur votre projet.

Récupérer les fichiers

Vous pouvez récupérer les fichiers à partir du projet GitHub suivant : Godot Tours: 101 - The Godot Editor. Il s'agit d'un projet réalisé par Nathan Lovato pour présenter l'éditeur Godot à travers un exemple de jeu 2D. Après avoir téléchargé le zip, vous pouvez soit importer le projet dans Godot ce que je conseille pour voir de quoi le plugin est capable, soit décompresser le zip afin d'avoir un accès direct aux fichiers qui nous intéressent.

Transférer les fichiers

Copier-coller dans votre projet les dossiers addons, assets et tours, et le fichier godot_tours.tres. Aller ensuite dans Projet>Paramètres du projet...>Extensions pour activer Godot Tour. Pour finir, rechargez le projet afin d'avoir accès au tour.

Adapter à votre projet

Comme vous avez pu le remarquer, vous avez ramené le guide avec ses dépendances et donc c'est à vous d'adapter certains fichiers pour que ce guide devienne le vôtre. Nous allons procéder par étape en identifiant quels sont les fichiers à modifier afin d'arriver à notre fin.

La fenêtre d'intro

Nous allons modifier le nom du guide que vous voulez créer. Vous pouvez aussi le rendre inaccessible. Ouvrez le fichier godot_tours.tres avec l'éditeur de votre choix.

[ext_resource type="Script" uid="uid://cr8qgsi12eexm" path="res://addons/godot_tours/godot_tour_list.gd" id="1_jcgwy"]
[ext_resource type="Script" uid="uid://cu47whb40hxkc" path="res://addons/godot_tours/godot_tour_entry.gd" id="2_wh1da"]

[sub_resource type="Resource" id="Resource_vrl3d"]
script = ExtResource("2_wh1da")
title = "101: The Godot Editor"
is_free = true
is_locked = false
tour_path = "res://tours/godot-first-tour/godot_first_tour.gd"

[sub_resource type="Resource" id="Resource_7h6kp"]
script = ExtResource("2_wh1da")
title = "102: Assemble Your First Game"
is_free = false
is_locked = true
tour_path = "res://tours/learn-gamedev-from-zero/assemble_path_of_sorcerers.gd"

[resource]
script = ExtResource("1_jcgwy")
tours = [SubResource("Resource_vrl3d"), SubResource("Resource_7h6kp")]

Supprimer le deuxième bloc sub_ressource étant donné que nous faisons votre premier guide. Remplacez le title par le nom que vous voulez donner à votre guide et voilà, la fenêtre contient uniquement votre guide.

Concevoir un tutoriel

La majorité du code de votre tutoriel sera contenu dans le script dont le chemin est écrit dans la variable tour_path que vous venez de définir dans la ressource de l'étape précédente. Ce script devra hériter du script de tour de base défini dans l'addon extends "res://addons/godot_tours/tour.gd"

Créer des bulles de dialogue

Configuration préalable

Vous êtes libre de changer les ressources et les aspects des éléments utilisés pour afficher les bulle de dialogue, mais dans ce tutoriel nous allons garder les liens vers les ressources fournies par Godot Tour. Comme nous allons régulièrement les réutiliser, nous conseillons de les stocker dans des variables. Chez nous, notre script débute donc de la manière suivante en réferençant quelques variables utiles et en récupérant les éléments graphiques dont nous allons avoir besoin dans la suite :

extends "res://addons/godot_tours/tour.gd"

const Gobot := preload("res://addons/godot_tours/bubble/gobot/gobot.gd")

const TEXTURE_BUBBLE_BACKGROUND := preload("res://assets/bubble-background.png")
const TEXTURE_GDQUEST_LOGO := preload("res://assets/gdquest-logo.svg")

const CREDITS_FOOTER_GDQUEST := "[center]Godot Interactive Tours · Made by [url=https://www.gdquest.com/][b]GDQuest[/b][/url] · [url=https://github.com/GDQuest][b]Github page[/b][/url][/center]"

const LEVEL_RECT := Rect2(Vector2.ZERO, Vector2(1920, 1080))
const LEVEL_CENTER_AT := Vector2(960, 540)

const POPUP_WINDOW_POSITION := Vector2i(150, 150)
# We limit the size of popup windows
const POPUP_WINDOW_MAX_SIZE := Vector2i(860, 720)

const ICONS_MAP = {
	node_position_unselected = "res://assets/icon_editor_position_unselected.svg",
	node_position_selected = "res://assets/icon_editor_position_selected.svg",
	script_signal_connected = "res://assets/icon_script_signal_connected.svg",
	script = "res://assets/icon_script.svg",
	script_indent = "res://assets/icon_script_indent.svg",
	zoom_in = "res://assets/icon_zoom_in.svg",
	zoom_out = "res://assets/icon_zoom_out.svg",
	open_in_editor = "res://assets/icon_open_in_editor.svg",
	node_signal_connected = "res://assets/icon_signal_scene_dock.svg",
}
var scene_main := "res://main.tscn"

Créer une bulle

La plus basique des bulles

Le code pour créer une bulle basique est le suivant. Il se place dans une fonction _build() surchargeant celle définie dans tour.gd. Le code des bulles est mis les unes à la suite des autres, séparées par des fonctions "complete_step()" :

bubble_move_and_anchor(interface.canvas_item_editor, Bubble.At.CENTER) Précise la place de la bulle dans l'éditeur
	bubble_set_avatar_at(Bubble.AvatarAt.CENTER) #précise la place de l'avatar
	bubble_set_title("Ajoutons une bille") #Titre de la bulle
	bubble_add_text(
		["Nous allons maintenant ajouter une bille au jeu.",]
	) # Permet d'ajouter plusieurs lignes de code. Avant chaque élément de l'Array
	complete_step() #Cet fonction permet de retirer la bulle quand l'étape est terminée

Pour trouver les autres positions possibles de la bulle, par exemple, n'hésitez pas à faire un Ctrl + Clic pour vous balader dans le code source ou laisser l'autocomplétion de l'éditeur proposer les différentes valeurs possibles.

Ajouter une tâche en cheklist

Pour ajouter une tâche à compléter pour avancer dans le tutoriel, la solution la plus simple consiste à utiliser une des fonctions définies dans tour.gd, ne nécessitant qu'une référence et une description. Par exemple :

func bubble_add_task_press_button(button: Button, description := "") -> void:
func bubble_add_task_toggle_button(button: Button, is_toggled := true, description := "") -> void:
func bubble_add_task_select_nodes_by_path(node_paths: Array[String], description_override := "") -> void:

Ces fonctions sont décrites et commentées en détail entre les lignes 600 et 900 de tour.gd.

Vous voulez faire une tâche spécifique et aucune des fonctions évoquées précédemment ne correspond ? Pas de problème, il suffit d'utiliser la fonction "bubble_add_task".

Cette fonction, définie elle aussi dans "tour.gd", prend 4 paramètres, dont un optionnel :

• un String pour le nom de la tâche
• un entier pour la valeur d'avancement à obtenir pour valider la tâche
• une fonction (le type exact est Callable) qui renvoie un entier correspondant à la valeur d'avancement
• (optionnel) une fonction s'exécutant en cas d'erreur dans la tâche

Voici un exemple où nous vérifions que la CollisionShape3D possède bien la CollisionShape adaptée :

bubble_add_task(
		("Ajouter une SphereShape3D."),
		1,
		func task_open_start_scene(task: Task) -> int:
			var scene_root: Node = EditorInterface.get_edited_scene_root()
			var collisionShape : CollisionShape3D = scene_root.get_child(0)
			if collisionShape == null:
				return 0
			if (collisionShape.shape is SphereShape3D) : 
				return 1
			if (collisionShape.shape is CapsuleShape3D):
				return 1
			return 0 
	)

Si vous voulez ajouter plusieurs tâches à une seule bulle, il vous suffit d'appeler plusieurs fois bubble_add_task.

Obtenir la référence d'un noeud de l'éditeur et informations préalables

Une information importante pour comprendre les fonctions utilisées dans les prochaines parties est le fait que les interfaces de l'éditeur Godot sont construites de la même manière qu'une scène. Certains de ces noeuds sont des éléments instanciables de GodotScript comme les boutons, les panneaux et les conteneurs composant les interfaces graphiques. D'autres (une minorité) ne le sont pas car définis en C++ et donc ne pouvent pas être instanciés de la même manière. Pour accéder à ces noeuds de l'éditeur, nous allons utiliser la variable "interface" définie dans "tour.gd". Cette variable est de type EditorInterfaceAccess et est définie dans le script "editor_interface_access.gd" dans le dossier du plugin. C'est dans ce script que sont définies de nombreuses variables contenant des références vers les noeuds de l'éditeur. Par exemple "spacial_editor" permet d'obtenir la référence de la fenêtre de visualisation de scène en 3D ou "inspector_dock" pour obtenir la référence de la fenêtre de l'inspecteur.

De nombreux noeuds sont présents, mais pas tous. Par exemple, pour mettre en surbrillance le bouton "Instancier une scène enfant", nous avons dû l'ajouter.

Pour ajouter une variable contenant une référence non présente dans "editor_interface_access.gd", il faut d'abord la déclarer comme les autres. Pour l'initialisation, il faut pouvoir obtenir la référence à partir d'autres noeuds. Nous conseillons d'utiliser le plugin disponible dans ce projet pour voir l'arborescence de l'éditeur. Une fois le chemin connu, on peut obtenir la référence à partir des noeuds plus facilement accessibles en faisant des "get_child(...)".

Pour plus de propreté, il faudrait ajouter le bouton dans l'appel de la fonction "check_button_icons" dans "editor_interface_access.gd", mais cela n'est pas obligatoire. Élément important à noter : pour que les changements prennent effet (et que la référence soit valide), il faut recharger le projet, soit avec Projet > Recharger le projet actuel, soit en fermant et rouvrant l'éditeur.

Mettre en surbrillance des éléments

Si nous voulons mettre en avant des éléments dans l'éditeur, de nombreuses fonctions sont disponibles et commentées entre les lignes 1055-1228. Les fonctions les plus utiles pour nous dans la conception du tutoriel ont été :

#Seul le premier argument de ces fonctions est obligatoire. L'attribut play flash peut être interressant si on veut faire clignoter l'élément pour le rendre encore plus visible
func highlight_controls(controls: Array[Control], play_flash := false) -> void #Prend en compte une liste de noeuds de contrôle de l'éditeur.
func highlight_scene_nodes_by_name(names: Array[String], button_index := -1, do_center := true, play_flash := true) -> void #Prends une liste de noms de noeuds dans la scène. En cas de doublons, il est plus recommandé d'utiliser les chemins.
func highlight_scene_nodes_by_path(paths: Array[String], button_index := -1, do_center := true, play_flash := true) -> void #Prends la liste des chemins des noeuds dans la scène.

Pour mettre en avant du code, on peut utiliser la fonction :

Elle prend en compte la ligne de début et de fin de surbrillance du code (toutes deux incluses).

Notes : comme dans le cas des tâches, si on veut mettre en surbrillance différentes parties de code, on peut appeler plusieurs fois cette fonction. Attention cependant : si pendant le tutoriel le sujet saute des lignes, les mauvaises lignes seront en surbrillance.

Changer de fenêtre dans l'éditeur

Il se peut que votre tutoriel veille alterner entre du code, une scène 2D et une scène 3D. Pour changer la fenêtre active de l'éditeur, des fonctions simples sont définies :

func context_set_2d() -> void
func context_set_3d() ->void
func context_set_script() ->void
func context_set_game() ->void

Ajouter des animations de souris

On peut aussi ajouter des animations avec un curseur pour montrer où appuyer ou comment déplacer la souris. Les fonctions pour l'animation d'un curseur sont présentes entre les lignes 1230 et 1360 de "tour.gd".

Nous avons majoritairement utilisé les fonctions suivantes :

func mouse_move_by_position(from: Vector2, to: Vector2) -> void #Pour déplacer la souris entre deux points. Si l'on veut pointer un objet, on peut récupérer son attribut .global_position.

Et :

func mouse_click(loops := 1) -> void #Anime un nombre de clics égal à l'argument loops

Nous avons aussi dû utiliser la fonction "mouse_move_by_callable" qui permet d'effectuer le déplacement par des positions calculées à l'exécution. C'est le cas, par exemple, pour aller d'un noeud de la scène à un autre :

mouse_move_by_callable(
	get_tree_item_center_by_path.bind(interface.scene_tree, ("Circuit")),
	get_tree_item_center_by_path.bind(interface.scene_tree, ("Circuit/Bille")),
)