Manuel Unity Visual Scripting (Bolt) + Vuforia AR | ImmersivLearn – DANHE SDK

MANUEL COMPLET

Unity Visual Scripting

(Bolt)
avec intégration Vuforia AR

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Cas fil rouge : Cœur 3D Interactif en Réalité Augmentée

Scan d'un schéma → Cœur 3D AR avec parties anatomiques cliquables

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Niveau : Débutant → Intermédiaire | Format : Pratique & Illustré | 2025

ImmersivLearn – DANHE SDK Project

© ImmersivLearn 2025 | Page 1

Manuel Unity Visual Scripting (Bolt) + Vuforia AR | ImmersivLearn – DANHE SDK

Table des matières

TOC \h \o "1-3"

© ImmersivLearn 2025 | Page 2

Manuel Unity Visual Scripting (Bolt) + Vuforia AR | ImmersivLearn – DANHE SDK

Chapitre 0 – Introduction & Objectifs du manuel

Ce manuel a pour objectif de vous donner une maîtrise complète de Unity Visual Scripting
(anciennement Bolt), de l'installation jusqu'à la création d'expériences de réalité augmentée
(AR) interactives avec Vuforia.

Tout au long de ce document, nous construisons un projet concret et réaliste : scanner un

schéma anatomique imprimé avec votre smartphone, et voir apparaître un cœur 3D interactif
dont chaque partie (ventricule gauche, ventricule droit, aorte, etc.) est cliquable et affiche une
description. Ce cas fil rouge illustre chaque concept présenté.

🎯 Ce que vous saurez faire à la fin de ce manuel

• Créer et configurer un projet Unity avec Vuforia et Visual Scripting
• Comprendre et utiliser Flow Graphs et State Graphs
• Connecter des événements AR Vuforia à des comportements visuels
• Construire un objet 3D avec des parties cliquables en Visual Scripting pur
• Afficher des informations dynamiques via des panneaux UI
• Gérer des transitions d'état (apparition, interaction, disparition)
• Déboguer et optimiser vos graphes

Structure du manuel
Chapitre Contenu
Chapitre 1 Qu'est-ce que Bolt / Visual Scripting ?
Chapitre 2 Installation et configuration
Chapitre 3 Interface et éléments fondamentaux
Chapitre 4 Flow Graph – Logique d'exécution
Chapitre 5 State Graph – Machine à états
Chapitre 6 Variables et données
Chapitre 7 Intégration Vuforia AR
Chapitre 8 Projet fil rouge : Cœur 3D interactif
Chapitre 9 UI, textes et panneaux d'information
Chapitre 10 Débogage et bonnes pratiques
Chapitre 11 Exercices & défis pratiques

© ImmersivLearn 2025 | Page 3

Manuel Unity Visual Scripting (Bolt) + Vuforia AR | ImmersivLearn – DANHE SDK

Pré-requis
• Unity Hub installé (Unity 2021.3 LTS ou version supérieure recommandée)
• Connaissances de base de l'interface Unity (créer des objets, Inspector, Scene View)
• Un compte Vuforia Developer (gratuit sur [Link])
• Un Android ou iOS pour tester, ou la webcam de votre PC
• Aucune connaissance en C# requise – c'est l'objectif de Bolt !

💡 Convention de notation dans ce manuel

Texte en police code → noms de nœuds, propriétés, paramètres
[Gras] → actions à effectuer dans Unity
⚠ Avertissement : point d'attention important
✅ Bonne pratique recommandée
🔗 Référence à un autre chapitre

© ImmersivLearn 2025 | Page 4

Manuel Unity Visual Scripting (Bolt) + Vuforia AR | ImmersivLearn – DANHE SDK

Chapitre 1 – Qu'est-ce que Unity Visual Scripting

(Bolt) ?
1.1 Histoire et positionnement
Unity Visual Scripting, connu sous son nom originel Bolt, a été créé par la société Ludiq avant
d'être racheté par Unity Technologies et intégré nativement dans le moteur depuis Unity 2021.1.
Il est désormais disponible gratuitement dans tous les projets Unity sans plugin externe.

L'idée est simple : plutôt que d'écrire du code C# pour définir les comportements d'un objet,
vous construisez un graphe visuel où des boîtes (nœuds) sont reliées par des fils. Chaque
nœud représente une action, un événement, une condition ou une donnée.

Unity Visual Scripting (Bolt) Unreal Engine Blueprints

Intégré dans Unity 2021+ Natif dans Unreal Engine depuis UE4
Langage sous-jacent : C# Langage sous-jacent : C++
Flow Graph + State Graph Event Graph + Construction Script
Convient aux débutants Unity Très puissant mais interface dense
Peut coexister avec du code C# Peut coexister avec du C++

1.2 Pourquoi utiliser Visual Scripting ?

Visual Scripting n'est pas qu'un outil pour débutants. Il présente des avantages structurels
réels :

🚀 Avantages clés
Rapidité de prototypage : construire une logique en quelques minutes sans compilation
Lisibilité : un graphe se lit comme un schéma électrique – idéal pour le travail d'équipe
Pas de bugs de syntaxe : l'éditeur empêche les connexions invalides
Intégration directe avec tous les composants Unity : Rigidbody, Animator, UI, Vuforia...
Combinaison possible avec C# : vos scripts C# sont accessibles depuis les nœuds

⚠ Limites à connaître
Moins performant que du C# pur (overhead de réflexion à l'exécution)
Graphes complexes peuvent devenir difficiles à naviguer (>50 nœuds)
Certaines APIs Unity avancées (Shaders, Jobs System) restent en C# uniquement

© ImmersivLearn 2025 | Page 5

Manuel Unity Visual Scripting (Bolt) + Vuforia AR | ImmersivLearn – DANHE SDK

Pas idéal pour des algorithmes mathématiques intensifs

1.3 Les deux types de graphes : Flow Graph vs State Graph

Bolt propose deux types de graphes aux rôles bien distincts. Comprendre la différence est
fondamental.

Flow Graph (Script Graph) State Graph

