TextMesh Pro

In diesem Tutorial werden wir uns das GUI-Objekt TextMesh Pro ansehen. TextMesh Pro wird neben normalen GameObjects verwendet und in einer Szene im 3D-Raum platziert. Es ist ideal für XR-Anwendungen, bei denen Text häufig Teil der vorhandenen Szene ist und nicht in 2D-Menüs verwiesen wird.

TextMesh Pro ist die ultimative Textlösung für Unity. Es ist der perfekte Ersatz für Unitys UI-Text und das alte Textnetz. Es ist leistungsstark und benutzerfreundlich und verwendet erweiterte Text-Rendering-Techniken sowie eine Reihe von benutzerdefinierten Shadern. Es bietet erhebliche Verbesserungen der visuellen Qualität und bietet den Benutzern eine unglaubliche Flexibilität bei der Gestaltung und Texturierung von Text. TextMesh Pro bietet eine verbesserte Kontrolle über die Formatierung und das Layout von Text mit Funktionen wie Zeichen-, Wort-, Zeilen- und Absatzabständen, Kerning, gerechtfertigtem Text, Links, über 30 verfügbaren Rich-Text-Tags, Unterstützung für Multi Font & Sprites, benutzerdefinierte Stile und mehr. Gute Leistung. Da die von TextMesh Pro erstellte Geometrie genau wie die Textkomponenten von Unity zwei Dreiecke pro Zeichen verwendet, entstehen für diese verbesserte visuelle Qualität und Flexibilität keine zusätzlichen Leistungskosten. In diesem Tutorial werden wir uns das GUI-Objekt TextMesh Pro ansehen. TextMesh Pro wird neben normalen GameObjects verwendet und in einer Szene im 3D-Raum platziert. Es ist ideal für XR-Anwendungen, bei denen Text häufig Teil der vorhandenen Szene ist und nicht in 2D-Menüs verwiesen wird.

Einführung in TextMesh Pro

TextMeshTextMesh Pro ist ein benutzerfreundliches System für hochwertigen Text. Es verfügt über viele Optionen für die Darstellung und Formatierung von Text und ist eine einfache Möglichkeit, der Benutzeroberfläche eines Projekts einen professionellen Touch zu verleihen. Der Beitrag zeigt, wie du Schriftarten für die Verwendung in TextMesh Pro vorbereiten, neue TextMesh Pro-Objekte erstellen und diese Objekte ändern kannst.

1.Erstellen eines TextMesh Pro-Textobjekts:

1. Wähle mit der Dropdown-Liste GameObject oder mit der rechten Maustaste im Hierarchiefenster UI> TextMesh Pro – Text.

2. Wenn du TextMesh Pro (TMP) zum ersten Mal in einem Projekt verwendest, bietet Unity den Import der Pakete TMP Essentials und Examples & Extras an (sofern du das TextMesh Pro-Asset-Paket noch nicht importiert hast). Klicken Sie auf TMP Essentials importieren und schließen das Fenster.

Der Import von TMP kann auch zum Zeitpunkt der Projekterstellung als enthaltenes Asset-Paket erfolgen.

3. Wenn der Text auf der Registerkarte “Szene” nicht sichtbar ist, markiere ihn in der Hierarchie und drücke die Taste “F” auf der Tastatur, während sich der Mauszeiger in der Szenenansicht befindet.

4. Klicke in der oberen rechten Ecke des Inspektors auf die Sperre, um den Fokus auf das TextMesh Pro Text-Objekt zu richten.

5. Stelle in den Einstellungen für die Rechtecktransformation die Größe des Textbereichs auf 300 x 100 ein.

Die Rechtecktransformation steuert die Position und Größe des Textbereichs.

6. Aktiviere im Abschnitt Schriftarteinstellungen des Text Mesh Pro UGUI-Inspektors das Umbrechen und Überlaufen von Text.

