Tirer le meilleur parti de TextMesh Pro dans Unity 2018
Que vous travailliez sur un FPS, un jeu de réflexion ou une expérience VR, l'un des aspects dont vous devez vous occuper est l'interface utilisateur. Heureusement, depuis mars 2017, TextMesh Pro a rejoint la famille Unity. Cela signifie qu'il est désormais beaucoup plus facile et plus rapide de donner une belle apparence à votre interface utilisateur dans Unity !
Pour ceux qui n'ont pas suivi ces développements, TextMesh Pro est un remplacement des composants de texte par défaut d'Unity. Il est tout aussi performant (voire plus, dans certains cas) et utilise une technique de rendu complètement différente appelée Signed Distance Field (SDF), utilisée à l'origine par Valve dans Team Fortress 2. TextMesh Pro vous permet non seulement de donner à votre texte une belle apparence sans trop d'efforts, mais il vous offre également un contrôle beaucoup plus avancé, via l'inspecteur ou les scripts. Dans ce billet, nous allons voir comment tirer le meilleur parti de cet outil incroyable !
Il y a deux raisons principales pour lesquelles c'est une excellente idée de commencer vos projets en utilisant TextMesh Pro. Tout d'abord, des améliorations visuelles. Grâce au rendu SDF, il est facile de modifier l'aspect de votre texte sans avoir à recréer sa police. Chaque composant de TextMesh Pro est associé à un matériau que vous pouvez modifier afin d'adapter le style de votre texte. Deuxièmement, un meilleur contrôle. Le composant TextMesh Pro comprend toutes les variables que vous pouvez trouver dans le composant texte ordinaire, et bien plus encore. Et si cela ne suffisait pas, sachez que TextMesh Pro est actuellement utilisé par plus d'un quart de million de développeurs dans le monde !
En travaillant avec le texte par défaut d'Unity, vous avez peut-être remarqué que l'étirement ou le redimensionnement de l'objet le rend parfois flou. En effet, le texte ne contient pas d'informations sur l'aspect qu'il aurait une fois redimensionné, et Unity doit donc "improviser" et tenter de générer les pixels manquants à la volée. Grâce à la technique de rendu différente utilisée par TextMesh Pro, ce problème ne se pose plus. SDF est basé sur le principe du rendu d'un atlas de polices à haute résolution, de sorte que la police dispose toujours d'informations sur l'aspect d'un caractère lorsqu'il est redimensionné.
Avec TextMesh Pro, vous pouvez importer n'importe quel fichier de police et créer votre propre fichier de police(Window > TextMesh Pro > Font Asset Creator). Cela vous permet de choisir la résolution de son atlas de polices (qui déterminera l'efficacité du rendu SDF pour votre texte). Il est évident que plus la résolution choisie est basse, plus l'atlas des polices sera généré rapidement.
Étant donné que la police dispose d'informations sur l'aspect qu'elle aurait à différentes tailles, elle peut également reconstruire son contour et son ombre portée à partir de l'atlas des polices. Il suffit de modifier les propriétés du matériau pour que votre texte change complètement d'aspect !
Comme nous l'avons vu, TextMesh Pro permet d'obtenir des textes d'une grande qualité. Mais quel est l'intérêt d'un beau texte si vous n'en avez pas le contrôle ? Le composant TextMesh Pro dispose d'options qui vous permettent de personnaliser la taille de la police, l'espacement, l'alignement, le crénage, ou d'activer la fonction de taille automatique et d'insérer votre texte dans un conteneur. Les deux derniers, en particulier, vous donnent un grand contrôle sur le travail avec différentes plates-formes ou différentes langues, car ils permettent à votre texte de se dimensionner automatiquement en fonction d'un conteneur de texte donné sans nécessiter de script. Toutefois, si vous souhaitez modifier ces paramètres au moment de l'exécution, vous pouvez accéder à toutes les variables des composants TextMeshPro à partir de l'API TextMeshPro.
Pour une personnalisation supplémentaire, vous pouvez également ajouter le composant Text Info Debug Tool à votre objet texte afin de pouvoir représenter visuellement les caractères, les mots, les liens, les lignes, etc.
Si vous souhaitez gagner du temps en reformatant votre texte à chaque fois que vous insérez un en-tête, un titre, une citation, etc., vous pouvez créer une feuille de style à des fins spécifiques. Un exemple pourrait être l'injection d'une décoration dans un en-tête. Pour créer une feuille de style, sélectionnez Créer > TextMesh Pro > Feuille de style. Vous pouvez définir cette nouvelle ressource comme feuille de style par défaut dans Edition > Paramètres du projet > Paramètres de TextMesh Pro.
En plus de contrôler l'aspect du texte à partir de l'inspecteur ou d'un script, vous pouvez le contrôler à partir du champ de texte lui-même. Si vous connaissez le HTML ou le XML, vous pouvez personnaliser l'aspect de votre texte au fur et à mesure que vous le tapez. Si ce n'est pas le cas, lisez simplement le guide sur l'utilisation de Rich Text avec TextMesh Pro) pour commencer ! Cette fonction est particulièrement utile lorsque vous souhaitez utiliser plusieurs styles, tailles et matériaux dans le même objet texte.
Une autre façon d'améliorer l'aspect de TextMesh Pro est d'appliquer un nuanceur de surface à votre texte. Cela permettra à l'éclairage de la scène d'affecter le texte. Dans l'exemple ci-dessous, quelques lumières ponctuelles en temps réel se déplacent dans la scène et affectent le texte.
Les propriétés du matériau vous permettent de personnaliser des paramètres tels que Face, Outline, Bevel, Lighting, BumpMap, EnvMap, Glow et Debug.
Une fois que vous avez créé un matériau qui vous convient, vous pouvez créer un préréglage de matériau que nous pourrons réutiliser à tout moment, en particulier pour la ressource de police que nous utilisons. Pour ce faire, cliquez avec le bouton droit de la souris sur le nom du matériau et sélectionnez "Créer un préréglage de matériau". Cela créera une ressource que nous pourrons sélectionner dans notre composant TextMesh Pro > Font Settings > Material Preset.
Si vous avez généré un atlas de polices auquel il manque certains caractères, TextMesh Pro fera en sorte que le caractère soit remplacé par un glyphe par défaut lorsqu'il est tapé. Vous pouvez modifier ce glyphe en allant sur Edit > Project Settings > TextMesh Pro Settings. Vous pouvez également définir un ou plusieurs fichiers de polices sur lesquels TextMesh Pro se basera si le caractère n'est pas trouvé dans l'Atlas principal. Pour des raisons d'optimisation, il est judicieux de conserver l'atlas de polices principal à une résolution plus élevée et tous les atlas de secours à une résolution plus faible.
En outre, vous pouvez utiliser les paramètres de TextMesh Pro pour configurer les chemins de ressources pour les polices et les matériaux ou les actifs de sprites. Lorsque vous utilisez du texte enrichi, vous pouvez insérer un sprite en fonction des sprites disponibles dans l'actif de sprites primaire que vous avez défini dans les paramètres. La méthode la plus simple consiste à importer une feuille de sprites, puis à la découper dans l'éditeur de sprites, en cliquant avec le bouton droit de la souris sur la ressource et en sélectionnant Créer > TextMesh Pro > Ressource sprite. À partir de ce nouvel actif, vous pouvez personnaliser des paramètres tels que le décalage ou le pivot. De même, vous pouvez configurer une série de Sprite Assets de repli à utiliser si un Sprite n'est pas trouvé dans les Sprite Assets primaires.
En termes de performances, comme nous l'avons déjà mentionné, TextMesh Pro fonctionne de la même manière que le texte par défaut : le rendu se fait toujours sur des quadrillages, ce qui le rend aussi efficace qu'une police bitmap. Il n'y a pas non plus d'allocation de mémoire en cours d'exécution : TextMesh Pro n'alloue de l'espace aux objets texte que lorsque vous appuyez sur la touche play. Si vous augmentez le nombre de caractères de manière significative, une seule réaffectation est effectuée ; si vous diminuez le nombre de caractères, aucune réaffectation n'est effectuée, à moins qu'il ne s'agisse d'une diminution d'au moins 256 caractères. En termes d'améliorations, vous pouvez obtenir de meilleurs résultats pour des styles comme Outline et Drop Shadow simplement grâce à la technique de rendu SDF utilisée par TextMesh Pro.
La plupart des éléments évoqués dans ce blog sont disponibles sous forme de scène d'exemple lorsque vous importez TextMesh Pro dans votre projet (depuis Fenêtre > Gestionnaire de paquets > TextMesh Pro > Installer à partir d'Unity 2018.1). Je vous recommande vivement de les consulter avant de commencer à utiliser TextMesh Pro, car leur contenu pourrait répondre à la plupart des questions que vous vous posez. Toutefois, si vous souhaitez faire part de vos commentaires ou si vous avez encore des questions, vous pouvez le faire via les forums.