Logique séquentielle & événementielle Machine à états finis (FSM)
Se lit de gauche à droite Se lit comme un diagramme d'états
Déclenché par des événements (Start, Tourne en continu, transitions conditionnelles
Update, Click...)
Ex : 'Quand je clique → afficher un panel' Ex : 'Si détecté → état Actif ; sinon → état
Caché'
Composant : Script Machine Composant : State Machine

FLOW GRAPH – Exemple de lecture

┌─────────────┐ ┌───────────────────┐ ┌──────────────────────┐
│ On Start │────►│ Set Active(true) │────►│ Play Animation │
│ (Événement)│ │ (Action) │ │ (Action) │
└─────────────┘ └───────────────────┘ └──────────────────────┘

┌─────────────┐ ┌───────────────────┐ ┌──────────────────────┐

│ On Update │────►│ If ([Link]) │────►│ Move Transform │
│ (Événement)│ │ (Condition) │ │ (Action) │
└─────────────┘ └───────────────────┘ └──────────────────────┘

Fils blancs ──────► flux d'exécution (ordre des actions)

Fils colorés ─────► flux de données (valeurs transmises)

STATE GRAPH – Exemple de lecture

┌──────────────────┐
│ START STATE │
└────────┬─────────┘
│ (transition initiale)
▼
┌──────────────────────────────────────────────────────────┐
│ État : CACHÉ (Hidden) │
│ On Enter : SetActive(false) │
└──────────┬───────────────────────────────────────────────┘
│ Condition : OnTargetFound (Vuforia)

© ImmersivLearn 2025 | Page 6

Manuel Unity Visual Scripting (Bolt) + Vuforia AR | ImmersivLearn – DANHE SDK

▼
┌──────────────────────────────────────────────────────────┐
│ État : VISIBLE │
│ On Enter : SetActive(true) + Play Animation │
│ On Exit : Play FadeOut animation │
└──────────┬───────────────────────────────────────────────┘
│ Condition : OnTargetLost (Vuforia)
▼ (retour vers état CACHÉ)

© ImmersivLearn 2025 | Page 7

Manuel Unity Visual Scripting (Bolt) + Vuforia AR | ImmersivLearn – DANHE SDK

Chapitre 2 – Installation et Configuration

2.1 Vérifier que Visual Scripting est actif
Depuis Unity 2021, Visual Scripting est inclus dans le package manager par défaut. Voici
comment vérifier :

1. [Window] → [Package Manager]

2. Dans la liste à gauche, cherchez « Visual Scripting »
3. Si le bouton affiche « Install » → cliquez dessus ; si « Update » ou rien → il est déjà
installé
4. Après installation, allez dans [Edit] → [Project Settings] → [Visual Scripting]
5. Cliquez sur [Initialize Visual Scripting] si c'est votre premier projet

⚠ Attention aux versions

Unity 2019-2020 : Bolt s'installe comme un Asset Store package séparé
Unity 2021+ : Visual Scripting est intégré nativement (recommandé)
Ce manuel cible Unity 2021.3 LTS ou plus récent

2.2 Installer Vuforia Engine

Vuforia est le moteur de réalité augmentée qui gère la détection d'images et l'ancrage 3D. Voici
comment l'intégrer :

6. [Edit] → [Project Settings] → [XR Plug-in Management]

7. Dans l'onglet Android (ou iOS), cochez « Vuforia Augmented Reality »
8. Unity télécharge automatiquement Vuforia Engine
9. Allez ensuite sur [Link] → [Develop] → [License Manager]
10. Créez une nouvelle clé de type « Development » (gratuite)
11. Copiez la clé dans Unity : [Window] → [Vuforia Configuration] → App License Key

2.3 Configurer un projet AR pour Android

12. [File] → [Build Settings] → sélectionner « Android » → [Switch Platform]
13. [Edit] → [Project Settings] → [Player] → onglet Android
14. Autres paramètres : Minimum API Level → Android 8.0 (API 26)
15. Cochez « Auto Graphics API » ou sélectionnez OpenGLES3
16. XR Settings : cochez « Vuforia Augmented Reality Supported »

© ImmersivLearn 2025 | Page 8

Manuel Unity Visual Scripting (Bolt) + Vuforia AR | ImmersivLearn – DANHE SDK

✅ Structure de dossiers recommandée pour votre projet

Assets/
├── Scenes/ → vos scènes Unity
├── VisualScripts/ → vos Flow Graphs et State Graphs (.asset)
├── Models/ → modèles 3D (.fbx, .obj)
├── Materials/ → matériaux et textures
├── StreamingAssets/ → images cibles Vuforia
└── UI/ → prefabs de panneaux UI

© ImmersivLearn 2025 | Page 9

Manuel Unity Visual Scripting (Bolt) + Vuforia AR | ImmersivLearn – DANHE SDK

Chapitre 3 – Interface et Éléments Fondamentaux

3.1 Ouvrir l'éditeur de graphes
L'éditeur visuel (Graph Editor) s'ouvre de plusieurs façons :

• Depuis l'Inspector : sélectionner un objet ayant un Script Machine → cliquer sur [Edit
Graph]
• Depuis le menu : [Window] → [Visual Scripting] → [Graph Inspector]
• Double-clic sur un fichier .asset de graphe dans le Project Window

3.2 Anatomie de l'éditeur de graphes

INTERFACE DE L'ÉDITEUR VISUAL SCRIPTING
┌────────────────────────────────────────────────────────────────────┐
│ TOOLBAR : [+Nœud] [Zoom In/Out] [Recenter] [Variables] [Debug] │
├──────────────────────────────────────────┬─────────────────────────┤
│ │ │
│ CANVAS (Zone de travail) │ GRAPH INSPECTOR │
│ │ (propriétés du nœud │
│ ┌──────────┐ ┌──────────────────┐ │ sélectionné) │
│ │ On Start │───►│ [Link] │ │ │
│ └──────────┘ └──────────────────┘ │ Variables Panel │
│ │ (Variables du graphe) │
│ [Clic droit → Fuzzy Finder] │ │
│ [Scroll molette → Zoom] │ │
│ [Alt + Drag → Navigation] │ │
└──────────────────────────────────────────┴─────────────────────────┘

3.3 Le Fuzzy Finder – Rechercher et ajouter des nœuds

Le Fuzzy Finder est le panneau de recherche qui s'ouvre par clic droit dans le canvas. Il donne
accès à tous les nœuds disponibles.