TextMesh Pro bietet eine Vielzahl von Layout- und Darstellungsoptionen.

7. Versuche, die Materialvoreinstellung und verschiedene Schriftarteinstellungen zu ändern. Du kannst die Farbe der Schriftart entweder durch Ändern der Scheitelpunktfarbe oder in den Materialeinstellungen festlegen. Klicke auf das Dreieck im Material unten im Inspektor, um die Einstellungen für Schriftart, Umriss und Unterlage (Schlagschatten) anzuzeigen.

Klicke auf die grauen Balken außerhalb der beiden Kontrollkästchen, um die Eigenschaften für diese bestimmte Einstellung für die Schriftart anzuzeigen oder auszublenden.

8. Aktiviere das Kontrollkästchen in der rechten Hälfte des Abschnitts “Gliederung” und klicken Sie auf eine andere Stelle im Abschnitt, um die Einstellungen zu öffnen.

9. Passe die Farbe und Dicke des Textes an.

Das Hinzufügen einer Gliederung zu Ihrem Text kann das Anzeigen in geschäftigen Umgebungen erleichtern.

10. Versuche, die Einstellungen für Unterlage und die Einstellungen für den Vordergrund ändern. Klicke auf das Zahnrad in der oberen rechten Ecke und wähle Zurücksetzen, um zu den Standardeinstellungen zurückzukehren.

In diesem Menü kannst du zu den ursprünglichen Materialeinstellungen zurückkehren, Materialeigenschaften übertragen und Materialvoreinstellungen erstellen.

11. Experimentiere mit den Materialvoreinstellungen für Schriftarten und passe die Schriftarteneinstellungen wie gewünscht an.

TextMesh Pro wird mit drei Materialvoreinstellungen geliefert, mit denen du die Auswirkungen verschiedener Einstellungen schnell untersuchen kannst.

2. Zugriff auf TextMeshPro-Objekte im Code:

Hier verwenden wir den System-Namespace in unserem Skript, um auf Datums- und Zeitfunktionen zuzugreifen. Für TextMesh Pro ist nur der TMPro-Namespace erforderlich.

1. Wähle in der Dropdown-Liste “GameObject” die Option “Leer erstellen” und nennen Sie sie “ClockDisplay”.

2. Erstelle ein neues Skript mit dem Namen “Clock” und hängen Sie es an ClockDisplay an. Doppelklicke im Projektfenster auf Uhr, um Visual Studio oder MonoDevelop zu öffnen. Lösche die Start () -Methode, da wir sie für diese Übung nicht verwenden.

3. Gebe ab Zeile 4 Folgendes ein:

using TMPro;

using System;

4. Gebe in Zeile 8 Folgendes ein:

public TMP_Text clockText;

5. Gebe in Update in Zeile 12 Folgendes ein:

clockText.text = DateTime.Now.ToString ();

6. Das Uhrenskript ist jetzt abgeschlossen.

Speichere die Änderungen und kehre zu Unity zurück.

Das fertige Uhrenskript:

7. Ziehe das in Übung 1 erstellte TextMesh Pro-Objekt in den mit Uhrentext gekennzeichneten Bereich im Uhrinspektor.

8. Drücke Play, um die Demonstration zu starten. Das aktuelle Datum und die aktuelle Uhrzeit werden mit den im TextMesh Pro Text Inspector angegebenen Materialeinstellungen angezeigt.

9. Wenn du fertig bist, verlasse den Wiedergabemodus.

3.Erstellen einer Schriftart zur Verwendung mit TextMesh Pro

1. Wenn du noch keinen Ressourcenordner in Assets hast, erstelle einen und erstelle in diesem Ordner einen Ordner mit dem Namen “Schriftarten”. Hier speicher dein erstelltes Font Asset.

2. Ziehe eine Schriftartdatei (OpenType oder TrueType) in den Ordner Ressourcen.

