[[Développement VR Unity]] # Créer une interface utilisateur Pour créer une interface utilisateur, créez un **Canvas :** **Clic droit** dans la **hierarchy** > **UI > Canvas** Dans l'inspector, mettre le **Render Mode** du Canva en **World Space** pour que le canva s'affiche dans l'espace et non sur l'écran du joueur. ![[Code et Développement/Développement d'Applications/Développement VR Unity/ressources/image (1) (6).png]] Changez sa taille suivant ces paramètres pour que le Canvas soit plus petit (on le redimensionnera bien par la suite, ici c'est surtout pour facilité la mise en forme) : ![[image (10) (2).png]] Créez une image qui servira de fond aux textes, **Clic droit sur Canvas > UI > Image** ![[createimg.gif]] ![[Capture décran 2025-07-16 091107.png]] Changez sa taille et sa position dans l'Inspector suivant ces paramètres : ![[Code et Développement/Développement d'Applications/Développement VR Unity/ressources/image (2) (5).png]] Changez sa taille et sa position dans l'Inspector suivant ces paramètres : ![[image (3) (4).png]] Changez la taille de la typographie dans l'inspector en suivant ces paramètres : ![[image (4) (4).png]] Changez le texte ici : ![[image (8) (3).png]] Maintenant, il faut créer une interaction pour afficher/cacher le panneau. Tout d'abord, il faut convertir le **Canvas** pour pouvoir intéragir avec : **clic droit sur le Canvas > Interaction SDK > Add Ray Interaction to Canvas** ![[interactionSDK.gif]] Une fenêtre s'ouvre, cliquez sur **Fix** puis sur **Create** ![[Capture décran 2025-07-16 100226.png]] **Attention** si le joueur est derrière le panneau, il ne pourra pas cliquer sur les boutons. Créez un bouton pour fermer le panneau : **clic droit sur l'Image > UI > Button - TextMeshPro.** Modifiez a taille avec les paramètres suivants : ![[Capture décran 2025-07-16 101511.png]] Positionnez le bouton dans un coin du panneau. Modifiez l'image bouton pour la remplacer par [cette image](https://www.flaticon.com/fr/icone-gratuite/marque-de-croix_4225638?term=fermer&page=1&position=11&origin=search&related_id=4225638). Créez un dossier **UI** et importez l'image dedans. Cliquez sur l'image de la croix, dans l'inspector, modifiez le **Texture type** en **Sprite (2D and UI)** ainsi que le **Sprite Mode** en **Single** : ![[Capture décran 2025-07-16 101113.png]] ![[Capture décran 2025-07-16 101355.png]] Ensuite sélectionnez le bouton dans la Hierarchy et glissez déposez l'image de croix dans le **Source Image** : ![[crossdrop.gif]] vous devriez avoir ce résultat : ![[Capture décran 2025-07-16 101955.png]] Pour ajouter l'interaction, dans les composants du **Button**, vous trouvez une partie qui s'appelle **OnClick().** Cliquez sur le **+** et **glissez déposez l'Image** depuis la Hierarchy dans **None (Object)**. Changez **No Function** par **GameObject > SetActive(bool)** ![[setactivebutton.gif]]  Dupliquez le bouton avec **Ctrl+D** et mettez le en enfant du **Canvas** :  ![[ctrlDbutton.gif]] Sur l'instance que vous avez mis en enfant du **Canvas,** dans la partie **OnClick()** cochez la case à côté de **Image** pour que le panneau s'affiche lorsqu'on appuie sur le buton : ![[Capture décran 2025-07-16 103720.png]] Placez l'instance sous le panneau : ![[Capture décran 2025-07-16 103748.png]] Désactivez l'objet **Image** qui constitue le panneau pour qu'il ne soit pas affiché dès le début : ![[image (9) (2).png]] ![[Capture décran 2025-07-16 104556.png]] Le panneau est peut être encore trop grad, pour changer la taille sélectionnez le **Canvas** et utilisez **S** : ![[Code et Développement/Développement d'Applications/Développement VR Unity/ressources/scale.gif]] Voilà le résultat final que vous devriez obtenir : ![[finalResult.gif]] **Ctrl+S** [[11. Faire apparaitre des objets]] ---