🔍 Utiliser le Fuzzy Finder efficacement

Clic droit dans le canvas → champ de recherche apparaît
Taper 'on' → filtre les événements (On Start, On Update, On Trigger Enter...)
Taper 'set active' → trouve SetActive() pour activer/désactiver un objet
Taper 'transform' → tous les nœuds liés à la position/rotation
Taper le nom d'une classe C# → ses méthodes apparaissent (ex: Rigidbody)
Navigation au clavier : ↑↓ pour parcourir, Entrée pour sélectionner

© ImmersivLearn 2025 | Page 10

Manuel Unity Visual Scripting (Bolt) + Vuforia AR | ImmersivLearn – DANHE SDK

3.4 Les nœuds – Types et couleurs

Chaque nœud dans Visual Scripting a une couleur qui indique son type. Apprendre ces codes
couleur est essentiel pour lire un graphe rapidement.

Couleur / Type de nœud Rôle et exemples

🟢 Vert – Événements Point de départ d'une séquence. Ex : On
Start, On Update, OnTargetFound
🔵 Bleu – Actions Effectuent une opération. Ex : SetActive,
[Link], [Link]
🟡 Jaune – Données / Getters Retournent une valeur. Ex :
[Link], [Link]
🔴 Rouge – Conditions / Branches If/Else, Switch, comparaisons logiques
🟣 Violet – Variables Get Variable, Set Variable (objet, scène,
graphe, app)
⬜ Blanc – Contrôle de flux Séquence, Loop (For, While), Wait for
Seconds

3.5 Les fils – Comprendre les connexions

Les fils sont les connexions entre nœuds. Il en existe deux catégories fondamentalement
différentes :

FILS BLANCS vs FILS COLORÉS