3. Wähle in der Dropdown-Liste Fenster TextMesh Pro> Font Asset Creator aus.

4. Klicke auf den Kreis neben dem Steckplatz für die Schriftquelle und wähle deine Schrift aus.

Du kannst eine Schriftart auch direkt aus der Projektansicht in den Steckplatz ziehen. Schriftarten-Assets können projektübergreifend wiederverwendet werden.

5. Klicke auf Schriftatlas generieren.

6. Klicke auf Speichern.

7. Navigiere zu Assets> Resources> Fonts, benenne deine Schriftart und klicke auf Save.

8. Wenn es im Inspektor immer noch nicht angezeigt wird, klicke im Hierarchiefenster auf das TextMesh Pro Text-Objekt, um es hervorzuheben.

9. Klicke auf den Kreis neben Font Asset und wähle das gerade erstellte Font Asset aus.

10. Aktiviere den Wiedergabemodus, um dein neues Font Asset in Aktion zu sehen.

11. Beende den Wiedergabemodus.

TextMesh Pro ist sehr vielseitig. Es kann für jede Situation verwendet werden, in der Text benötigt wird, einschließlich Spiele, Grafikanwendungen, Videos und mehr.

TextMesh Pro: Basics

In diesem Tutorial werden wir uns die GUI-Objekte TextMesh Pro und TextMesh Pro ansehen. TextMesh Pro wird neben normalen GameObjects verwendet und in einer Szene im 3D-Raum platziert. Es ist ideal für XR-Anwendungen, bei denen Text häufig Teil der vorhandenen Szene ist und nicht in 2D-Menüs verwiesen wird. Die TextMesh Pro UGUI-Komponente funktioniert mit dem Canvas-System und soll die UI-Textkomponente durch verbesserte Funktionen ersetzen und erweitern.

Die dunklen Zeiten

Alle Textkomponenten in Unity verwenden Texturen zum Speichern von Glyphen – der visuellen Darstellung von Zeichen. Die älteren Textkomponenten (TextMesh und UI-Text) verwenden gerasterte Bitmaps, um diese Glyphen zu rendern. TextMesh Pro verwendet hauptsächlich SDF (Signed Distance Fields), um die Form von Zeichen zu approximieren, bevor sie in eine Textur gerendert werden. Stell dir vor, wir versuchen, eine Form in einem Raster von 10 x 10 Pixel darzustellen, ohne zu technisch zu werden. In einer Bitmap-Textur würde jede Rasterposition möglicherweise ein weißes, graues oder schwarzes Pixel enthalten, abhängig von den Farbinformationen an dieser bestimmten Position. In einer SDF-Textur würde jede Gitterposition einen Abstand zum nächsten Merkmal der Form enthalten, was zu einer besseren Wiedergabe der ursprünglichen Form innerhalb eines festen Pixelgitters führen würde.Wenn ein Bitmap-Shader diese Form in einer Größe von 1: 1 zeichnet, ist dies einfach der Fall eine Textur-Suche für die angegebene Pixelposition. Wenn es ein Pixel enthält, wird es gezeichnet; Andernfalls ist dies nicht der Fall. Texturen enthalten eine endliche Anzahl von Pixeln. Beim Vergrößern oder Verkleinern muss der Shader die Größe jedes Pixels im Verhältnis zur Anzeigeauflösung des Geräts anpassen. Diese resultierende Form wird dadurch entweder blockartig, verschwommen oder zu scharf. Ein SDF-Shader führt dieselbe Textur-Suche durch, gibt jedoch diesmal ein Entfernungsbeispiel zurück. Je nach Entfernung zeichnet der Shader entweder ein vollständig undurchsichtiges oder ein Alpha-gemischtes Pixel. Beim Vergrößern oder Verkleinern interpoliert der Shader zwischen Entfernungsbeispielen, sodass Formen (Text) unabhängig von Bildschirmauflösung, Zoom und Skalierung in Unity sauber gerendert werden können. Um Bitmap-Text sauber zu rendern, müssen die Glyphen im Verhältnis 1: 1 gezeichnet werden, wobei jedes Glyphen für jede Schriftgröße neu abgetastet werden muss. SDF-Texturen müssen jedoch nur eine einzige Darstellung jedes Glyphen enthalten, was zu einer wesentlich effizienteren Nutzung des Texturraums führt. Die folgenden Bilder zeigen die größten visuellen Unterschiede zwischen dem alten und dem neuen System. Das Schöne an diesen Beispielen ist, dass trotz der überlegenen Renderqualität von SDF sowohl SDF als auch gerasterter Text dieselbe Anzahl von Polygonen (Quads) zum Rendern des Texts verwenden. Dies bedeutet, dass die Leistung von TextMesh Pro nicht beeinträchtigt wird. Wir fügen unserer Szene sowohl ein TextMesh Pro- als auch ein TextMesh Pro-GUI-Objekt hinzu und sehen uns jedes Objekt im Inspektor an.

