Accueil Github ↗
Itération 3

Système de tutoriel

Diaporama data-driven : Tutoriel_SO (ScriptableObject), génération automatique du menu depuis Resources/, lecteur de diaporama DiapoDisplay avec navigation avant/arrière.

Le dossier UserInterface/Tutoriel/ gère les tutoriels sous forme de diaporamas, entièrement data-driven.

Pipeline

  1. Création : le game designer crée un Tutoriel_SO dans Unity, lui donne un nom et y glisse ses images. Il le place dans Resources/Tutoriel/.
  2. Génération : au chargement du menu, le jeu scanne ce dossier et crée automatiquement un bouton par fichier trouvé.
  3. Visionnage : un clic ouvre la visionneuse DiapoDisplay et le joueur navigue avec les flèches avant/arrière.

[!WARNING] Resources.LoadAll charge tout en mémoire au démarrage. Éviter les images très lourdes (ex. 4K) dans ce dossier.

Tutoriel_SO — conteneur de données

ScriptableObject créé via Create > CogniActif > Tutoriel dans l’éditeur.

VariableTypeDescription
titlestringNom du tutoriel (ex. “Comment jouer au Pendu”)
diapoSprite[]Toutes les images du tutoriel, dans l’ordre de lecture
iconPrefabGameObjectModèle du bouton à générer dans le menu

TutorielIconUI — étiquette du bouton

Script attaché au prefab généré. Sert de pont pour que TutorielMenu sache où écrire le titre et brancher le clic.

VariableDescription
titreTextMeshProUGUI du nom du tutoriel
buttonButton cliquable

TutorielMenu — générateur de menu

Start() : utilise Resources.LoadAll<Tutoriel_SO>("Tutoriel") pour charger tous les tutoriels. Pour chaque fichier trouvé, instancie un TutorielIconUI, remplit son titre, et connecte l’onClick : “Quand on me clique, crée un DiapoDisplay, cache le menu actuel, et envoie mes images à la visionneuse.”

DiapoDisplay — lecteur de diaporama

S’affiche en plein écran par-dessus le reste. Navigue dans un tableau de Sprite[] et gère les flèches directionnelles.

ChampDescription
titreText, sousTitreTextTitres en haut de l’écran
diapoImageComposant Image qui change à chaque clic
nextDiapoButton, previousDiapoButtonBoutons fléchés
MéthodeDescription
SetUI(...)Initialise avec les images. Si diapoSprite.Length == 1, masque les deux flèches.
NextDiapo()Incrémente l’index, change l’image, masque “Suivant” sur la dernière image.
PreviousDiapo()Décrémente l’index, change l’image, masque “Précédent” sur la première image.
BackButton()Réactive le menu précédent (_precedentMenu.SetActive(true)) et se détruit via Destroy(gameObject).