FILS BLANCS (Flux d'exécution) :
┌──────────────┐ ┌──────────────────┐
│ On Start │ ──────────── │ SetActive(true) │
└──────────────┘ └──────────────────┘
'Quand cet événement se produit, ENSUITE exécute cette action'

FILS COLORÉS (Données) :

┌──────────────────────┐ ┌───────────────────────┐
│ Get Variable │ │ [Link] │
│ 'vitesse' (float) │ ─────► │ direction (Vector3) │
└──────────────────────┘ └───────────────────────┘
'La valeur de 'vitesse' est utilisée comme paramètre de Translate'

Code couleur des fils de données :

Bleu clair → float (nombre décimal)
Vert → bool (vrai/faux)
Orange → string (texte)
Jaune → Vector3 (position 3D)
Rose/Rouge → GameObject (objet de la scène)

© ImmersivLearn 2025 | Page 11

Manuel Unity Visual Scripting (Bolt) + Vuforia AR | ImmersivLearn – DANHE SDK

Gris → object (type générique)

3.6 Le composant Script Machine

Pour qu'un objet Unity exécute un Flow Graph, il doit avoir un composant Script Machine. Voici
comment l'ajouter :

17. Sélectionner l'objet dans la Hierarchy

18. [Inspector] → [Add Component] → rechercher « Script Machine »
19. Dans le champ Source, deux options :

Source : Embed Source : Graph

Le graphe est stocké dans l'objet lui-même Le graphe est un fichier .asset réutilisable
Modifications non partagées Peut être assigné à plusieurs objets
Pratique pour des logiques uniques Recommandé pour des comportements
communs
Le graphe disparaît si l'objet est supprimé Le graphe persiste dans le projet

© ImmersivLearn 2025 | Page 12

Manuel Unity Visual Scripting (Bolt) + Vuforia AR | ImmersivLearn – DANHE SDK

Chapitre 4 – Flow Graph : Logique d'Exécution

Détaillée
4.1 Événements fondamentaux
Les événements sont les points d'entrée de tout Flow Graph. Sans événement, le graphe ne
s'exécute jamais. Voici les événements les plus utilisés :

Événement Quand se déclenche-t-il ?

On Start Une seule fois au démarrage de la scène
On Awake Avant On Start (initialisation)
On Update Chaque frame (60 fois/seconde typiquement)
On Fixed Update Chaque frame physique (50 fois/seconde
fixe)
On Enable / On Disable Quand le composant est activé/désactivé
On Destroy Quand l'objet est détruit
On Collision Enter Quand un collider touche un autre
On Trigger Enter Quand un trigger est traversé
On Pointer Click Quand l'utilisateur clique sur l'objet
(UI/EventSystem)
Custom Event Événement personnalisé déclenché depuis
un autre graphe

4.2 Nœuds d'action courants

Transform – Déplacer, Tourner, Redimensionner

[Link]
► ENTRÉES
→ Target: Transform
→ Translation: Vector3
→ Relative To: Space
◄ SORTIES
← (exécution continue)

Exemple : On Update → [Link](0, 0, 1 * [Link]) → déplace l'objet vers

l'avant en continu

© ImmersivLearn 2025 | Page 13

Manuel Unity Visual Scripting (Bolt) + Vuforia AR | ImmersivLearn – DANHE SDK

GameObject – Activer/Désactiver
[Link]
► ENTRÉES
→ Target: GameObject
→ Value: bool (vrai/faux)
◄ SORTIES
← (pas de sortie de données)

Utilisation courante : Montrer/cacher un objet 3D, un panneau UI, un effet de particules.

[Link] – Afficher dans la console

[Link]
► ENTRÉES
→ Message: object (texte ou valeur)
◄ SORTIES
← (pas de sortie de données)

Indispensable pour le débogage : branche un fil de données de n'importe quelle variable pour
voir sa valeur en console.

4.3 Conditions et branchements

Le nœud Branch (équivalent du if/else) est l'un des plus utilisés. Il dirige le flux selon une
condition booléenne.

NŒUD BRANCH – Logique conditionnelle

┌────────────────────────┐
│ Branch │
─── (flux entrant) ──►│ │──── True ────► (action si
vrai)
│ Condition: bool ──────│
─── (bool value) ────►│ │──── False ───► (action si
faux)
└────────────────────────┘

Exemple : vérifier si une variable 'isHeartVisible' est vraie

┌──────────────┐ ┌──────────────────────┐ True → ┌─────────────────┐

│ On Update │───►│ Branch │───────────►│ Rotate(0,30,0) │

© ImmersivLearn 2025 | Page 14

Manuel Unity Visual Scripting (Bolt) + Vuforia AR | ImmersivLearn – DANHE SDK

└──────────────┘ │ Get Var 'isVisible' │ False → (rien)

│
└──────────────────────┘
└─────────────────┘

4.4 Boucles et répétitions

Nœud de boucle Comportement
For Loop Répète N fois (index de 0 à N-1)
While Loop Répète tant qu'une condition est vraie
For Each Loop Itère sur chaque élément d'une liste
Wait For Seconds (coroutine) Pause l'exécution pendant X secondes

4.5 Passage de données avec les fils

Un des aspects les plus puissants de Visual Scripting est la capacité à chaîner des données.
Voici comment passer une valeur d'un nœud à l'autre :

CHAÎNE DE DONNÉES – Exemple concret

Objectif : récupérer la position X de l'objet, l'afficher dans la console

┌──────────────┐ ┌────────────────────────┐
┌──────────────────────────┐
│ On Update │──►│ [Link] │ │ [Link]
│
└──────────────┘ │ (Get) │──►│ Message: float (x)
│
└────────────────────────┘
└──────────────────────────┘
│ Vector3
▼
┌────────────────────────┐
│ Get Vector3.x │ ← extraire uniquement X
└────────────────────────┘

Règle : un port de sortie peut alimenter plusieurs ports d'entrée

Règle : un port d'entrée ne peut recevoir qu'un seul fil de données

© ImmersivLearn 2025 | Page 15

Manuel Unity Visual Scripting (Bolt) + Vuforia AR | ImmersivLearn – DANHE SDK

Chapitre 5 – State Graph : Machine à États

5.1 Concept de machine à états finis (FSM)
Un State Graph modélise les différents états d'un objet et les transitions entre ces états. C'est
idéal pour des comportements qui peuvent être dans un mode parmi plusieurs possibles.

Pour notre cas fil rouge du cœur interactif, on peut imaginer trois états : CACHÉ (avant
détection), VISIBLE (cœur affiché, rotation en cours), FOCUS (une partie anatomique est
sélectionnée et son panneau est affiché).

STATE GRAPH – Cœur 3D interactif

┌────────────────────────────────────────────────────────────┐
│ START │
└──────────────────────────┬─────────────────────────────────┘
│
▼
┌──────────────────────────────────────────────────────────────┐
│ ÉTAT 1 : CACHÉ (Hidden) │
│ On Enter → [Link](false) │
│ On Enter → [Link](false) │
└──────────────────────────┬───────────────────────────────────┘
│ Transition : OnTargetFound
▼
┌──────────────────────────────────────────────────────────────┐
│ ÉTAT 2 : VISIBLE (Heart Rotating) │
│ On Enter → [Link](true) + PlayAnimation │
│ On Update → Rotate(0, 30*[Link], 0) │
│ On Exit → StopAnimation │
└───────┬──────────────────────────────────────────────────────┘
│ Transition: OnPartClicked │ Transition: OnTargetLost
▼ ▼ (retour vers CACHÉ)
┌────────────────────────────────┐
│ ÉTAT 3 : FOCUS (Info Panel) │
│ On Enter → ShowPanel(partName)│
│ On Enter → PauseRotation │
│ On Exit → HidePanel │
└────────────────────────────────┘
│ Transition: OnCloseButton → retour vers VISIBLE

5.2 Créer un State Graph

20. [Project Window] → [Create] → [Visual Scripting] → [State Graph]
21. Nommez-le (ex : HeartStateGraph)
22. Sur votre objet, [Add Component] → « State Machine »
23. Faites glisser le fichier de graphe dans le champ Graph

© ImmersivLearn 2025 | Page 16

Manuel Unity Visual Scripting (Bolt) + Vuforia AR | ImmersivLearn – DANHE SDK

24. Ouvrez le graphe pour l'éditer

5.3 Créer des états et des transitions

Dans l'éditeur de State Graph :

25. Créer un état : Clic droit → [Create Script State] → nommez-le

26. Définir l'état Start : Clic droit sur l'état → [Set as Start]
27. Créer une transition : Survolez le bord d'un état → apparaît un port vert → faites glisser
vers l'état destination
28. Configurer la transition : cliquez sur la flèche de transition → dans l'Inspector, ajoutez
la condition (nœud)

💡 Script State vs Super State

Script State : un état simple qui contient un Flow Graph interne (On Enter, On Update, On
Exit)
Super State : un état qui contient un autre State Graph entier – utile pour les
comportements imbriqués
Any State : transition pouvant partir de n'importe quel état (ex : retour au menu depuis
n'importe où)

© ImmersivLearn 2025 | Page 17

Manuel Unity Visual Scripting (Bolt) + Vuforia AR | ImmersivLearn – DANHE SDK

Chapitre 6 – Variables et Données

6.1 Les cinq portées de variables
Bolt distingue cinq niveaux de portée pour les variables. Choisir la bonne portée est crucial pour
la lisibilité et les performances.

Portée de variable Durée de vie et accès

Graph Variable Locale au graphe courant – la plus rapide
Object Variable Liée à l'objet (GameObject) – accessible
depuis d'autres graphes via une référence
Scene Variable Partagée entre tous les objets de la scène –
réinitialisée au chargement
App Variable Partagée dans toute l'application – persiste
entre les scènes
Saved Variable Persistante entre les sessions (PlayerPrefs
Unity)

6.2 Déclarer et utiliser une variable

Exemple concret : stocker le nom de la partie anatomique cliquée pour l'afficher dans un
panneau.

29. Dans le panneau Variables (onglet du Graph Editor) → onglet Object

30. Cliquez sur [+] → nommez la variable : selectedPart
31. Choisissez le type : String
32. Valeur par défaut : laisser vide

UTILISATION D'UNE VARIABLE – Set et Get

SET (écriture) :
┌──────────────────┐ ┌──────────────────────────────────────┐
│ On Pointer Click │───►│ Set Object Variable 'selectedPart' │
└──────────────────┘ │ Value: 'Ventricule Gauche' (string) ─┤
└──────────────────────────────────────┘

GET (lecture) :
┌──────────────────┐ ┌──────────────────────────────────────┐
┌─────────────────────┐
│ On Start │───►│ Get Object Variable 'selectedPart' │───►│
[Link] = value │
└──────────────────┘ └──────────────────────────────────────┘

© ImmersivLearn 2025 | Page 18

Manuel Unity Visual Scripting (Bolt) + Vuforia AR | ImmersivLearn – DANHE SDK

└─────────────────────┘
│ string
▼
(valeur disponible pour les nœuds suivants)

6.3 Types de données courants

Type Utilisation typique dans un projet AR
Boolean (bool) isHeartVisible, isInfoPanelOpen,
hasBeenClicked
Float vitesseRotation, opacite, timer
Integer nombreDeClics, indexDeLaPartie
String nomDeLaPartie, descriptionAnatomique
GameObject Référence à un objet de la scène (le cœur,
un panneau)
Vector3 Position, rotation, échelle
Color Couleur de surbrillance d'une partie
anatomique

© ImmersivLearn 2025 | Page 19

Manuel Unity Visual Scripting (Bolt) + Vuforia AR | ImmersivLearn – DANHE SDK

Chapitre 7 – Intégration Vuforia AR avec Visual

Scripting
7.1 Architecture d'une scène AR Vuforia
Une scène AR Vuforia standard est composée de trois objets principaux :

HIÉRARCHIE D'UNE SCÈNE VUFORIA

Scene
├── AR Camera ← remplace la Camera classique
│ └── Composants: ARCamera, VuforiaBehaviour
│
└── Image Target ← contient la cible image (schéma du cœur)
├── Composants: ImageTargetBehaviour, DefaultObserverEventHandler
└── HeartModel (enfant) ← le modèle 3D activé lors de la détection
├── Ventricule_Gauche (enfant avec collider cliquable)
├── Ventricule_Droit
├── Aorte
└── Oreillette_Gauche

Canvas (UI)
└── InfoPanel
├── TitleText
├── DescriptionText
└── CloseButton

7.2 Configurer l'Image Target

33. Dans Vuforia Developer Portal → [Target Manager] → [Add Target]
34. Uploadez votre image (le schéma anatomique du cœur) → choisissez Single Image
35. Téléchargez la base de données (.unitypackage) générée
36. Importez-la dans Unity : double-clic sur le .unitypackage
37. Dans la scène : [GameObject] → [Vuforia Engine] → [Image Target]
38. Dans l'Inspector de l'Image Target : Database → votre base, Image Target → votre
image

7.3 Les événements Vuforia dans Visual Scripting

Le composant DefaultObserverEventHandler expose des événements que vous pouvez
capturer dans un Flow Graph. Pour les utiliser :

39. Sélectionnez l'Image Target → [Add Component] → Script Machine

© ImmersivLearn 2025 | Page 20

Manuel Unity Visual Scripting (Bolt) + Vuforia AR | ImmersivLearn – DANHE SDK

40. Créez un Flow Graph et assignez-le

41. Dans le graphe : Clic droit → cherchez « On Tracking Found » ou « Observer Event »

Événement Vuforia Description

On Target Found / On Tracking Found L'image est détectée par la caméra
On Target Lost / On Tracking Lost L'image n'est plus visible
On Tracking Status Changed L'état de suivi change (utile pour animations
de transition)