Beide Methoden erstellen ein neues GameObject mit vier neuen Komponenten:

Rect Transform: Ein Container für dein Textobjekt, der den in Microsoft Office oder Photoshop verwendeten ähnlich ist. Du kannst die Größe, Position und Drehung deines Containers ändern.

Mesh Renderer: Rendert und positioniert deinen Text im 3D-Raum.

TextMeshPro – Text: Die Hauptkomponente, in der du Text schreiben, das Schriftelement, die Materialvoreinstellung, die Schriftgröße ändern, Absatzstile ändern, Farben / Verläufe aktivieren und eine Reihe anderer Elemente auswählen kannst.

Formatierungs- und Stiloptionen: Versuche, damit herumzuspielen.

Materialvoreinstellung: Das Material, das von dem in der TextMeshPro-Komponente referenzierten Font Asset verwendet wird. Materialien definieren das Aussehen Ihrer GameObjects. Ebenso definierst du hier das Erscheinungsbild deines Textes und findest Optionen, die von Konturen über Glühen, Abschrägungen bis hin zu Texturen und mehr reichen.

Zusätzliche Einstellungen: Mit diesen Einstellungen kannst du neben anderen Optionen die Ränder deine Texts anpassen, Sprite-Assets zuweisen und anpassen, in welcher Ebene der Text vorhanden ist.

Stellen Sie vor dem Eingeben von Text sicher, dass Wrapping und Overflow in der TextMesh Pro-Komponente aktiviert sind. Diese Optionen beschränken den Text auf das Rect Transform-Objekt.

Durch die automatische Größe wird die Stichprobengröße deiner Schriftart dynamisch an die Rechtecktransformation angepasst. Sei vorsichtig bei der Verwendung von Auto Size. Wenn du sie aktivierst, erhältst du eine optimale Stichprobengröße (z. B. für mobile Anwendungen, bei denen es schwierig sein kann, die Zielauflösung für jedes Gerät vorherzusagen). Sie sollte jedoch deaktiviert werden, sobald du dich für eine gute Größe entschieden hast, um unnötigen Leistungsaufwand zu vermeiden.
 

Hinzufügen von TextMesh Pro zu deiner Benutzeroberfläche

Das Hinzufügen von TextMeshPro zu einer Benutzeroberfläche ist ein sehr ähnlicher Vorgang: Navigiere in der Hierarchie zu UI> Text – TextMeshPro. Mit Ausnahme des Canvas-Renderers ist er mit der vorherigen Version identisch. Dadurch wird ein neues Canvas-GameObject mit einem TextMesh Pro-GameObject erstellt. Parenting bedeutet, dass der Text entlang der Leinwand verschoben wird. Die Komponenten in UI TextMesh Pro werden mit diesem Canvas-Objekt anstelle eines Unity Mesh-Renderers gerendert.