Cherchez Unity

Les meilleurs conseils d'optimisation pour l'IU Unity

Last updated: January 2019

What you will get from this page: Tips on how to create optimized UI elements for your content, including dividing up your canvases, avoiding the use of Camera.main and Layout Groups, smart pooling of UI objects and more.

You’ll find many more in this great session by Unity engineer Ian Dundore, Squeezing Unity: Tips for raising performance (section on Unity UI starts at 23:38).

Divisez vos toiles

Problème : lorsqu'un ou deux éléments changent sur le canvas de l'IU, tout le canvas est affectée.

Le canvas is the basic component of Unity UI. It generates meshes that represent the UI elements placed on it, regenerates the meshes when UI elements change, and issues draw calls to the GPU so that the UI is actually displayed.

La génération de ces maillages peut être complexe. Les éléments de l'IU doivent être collectés en lots afin que le nombre de requêtes nécessaire soit le plus bas possible. La génération des lots étant une opération lourde, ces éléments doivent être régénérés uniquement lorsque cela est nécessaire. Mais lorsqu'un ou deux éléments du canvas changent, tout le canvas doit être analysé pour déterminer comment traiter ces éléments de manière optimale.

De nombreux utilisateurs basent l'IU de leur jeu sur un canvas unique avec des milliers d'éléments. Alors lorsqu'ils modifient un élément, le processeur fait face à un pic qui requiert de nombreuses millisecondes (la lourdeur du processus de recréation est évoqué plus en détails à 24:55 dans l'intervention d'Ian).

Solution : divisez vos canvas.

Chaque canvas est un îlot qui isole les élément qu'il contient des éléments des autres canvas. Divisez vos canvas dans l'outil disponible pour résoudre les problèmes de traitement par lots pour l'IU Unity.

Vous pouvez également imbriquer des canvas, ce qui permet aux concepteurs de créer de grandes IU hiérarchiques sans se préoccuper de l'emplacement à l'écran des différents éléments de divers canvas. Les canvas enfants isolent également des contenus, à la fois des canvas parents et de même rang. Ils conservent leur propre géométrie et exécutent seuls le traitement par lots.

Lorsque vous divisez des canvas pour créer des canvas enfants, essayez de regrouper les éléments selon leur date d'actualisation. Par exemple, séparez les éléments statiques des éléments dynamiques (à environ 23:36, Ian donne un exemple clair de division intelligente des canvas).

Une utilisation optimale du Graphic Raycaster

Problème : l'utilisation optimale du Graphic Raycaster :

Le Graphic Raycaster est le composant qui traduit vos entrées en évènements d'IU. Il traduit les entrées tactiles/d'écran en évènements puis les envoie aux éléments de l'IU pertinents. Chaque canvas qui nécessite des entrées, y compris les sous-canvas, ont besoin d'un Graphic Raycaster.

Malgré son nom, le Graphic Raycaster n'est pas vraiment un raycaster : par défaut, il teste uniquement les graphismes de l'IU. Il tient compte de l'ensemble d'éléments de l'IU aptes à recevoir des données sur un canvas donné et procède à des vérifications d'intersection : il vérifie que le point auquel l'évènement d'entrée survient au regard du RectTransform de chaque élément d'IU du canvas du Graphic Raycaster est marqué interactif.

La complexité repose dans le fait que tous les éléments de l'IU ne sont pas aptes à recevoir des actualisations.

Solution : désactivez Raycast Target pour les éléments statiques ou non-interactifs.

Par exemple, le texte sur un bouton. Désactiver Raycast Target réduira immédiatement le nombre de vérifications d'intersections du Graphic Raycaster à chaque frame.

Conseils d'optimisation d'IU Unity

Problème : dans certains cas, le Graphic Raycaster agit comme un raycaster.

Si vous définissez le mode de rendu de votre canvas sur Worldspace Camera ou Screen Space Cameran vous pouvez également définir un masque de blocage. Celui-ci détermine si le Raycaster agira via les physiques 2D ou 3D, pour voir si des objets physiques bloquent la capacité de l'utilisateur à interagir avec l'IU.

Solution : traiter les rayons via les physiques 2D ou 3D pouvant être un processus lourd, nous vous conseillons d'employer cette technique avec parcimonie.

Réduisez également le nombre de Graphic Raycasters en évitant de les ajouter aux canvas d'IU non-interactifs, puisque dans ce cas, il n'y aucune raison de vérifier la présence d'évènements d'interaction.

Évitez d'utiliser Camera.main

Problème : les canvas World Space doivent savoir de quelles caméras leurs évènements d'interaction doivent provenir.

Lorsque vous paramétrez un canvas pour un espace World Space ou Screen Space, vous pouvez indiquer la caméra à utiliser pour générer les évènements d'interaction pour le Graphic Raycaster de l'IU.

Unity UI optimization tips screen space camera