⚠ Méthode alternative – via Custom Event

Si les événements Vuforia ne sont pas directement disponibles dans le Fuzzy Finder,
créez un script C# minimal qui déclenche un Custom Event vers Visual Scripting :

using [Link];
public class VuforiaEvents : DefaultObserverEventHandler {
protected override void OnTrackingFound() {
[Link]("OnTargetFound", gameObject);
}
protected override void OnTrackingLost() {
[Link]("OnTargetLost", gameObject);
}
}

Puis dans le Flow Graph : utilisez le nœud Custom Event 'OnTargetFound'

7.4 Flow Graph de base : Afficher/Cacher le modèle 3D

Voici la logique minimale pour qu'un objet 3D apparaisse lors de la détection :

FLOW GRAPH : OnTargetFound → ShowHeart

┌───────────────────────────┐
│ Custom Event │
│ Name: 'OnTargetFound' │──────►
┌──────────────────────────────────────────┐
└───────────────────────────┘ │ Set GameObject Active
│
│ Target: [HeartModel] (GameObject
ref) │
│ Value: true
│

└──────────────────────────────────────────┘

© ImmersivLearn 2025 | Page 21

Manuel Unity Visual Scripting (Bolt) + Vuforia AR | ImmersivLearn – DANHE SDK

┌───────────────────────────┐
│ Custom Event │
│ Name: 'OnTargetLost' │──────►
┌──────────────────────────────────────────┐
└───────────────────────────┘ │ Set GameObject Active
│
│ Target: [HeartModel]
│
│ Value: false
│

└──────────────────────────────────────────┘

© ImmersivLearn 2025 | Page 22

Manuel Unity Visual Scripting (Bolt) + Vuforia AR | ImmersivLearn – DANHE SDK

Chapitre 8 – Projet Fil Rouge : Cœur 3D Interactif

Complet
Ce chapitre construit pas à pas l'expérience AR complète. Chaque section correspond à une
étape de construction que vous pouvez suivre directement dans Unity.

🫀 Description du projet final

L'utilisateur pointe sa caméra vers un schéma anatomique imprimé du cœur.
Un modèle 3D du cœur apparaît ancré sur le schéma, avec une animation de rotation
douce.
Chaque partie anatomique (Ventricule Gauche, Ventricule Droit, Aorte, Oreillette Gauche,
Oreillette Droite, Artère Pulmonaire) est cliquable.
Un clic ouvre un panneau UI avec le nom de la partie et sa description anatomique.
Un bouton 'Fermer' renvoie à la vue générale du cœur tournant.

8.1 Étape 1 – Préparer la scène

42. Supprimer la Main Camera par défaut
43. Ajouter l'AR Camera Vuforia : [GameObject] → [Vuforia Engine] → [AR Camera]
44. Ajouter l'Image Target : [GameObject] → [Vuforia Engine] → [Image Target]
45. Configurer l'Image Target avec votre base de données (voir Chapitre 7.2)
46. Importer votre modèle 3D de cœur dans Assets/Models/
47. Faire glisser le modèle comme enfant de l'Image Target dans la Hierarchy
48. Nommer l'objet : HeartModel – Position : (0, 0.1, 0) – Scale : (0.3, 0.3, 0.3)

