[UI] How to monter une UI

Tous les tutoriaux unity, de la communauté ou d'ailleurs.
Avatar de l’utilisateur
Iwa
Messages : 1131
Inscription : 25 Avr 2012 16:20
Contact :

[UI] How to monter une UI

Message par Iwa » 17 Juil 2017 12:29

Hello à tous,

Je viens juste de perdre tout ce que je venais de vous écrire sur comment créer une UI. Du coup je recommence un peu dépitée alors ce sera moins drôle que tout à l'heure. J'en suis navrée mais le forum m'a déconnecté et j'ai touuuuuut perdu :(.

Bref, donc on va parler de comment monter une UI aujourd'hui, ce sera en plusieurs étapes et c'est sûrement pas les meilleures UI du monde entier que je fais mais elles ont le mérite pour le moment de satisfaire mes clients.

je ne vais pas vous expliquer comment faire une UI, ni comment devenir graphiste ou autre. C'est plein de métiers compliqués et passionnant mais nous on fait du Unity! Alors tentons de rendre grâce à notre ami l'infographiste qui fait de belles interfaces qui vont nous arracher les cheveux. Dites vous, que lui aussi s'est arraché les cheveux!

Pour le bien capillaire de toute monde voici donc la première étape du tuto, passer d'un beau design en image à Unity.

1- De l'image à Unity

Notre sujet d'étude sera le suivant :

Image

Créez des rendus des écrans principaux de votre application et mettez-les dans un dossier 2D dans les Assets de votre projet Unity. Ouvrez le projet et sélectionnez vos écrans dans l'onglet Project. Changez le paramètre Texture Type en Sprite (2d and UI). Ainsi, on pourra s'en servir plus tard.

Le but de ses écrans est d'être guider sur les proportions de chaque élément.

Créez une scène pour votre UI et crée une Image. Cela créé automatiquement un Canvas global que nous allons setter comme suit :

Image

Le component Canvas est en Screen Space - Overlay. C'est le paramètre de base et ça permet de couvrir tout l'écran. Ensuite le Canvas Scaler doit être en Scale with screen size. Ca permettra de rendre votre interface adaptable.

:!: ATTENTION! Cette méthode ne fonctionne que dans une seule orientation. Je bloque toujours mon application dans l'une ou l'autre des orientations. Si vous devez pouvoir basculez entre Portrait et Paysage, bon courage :D!

Donc à présent, notre écran s'adapte! Parfait! Mais nous devons encore préciser la résolution de référence que nous avons donner à nos interfaces guide. Mettons que notre interface ait été designé par notre graphiste en 1920*1080, à ce moment là, mes guides sont également en 1920*1080 et donc je vais mettre comme résolution de référence 1920*1080 (oui ici c'est écrit 2048*1536 mais on s'en fiche, vous êtes grand pour changer les chiffres tout seul :P).

Maintenant que tout va bien s'adapter si on bosse bien, revenons à notre image guide (ou de référence).
Petit conseil vite fait sur le gaz : mettez vous en mode "2D" dans l'onglet Scene que ce soit plus pratique ;).

Sélectionnez dans votre hiérarchie votre image qui fait 100*100 et est centré au milieu du Canvas. Mettez dans le sprite l'image de référence sur laquelle vous allez travailler. Nous allons l'étendre pour qu'elle prenne tout le Canvas en allant sur cette icône
Image
puis maintenez Alt et cliquez sur le bouton tout en bas à droite
Image.
Ensuite mettez votre image dans le paramètre Source image du component et cocher Preserve Aspect au cas où!

Vous êtes fin prêt!

2- De la référence à la vraie vie virtuelle

A présent que votre image prend tout votre projet vous en êtes à vous demandez la prochaine étape. Il va falloir découper dans votre tête, l'interface que vous voyez. Pour notre exemple, voici ce que ça donne :

Première découpe :

Image

Seconde découpe :

Image

Vous voyez l'idée, on fait en partie puis sous partie et à chaque fois cela créé un noeud de hiérarchie.

Voilà l'idée du nommage pour les premiers nœud direct du Canvas global.

Image

Voici ensuite les enfants de ses premiers nœuds :

Image

On obtient donc la hiérarchie suivante :

Image

Je ne fais pas toute les découpes et sous découpes qu'il faudrait faire pour éviter d'avoir une image surchargée mais vous comprenez l'idée : divisez pour mieux s'adapter!

Et maintenant que vous avez créer vos objets nous allons pouvoir les dimensionner. Rien de plus facile : Sélectionnez les ancres de chaque objet et déplacez les aux limites de ce qui les concerne (je sais pas comment l'écrire alors voici l'exemple :

Image

Ensuite mettez les paramètres du RectTransform en 0,0,X,0 (je ne touche jamais à la depth, je la laisse à 0). Ajoutez un composant Image et voici ce que nous obtenons :

Image.

Magnifique n'est-ce pas! Répetez cette étape pour chaque partie et sous parties de votre interface.
Autre petit conseil : pour le moment ne mettez pas d'image ou alors mettez une couleur transparente que vous puissiez voir votre guide ;).

Attention, vos ancres doivent se "coller" entre elles. Elles sont magnétiques, donc chaque grosse partie doit coller à ses voisines comme on le voit bien ici :

Image

Voilà, c'est tout pour cette première partie de tuto. La suite une prochaine fois pour allez plus en détail sur les trucs et astuces du Colonnel Moutarde dans la Véranda avec un Chandelier!
"N'est stupide que la stupidité Monsieur..." - Forest Gump
... sauf si tu lis pas ça :)

Si tu as tout ce qu'il te faut, merci de penser à basculer ton sujet en [RESOLU] en éditant ton tout premier post ;)

Répondre

Revenir vers « Tutoriaux »