Ce paramétrage est optionnel pour les canvas World Space, et il est appelé « Event Camera ».

Unity UI optimization tips world space

Si vous laissez le champ Event Camera vide sur un canvas World Space, cela ne veut pas dire que votre canvas ne recevra pas d'évènements. Il utilisera la caméra principale du jeu. Pour déterminer quelle caméra est la principale, il accède à la propriété Camera.main.

Unity UI optimization tips camera main property

En fonction du chemin de code qu'emprunte Unity, il accèdera à Camera.main entre 7 et 10 fois par frame, par Graphic Raycaster, par canvas World Space. Et Camera.main appelle Object.FindObjectWithTag à chaque accès ! De toute évidence, ce n'est pas une bonne chose au moment de l'exécution.

Solution : évitez d'utiliser la caméra principale.

Mettez les références aux caméras en cache puis créez un système pour suivre la caméra principale. Si vous utilisez les canvas World Space, assignez toujours une caméra d'évènement. Ne laissez jamais ce paramètre vide ! Si la caméra d'évènement doit être modifiée, actualisez la propriété de caméra d'évènement via le code.

Évitez si possible les groupes de dispositions

Problème : chaque élément de l'IU qui essaie d'affecter sa disposition effectuera au minimum une requête GetComponents.

Quand un ou plusieurs éléments enfants changent au sein d'un système de disposition, d'autres éléments sont affectés (les éléments enfants modifiés invalident le système de disposition auquel ils appartiennent).

À propos des systèmes de disposition : un système de disposition se compose de groupes de dispositions directement au-dessus d'un élément de disposition. Un élément de disposition n'est pas simplement le composant élément de disposition : les textes d'IU, les textes et les Scroll Rects sont aussi des éléments de disposition. Les Scroll Rects sont également des groupes de dispositions.

Revenons au problème : chaque élément d'IU qui indique une disposition inappropriée effectuera au minimum une requête GetComponents. Cette requête recherche un groupe de disposition valide dans le parent de l'élément de disposition. Si elle en trouve un, elle continue à remonter la hiérarchie Transform jusqu'à ce qu'elle ne trouve plus de groupes de disposition ou atteigne la racine de la hiérarchie, selon la première éventualité. Chaque groupe de disposition ajoute donc une requête GetComponents à chaque élément de disposition qui affecte négativement le processus d'élément de mise en page, rendant l'imbrication des groupes de disposition très mauvaise pour les performances.

Solution : évitez les groupes de disposition lorsque cela est possible.

Utilisez des ancres pour les dispositions proportionnelles. Pour les IU avec plusieurs éléments dynamiques, nous vous conseillons d'écrire votre propre code pour calculer les dispositions et de l'utiliser au cas par cas, et non à chaque modification.

Regrouper intelligemment les objets d'IU

Problème : les objets de l'IU ne sont pas regroupés correctement.

On regroupe souvent des éléments d'IU en les reparantant puis en les désactivant, mais cela peut entraîner des altérations non-nécessaires.

Solution : commencez par désactiver l'objet, puis reparentez-le dans le groupe.

Vous altèrerez une fois l'ancienne hiérarchie, mais une fois l'élément reparenté, cela ne se produira plus et vous n'altèrerez plus du tout la hiérarchie. Si vous supprimez un objet du groupe, commencez par le reparenter, puis actualisez vos données et activez-le.

Comment masquer un élément canvas

Problème : comment masquer un canvas ?

Ils arrive que vous vouliez masquer certains éléments de l'IU et des canvas. Comment procéder de manière efficace ?

Solution : désactivez le composant Canvas

En désactivant directement le composant Canvas, celui-ci cessera d'envoyer des requêtes au GPU, et le canvas ne sera ainsi plus visible. Cela n’écartera pas son tampon de vertex. Tous ses maillages et ses vertex seront conservés, et lorsque vous le réactiverez, il ne déclenchera pas une reconstruction, il recommencera à les appeler.

De plus, désactiver le composant lui-même ne déclenche pas les lourdes requêtes OnDisable/OnEnable dans la hiérarchie du canvas. Pensez bien à désactiver les composants enfants qui exécutent du code lourd à chaque frame.

L’utilisation optimale des animateurs pour les éléments d'IU

Problème : utiliser des animateurs pour votre IU

Les animateurs altèrent leurs éléments à chaque frame, même si la valeur de l'animation reste la même. Les animateurs n'ont pas de vérification noop.

Solution :

Only put animators on dynamic elements that always change. For elements that rarely change or that only change in response to events, for a short period of time, write your own code or tweening system (there are a number on the Asset Store).

Plus de ressources

Dites-nous si vous avez aimé ce contenu !

Oui, continuez comme ça Ça pourrait être mieux
Compris

Ce site utilise des cookies dans le but de vous offrir la meilleure expérience possible. Consultez la page de politique des cookies pour en savoir plus.