8.2 Étape 2 – Rendre les parties cliquables

Chaque partie anatomique doit avoir deux composants pour être détectable au clic : un Mesh
Collider et un Event Trigger (ou utiliser l'approche Raycast dans le Flow Graph).

49. Sélectionner la partie 'Ventricule_Gauche' dans la Hierarchy

50. [Add Component] → Mesh Collider (cocher Convex si le mesh est complexe)
51. [Add Component] → Script Machine → créer un Flow Graph 'PartClickGraph'
52. Dans le Flow Graph, ajouter : On Pointer Click → Custom Event Trigger →
'OnPartClicked'
53. Dans les Variables du Script Machine, ajouter une Object Variable : partName (String) =
'Ventricule Gauche'
54. Répéter pour chaque partie anatomique avec son propre partName

© ImmersivLearn 2025 | Page 23

Manuel Unity Visual Scripting (Bolt) + Vuforia AR | ImmersivLearn – DANHE SDK

FLOW GRAPH : PartClickGraph (sur chaque partie anatomique)

┌──────────────────────┐
│ On Pointer Click │
│ (Event Trigger)
│───►┌──────────────────────────────────────────────────┐
└──────────────────────┘ │ Set Scene Variable 'selectedPart'
│
│ Value: Get Object Variable 'partName'
(string) ─┤

└──────────────────────────────┬───────────────────┘
│
▼

┌──────────────────────────────────────────────────┐
│ Custom Event Trigger
│
│ Name: 'OnPartClicked'
│
│ Target: Image Target GameObject (référence)
│

└──────────────────────────────────────────────────┘

8.3 Étape 3 – Créer l'UI Panel d'information

55. Dans la Hierarchy : [Create] → [UI] → [Canvas] (si pas déjà présent)
56. Dans le Canvas : [Create] → [UI] → [Panel] → nommer InfoPanel
57. Ajouter dans InfoPanel :
◦ UI → Text (TMP) nommé PartTitle – Ancre : haut, centre
◦ UI → Text (TMP) nommé PartDescription – Ancre : centre
◦ UI → Button nommé CloseButton avec texte 'Fermer'
58. Désactiver InfoPanel par défaut : décocher la case en haut de l'Inspector

8.4 Étape 4 – Flow Graph principal (sur l'Image Target)

Ce graphe gère toute la logique de coordination : affichage du cœur, ouverture des panneaux,
fermeture.

FLOW GRAPH PRINCIPAL – HeartARController (sur Image Target)

┌────────────────────────┐
│ On Start │──► Set Active HeartModel: false
└────────────────────────┘──► Set Active InfoPanel: false

┌────────────────────────┐
│ Custom Event │──► Set Active HeartModel: true
│ 'OnTargetFound' │──► Play Animation 'HeartIdle'

© ImmersivLearn 2025 | Page 24

Manuel Unity Visual Scripting (Bolt) + Vuforia AR | ImmersivLearn – DANHE SDK

└────────────────────────┘

┌────────────────────────┐
│ Custom Event │──► Set Active HeartModel: false
│ 'OnTargetLost' │──► Set Active InfoPanel: false
└────────────────────────┘

┌────────────────────────┐
│ Custom Event │──► Get Scene Var 'selectedPart' (string)
│ 'OnPartClicked' │ │
└────────────────────────┘ ▼

┌────────────────────────────────────────────────┐
│ Set Text 'PartTitle'.text = selectedPart
│

└─────────────────────┬──────────────────────────┘
│
▼

┌────────────────────────────────────────────────┐
│ Get Description from Dictionary
│
│ (Scene Var 'descriptions',
key=selectedPart) │

└─────────────────────┬──────────────────────────┘
│
▼

┌────────────────────────────────────────────────┐
│ Set Text 'PartDescription'.text = result
│
│ Set Active InfoPanel: true
│

└────────────────────────────────────────────────┘

8.5 Étape 5 – Bouton Fermer et effet de surbrillance

Le bouton Fermer doit remettre le cœur en mode rotation et cacher le panneau :

FLOW GRAPH : CloseButton (sur le bouton UI)

┌──────────────────────────┐
│ On Button Click │──► Set Active InfoPanel: false
│ (UI [Link]) │──► Custom Event 'OnPanelClosed' (vers Image
Target)
└──────────────────────────┘

Dans le Flow Graph principal (réception) :

┌──────────────────────────┐
│ Custom Event │──► Resume Animation 'HeartIdle'
│ 'OnPanelClosed' │

© ImmersivLearn 2025 | Page 25

Manuel Unity Visual Scripting (Bolt) + Vuforia AR | ImmersivLearn – DANHE SDK

└──────────────────────────┘

8.6 Étape 6 – Animation de rotation continue

Pour faire tourner le cœur en continu quand il est visible, utilisez On Update dans le Flow Graph
principal :

FLOW GRAPH : Rotation continue du cœur

┌──────────────────────┐ ┌─────────────────────┐
┌────────────────────────────────┐
│ On Update │───►│ Branch │ │ [Link]
│
└──────────────────────┘ │ isHeartVisible: ───│───►│ HeartModel
│
│ (Object Var bool) │ │ Euler Angles:
(0, 30*dt, 0) │
└─────────────────────┘
└────────────────────────────────┘
│ False → (rien)

Pour obtenir 30*dt :

┌──────────────────────┐ ┌───────────────────────┐
┌──────────────────────┐
│ Literal Float: 30 │───►│ Multiply (float) │───►│ New Vector3
│
└──────────────────────┘ │ │ │ X:0 Y:result
Z:0 │
┌──────────────────────┐ │ │
└──────────────────────┘
│ [Link] │───►│ │
└──────────────────────┘ └───────────────────────┘

© ImmersivLearn 2025 | Page 26

Manuel Unity Visual Scripting (Bolt) + Vuforia AR | ImmersivLearn – DANHE SDK

Chapitre 9 – Interface Utilisateur, Textes et

Panneaux
9.1 TextMeshPro dans les nœuds Visual Scripting
Unity recommande TextMeshPro (TMP) pour tous les textes UI. Dans Visual Scripting, voici
comment modifier un texte TMP :

59. Créez une Object Variable de type TMPro.TMP_Text (ou assignez la référence
directement)
60. Dans le Fuzzy Finder : cherchez « TMP [Link] » → nœud Set
61. Branchez un fil String depuis votre variable vers l'entrée text

⚠ Activer TMPro dans Visual Scripting

Si TMP_Text n'apparaît pas dans le Fuzzy Finder :
Edit → Project Settings → Visual Scripting → Type Options
Cliquez [+] et ajoutez : TMPro.TMP_Text et [Link]
Cliquez [Regenerate Nodes] pour mettre à jour la base de nœuds

9.2 Animations d'UI – Apparition et disparition

Pour une meilleure expérience, faites apparaître le panneau en fondu plutôt qu'instantanément.
Voici une approche avec CanvasGroup :

62. Ajoutez un composant CanvasGroup sur InfoPanel

63. Dans le Flow Graph : utilisez un nœud While Loop ou Coroutine pour animer Alpha de 0
à1

ANIMATION ALPHA – Fade In du panneau (pseudo-graphe)

┌────────────────────────┐
│ Custom Event │──► Set [Link] = 0
│ 'ShowPanel' │──► Set GameObject Active = true
└────────────────────────┘
│
▼
┌────────────────────────────────────────────────────┐
│ While Loop │
│ Condition: [Link] < 1.0 │
│ Body: Set alpha = alpha + ([Link] * fadeSpeed) │
└────────────────────────────────────────────────────┘
│ (sortie quand alpha >= 1)

© ImmersivLearn 2025 | Page 27

Manuel Unity Visual Scripting (Bolt) + Vuforia AR | ImmersivLearn – DANHE SDK

▼
(fin de l'animation)

© ImmersivLearn 2025 | Page 28

Manuel Unity Visual Scripting (Bolt) + Vuforia AR | ImmersivLearn – DANHE SDK

Chapitre 10 – Débogage et Bonnes Pratiques

10.1 Le mode Debug en temps réel
Unity Visual Scripting offre un débogueur visuel puissant. En mode Play, les fils actifs
s'illuminent en temps réel.

Fonctionnalité de débogage Comment l'utiliser

Fils en surbrillance En mode Play, les fils blancs actifs
deviennent verts – visualisation du flux en
direct
Valeurs sur les fils Survolez un fil en mode Play → la valeur
actuelle s'affiche en tooltip
Points d'arrêt Clic droit sur un nœud → Add Breakpoint –
pause l'exécution à ce nœud
Console [Link] Indispensable – connectez vos variables à
[Link] pour inspecter leur valeur
Inspect Variables Fenêtre Variables du Graph Editor – affiche
les valeurs en temps réel en mode Play

10.2 Erreurs courantes et solutions

Erreur / Symptôme Cause et solution
NullReferenceException Une référence GameObject est vide. Vérifiez
que toutes vos variables Object sont
assignées dans l'Inspector
Nœud 'Missing' Un type ou méthode n'est plus dans la base
de nœuds. Allez dans Project Settings →
Visual Scripting → Regenerate Nodes
L'objet ne s'active pas Vérifiez que la cible du nœud SetActive est
bien l'objet attendu, pas null
Custom Event non reçu Le nom de l'événement (sensible à la casse)
doit être identique dans le Trigger et dans le
Receiver
Vuforia ne détecte pas Vérifiez la clé API, la qualité de l'image cible
(rating ≥ 3 étoiles sur Vuforia portal), et
l'éclairage
Rotation trop rapide/lente Multipliez toujours par [Link] pour
indépendance du framerate

© ImmersivLearn 2025 | Page 29

Manuel Unity Visual Scripting (Bolt) + Vuforia AR | ImmersivLearn – DANHE SDK

10.3 Bonnes pratiques d'organisation

✅ Règles d'or pour des graphes maintenables
1. Nommez tout : variables, états, événements – jamais de 'New Variable 1'
2. Utilisez des groupes (Clic droit → Create Group) pour regrouper les nœuds logiquement
3. Ajoutez des Sticky Notes (Clic droit → Create Sticky Note) pour documenter
4. Maximum 20-30 nœuds par graphe – divisez si plus grand
5. Préférez les Custom Events aux dépendances directes pour découpler les graphes
6. Utilisez Graph Variables pour les données locales, Scene Variables pour le partage
7. Testez chaque graphe individuellement avant de les connecter
8. Versionner vos graphes (.asset) dans Git comme tout autre asset

© ImmersivLearn 2025 | Page 30

Manuel Unity Visual Scripting (Bolt) + Vuforia AR | ImmersivLearn – DANHE SDK

Chapitre 11 – Exercices et Défis Pratiques

Ces exercices progressifs vous permettent de valider chaque concept du manuel. Ils sont
classés par niveau de difficulté.

Exercices de niveau 1 – Fondamentaux

✎ Exercice 1 : Hello AR World

Créer votre premier Flow Graph qui affiche un message dans la console.
Étapes :
1. Créer un nouveau projet Unity 3D
2. Créer un cube dans la scène et lui ajouter un Script Machine
3. Créer un Flow Graph avec On Start → [Link]
4. Dans le nœud [Link], brancher un Literal String : 'Bonjour Visual Scripting !'
5. Lancer la scène et vérifier le message dans la Console
Résultat attendu :

✎ Exercice 2 : Objet clignotant

Faire clignoter un objet (actif/inactif toutes les secondes) avec un timer.
Étapes :
6. Créer un Cube et lui ajouter un Script Machine
7. Déclarer une Graph Variable 'timer' de type Float, valeur 0
8. Dans On Update : incrémenter timer avec [Link]
9. Ajouter un Branch : si timer >= 1.0 → Toggle Active + remettre timer à 0
10. Tester en mode Play
Résultat attendu :

Exercices de niveau 2 – Interactivité

✎ Exercice 3 : Objet cliquable avec couleur

Changer la couleur d'un objet selon le nombre de clics.
Étapes :

© ImmersivLearn 2025 | Page 31

Manuel Unity Visual Scripting (Bolt) + Vuforia AR | ImmersivLearn – DANHE SDK

11. Créer une sphère avec un Mesh Collider et un Script Machine

12. Déclarer une Object Variable 'clickCount' de type Integer
13. Sur On Pointer Click : incrémenter clickCount
14. Après l'incrémentation : Branch sur (clickCount % 3)
15. Cas 0 → [Link] = Rouge ; Cas 1 → Vert ; Cas 2 → Bleu
16. Tester les 3 clics
Résultat attendu :

✎ Exercice 4 : Panneau d'information UI

Créer un panneau TMP qui s'affiche/se cache par clic.
Étapes :
17. Créer un Canvas avec un Panel (InfoPanel) contenant un TMP Text
18. Désactiver InfoPanel par défaut
19. Créer un Button 'Voir Info' dans la scène
20. Flow Graph sur le bouton : On Button Click → Toggle Active de InfoPanel
21. Dans InfoPanel, ajouter un bouton 'Fermer' → On Click → SetActive(false) sur
InfoPanel
22. Vérifier que le texte TMP affiche une information quelconque
Résultat attendu :

Exercices de niveau 3 – AR Vuforia

✎ Exercice 5 : Premier objet AR

Faire apparaître un cube 3D au-dessus d'une image détectée.
Étapes :
23. Configurer une scène Vuforia avec AR Camera et Image Target
24. Ajouter un cube comme enfant de l'Image Target, désactivé par défaut
25. Créer le script C# VuforiaEvents (voir Chapitre 7.3) ou utiliser
DefaultObserverEventHandler
26. Sur l'Image Target : Flow Graph avec Custom Event 'OnTargetFound' →
SetActive(cube, true)
27. Custom Event 'OnTargetLost' → SetActive(cube, false)
28. Tester avec la caméra pointée sur l'image
Résultat attendu :

✎ Exercice 6 : State Graph AR avec 3 états

© ImmersivLearn 2025 | Page 32

Manuel Unity Visual Scripting (Bolt) + Vuforia AR | ImmersivLearn – DANHE SDK

Implémenter la machine à états complète du Chapitre 5 pour le cœur AR.

Étapes :
29. Créer un State Graph avec 3 états : CACHÉ, VISIBLE, FOCUS
30. État CACHÉ (Start) : On Enter → désactiver HeartModel et InfoPanel
31. Transition CACHÉ → VISIBLE : Custom Event 'OnTargetFound'
32. État VISIBLE : On Enter → activer HeartModel, On Update → rotation
33. Transition VISIBLE → CACHÉ : Custom Event 'OnTargetLost'
34. Transition VISIBLE → FOCUS : Custom Event 'OnPartClicked'
35. État FOCUS : On Enter → activer InfoPanel avec les infos de la partie
36. Transition FOCUS → VISIBLE : Custom Event 'OnPanelClosed'
Résultat attendu :

Défi Final – Projet complet

✎ Exercice 7 : Cœur 3D Interactif Complet
Assembler tous les concepts pour réaliser le projet fil rouge en entier.
Étapes :
37. Implémenter toutes les étapes du Chapitre 8 (8.1 à 8.6)
38. Au minimum 4 parties anatomiques cliquables avec leurs descriptions
39. Panneau UI animé (fade in/out) pour les informations
40. Rotation continue du cœur quand visible, pause quand un panneau est ouvert
41. Gestion correcte de la perte de cible (tout se cache)
42. BONUS : ajouter un effet de surbrillance (changement de matériau) sur la partie
survolée
43. BONUS : ajouter une narration audio (AudioSource) déclenchée par Custom Event
44. BONUS : ajouter un State Graph pour gérer les transitions d'animation
Résultat attendu :

© ImmersivLearn 2025 | Page 33

Manuel Unity Visual Scripting (Bolt) + Vuforia AR | ImmersivLearn – DANHE SDK

Annexes
A. Glossaire Visual Scripting
Terme Définition
Flow Graph (Script Graph) Graphe de logique événementielle et
séquentielle
State Graph Graphe de machine à états finis (FSM)
Nœud (Node) Bloc visuel représentant une action,
événement ou donnée
Fil blanc Connexion de flux d'exécution (ordre des
opérations)
Fil coloré Connexion de données (transporte une
valeur)
Port Point de connexion d'un nœud (entrée ou
sortie)
Fuzzy Finder Panneau de recherche de nœuds (clic droit
dans le canvas)
Custom Event Événement personnalisé pouvant être
déclenché depuis n'importe quel graphe
Script Machine Composant Unity qui héberge un Flow Graph
State Machine Composant Unity qui héberge un State
Graph
Graph Variable Variable locale au graphe
Object Variable Variable liée à un GameObject spécifique
Scene Variable Variable partagée dans toute la scène
Image Target Objet Vuforia représentant l'image à détecter
OnTargetFound Événement Vuforia déclenché lors de la
détection d'une image

B. Ressources complémentaires
• Documentation officielle Unity : [Link]
• Vuforia Developer Portal : [Link]
• Chaîne YouTube Unity Learn : Unity Learning (Visual Scripting tutorials)
• Asset Store : Modèles 3D anatomiques cardiaques (rechercher 'heart anatomy 3D')

© ImmersivLearn 2025 | Page 34

Manuel Unity Visual Scripting (Bolt) + Vuforia AR | ImmersivLearn – DANHE SDK

• Masakhane API : [Link] – Pour l'intégration

multilingue africaine (Éwé, Kabyè)

C. Raccourcis clavier de l'éditeur Visual Scripting

Raccourci Action
Clic droit dans le canvas Ouvrir le Fuzzy Finder
Alt + Drag / Clic molette + Drag Naviguer dans le canvas
Scroll molette Zoom in / Zoom out
F (avec nœud sélectionné) Centrer la vue sur le nœud
A Afficher tous les nœuds du graphe
Ctrl+Z Annuler la dernière action
Ctrl+D Dupliquer le nœud sélectionné
Delete / Backspace Supprimer le nœud ou fil sélectionné
Espace (dans fuzzy finder) Parcourir les catégories

Manuel réalisé pour ImmersivLearn – DANHE SDK | Lomé, Togo | 2025

© ImmersivLearn 2025 | Page 35