Konvertierungsfunktionen: Zu Text (Int) und Zu Text (Double)

Übergib Integer- oder Float-Variablen an ein Widget, indem du die Konvertierungsfunktionen ToText(Int) und ToText(Double) verwendest. Die „ToText"-Konvertierungsfunktionen wandeln eine Variable vom Typ Integer oder Float in einen Text-Typ um, den du auf deinem Widget anzeigen kannst. Eine Variable wird nicht auf deinem Widget angezeigt, wenn es sich nicht um einen Text-Typ handelt.

Im Folgenden findest du zwei Beispiele, die die Verwendung beider Konvertierungsfunktionen veranschaulichen.

• Zu Text (Int)-Beispiel: Ein benutzerdefiniertes Tracker-Widget verfolgt den Fortschritt eines Spielers, wenn er Bacon aufhebt.

• Zu Text (Double)-Beispiel: Ein benutzerdefiniertes Popup-Dialog-Widget öffnet ein Popup mit möglichen Antworten auf eine Trivia-Frage. Ein Countdown-Timer wird verwendet, um den Timer zu schließen, wenn keine Antwort ausgewählt wurde, bevor die Zeit abgelaufen ist.

Zu Text (Int)

In diesem Beispiel wird ein benutzerdefiniertes Tracker-Widget erstellt, um zu verfolgen, wie viel Bacon der Spieler gesammelt hat. Verwende die Schritte im Dokument „UI-Popups“, um ein Benutzer-Widget zu erstellen, und nenne es Tracker_Widget.

Widget-Einrichtung

Um das Tracker_Widget einzurichten, fügst du die folgenden Widgets in der unten angegebenen Reihenfolge zum Hierarchie-Panel hinzu:

• Overlay

• Bild (Verschachtele es unter dem Overlay und benenne es in Background um.)

• Stapelbox (Verschachtele es unter dem Overlay.)

• Textblock (Verschachtele es unter der ersten Stapelbox und benenne es in Titel um. Dies ist dein Tracker-Titel „{Tracker Title}“.)

• Stapelbox (Verschachtele es unter der ersten Stapelbox.)

• 2 x Textblock (Verschachtelte es unter der zweiten Stapelbox. Benenne den ersten Textblock in CurrentValue „{Current}“ und den zweiten Textblock in Flavor-Text „Bacon Collected“ um.)

Du brauchst einen Textblock, der die aktuelle Bacon-Anzahl übernimmt, die der Spieler sammelt. Das Tracker_Widget ist so eingerichtet, dass es einen TrackerTitle-Textblock enthält, damit die Eigenschaft Name vom Ansichtsmodell in den Textblock Current übergeben werden kann:

Richte dein Widget genauso ein.

Das sieht der Spieler im Spiel, wenn er Bacon sammelt:

Einrichtung der Konvertierungsfunktion

Die Konvertierungsfunktion Zu Text (Int) wird verwendet, um die aktuelle Bacon-Menge über den Textblock CurrentValue an das Tracker-Gerät zu übergeben.

Um die Konvertierungsfunktionen „Zu Text (Int)“ einzurichten, erstellst du Ansichtsbindungen und bindest die im Widget festgelegten Werte an das Tracker-Gerät.

1. Öffne Fenster > Bindungen anzeigen.

   

2. Wähle den Textblock CurrentValue in deinem Widget aus und klicke im Fenster Ansichtsbindungen auf +Widget hinzufügen.

   

3. Wähle in der linken Box der Ansichtsbindung CurrentValue > Text aus. Das bedeutet, dass Text an die Text-Eigenschaft des Textblocks CurrentValue übergeben wird.

   

4. Klicke im rechten Feld in das Feld und wähle Konvertierungsfunktionen > Zu Text (Integer). In der Bindung für den Textblock CurrentValue werden einige Felder angezeigt.

   Lies im Abschnitt Zu Text (Int/Double) Eigenschaften nach, um mehr darüber zu erfahren, was jedes Feld macht.

   Damit wird eine Konvertierungsfunktion namens Zu Text (Integer) ausgeführt, die einen Wert aufnimmt und eine Variable vom Typ Text zurückgibt, um sie an die Text-Eigenschaft des CurrentValue-Textblocks zu übergeben.

   

5. Wähle das Kettensymbol neben Wert aus und wähle MVVM_UEFN_Tracker > Wert.

   

Die Variable Wert aus dem Tracker-Ansichtsmodell wird an die Konvertierungsfunktion Zu Text (Integer) übergeben. Dies gibt die Wert-Variable als Text-Eigenschaft aus, die dann an die Text-Eigenschaft des CurrentValue-Textblocks übergeben wird.

Endergebnis

Um dein neues Widget zu verwenden, ziehe ein Tracker-Gerät in dein Projekt und gehe dann wie folgt vor:

1. Setze im Details-Panel für das Tracker-Gerät das Feld HUD-Widget auf dein Track_Widget.

   Der Tracker kann verwendet werden, um die Punktestatistik zu verfolgen und sammelbare Objekte in deinem Level zu verwenden, um diese Funktionalität zu testen.

Immer wenn der Spieler im Spiel Bacon sammelt, erhöht sich der Tracker automatisch um den Punktewert, der für jeden Bacon festgelegt wurde.

Zu Text (Double)

Verwende in diesem Beispiel den Workflow Modale Dialogvariante aus dem Dokument UI-Popups, um ein benutzerdefiniertes Popup-Dialog-Widget namens Trivia_Widget zu erstellen. Das Trivia_Widget zeigt Trivia-Fragen von Fortnite an, die vor Ablauf des Zeitlimits beantwortet werden müssen.

Widget-Einrichtung

1. Klicke mit der rechten Maustaste in den Inhaltsbrowser, um das Kontextmenü aufzurufen.

   

2. Wähle im Kontextmenü Benutzeroberfläche > Widget-Blueprint > Modale Dialogvariante.

   

3. Öffne dein Widget und füge die folgenden Container zum Hierarchie-Panel in der im Bild gezeigten Reihenfolge hinzu:

   1. Overlay

   2. Bild

   3. 3 x Stapelbox

   Ein Overlay beinhaltet das gesamte Widget als Parent-Container. Verwende als Nächstes ein Bild-Widget für den Hintergrund und schließlich mehrere verschachtelte Stapelboxen, die alle Inhalte wie deine Texte und Schaltflächen aufnehmen.

   

4. Füge Textblöcke und Schaltflächen zu deinen Stapelboxen hinzu, wie unten abgebildet.

   

   Verpacke die Textblöcke TimeLeft und TimeFlavorText in eine Stapelbox, damit TimeLeft dynamisch durch eine Ansichtsbindung an die Variable „Verbleibende Zeit für Timeout“ im Popup-Dialog-Ansichtsmodell aktualisiert wird.

   

   Wenn du feststellst, dass du ein Widget mit einem Container in einer bestehenden Struktur verpacken musst, musst du nicht das gesamte Widget neu erstellen. Klicke mit der rechten Maustaste auf das Widget und wähle Verpacken mit... oder Ersetzen durch..., um ganz einfach ein neues Panel innerhalb eines Containers hinzuzufügen.

   

5. Füge die Schaltflächen als 2x2-Raster hinzu. Da sich die Schaltflächen in einem 2x2-Raster befinden, verwendest du ein Einheitliches Raster-Panel anstelle einer Stapelbox. Klicke mit der rechten Maustaste auf Container_Buttons > Ersetzen durch... > Einheitliches Raster-Panel.

   Mit dem einheitlichen Raster-Panel kannst du seine Child-Widgets auf einfache Weise in einem Rastermuster organisieren. Du kannst auch ganz einfach das Slot-Padding für jedes Child einstellen.

   

6. Wähle jede Schaltfläche einzeln in der Hierarchie aus, um die Schaltfläche in der Hauptdesigneransicht zu markieren.

7. Klicke in der Hauptdesigneransicht auf die Pfeile rund um die Schaltfläche, um die Schaltfläche in eine bestimmte Zeile oder Spalte zu verschieben, in der du die Schaltfläche platzieren möchtest.

   Im folgenden Beispiel sind die Schaltfläche von links nach rechts und von oben nach unten angeordnet. Die Schaltflächen wurden in Button1, Button2, Button3 und Button4 umbenannt.

   

8. Setze im Details-Panel Child-Layout > Slot-Padding für die Container_Buttons auf 16px.

   Optimiere diesen Wert so, wie du es für dein eigenes Design für geeignet hältst.

   

9. Füge im Inhaltsstapelfeld eine stumme Schaltfläche hinzu, um sie später als Schließen-Schaltfläche zu verwenden.

   

10. Füge zwischen den Containern einige Abstandshalter hinzu, um den Inhalt lesbarer zu machen. Dazu kannst du ein Bild-Widget an den Stellen hinzufügen, an denen Abstände sein sollen, und dann im Details-Panel die folgenden Optionen verwenden:

    1. Pinsel > Zeichnen als = Nichts

    2. Bildgröße (X- und Y-Werte) = 35 (Kann je nach Design mehr oder weniger betragen.)

    Das ist eine leicht zu verwaltende Methode, um die Abstände zwischen deinen UI-Elementen zu handhaben, ohne auf Padding angewiesen zu sein.

    

    

    

    Als Bild zeichnen

    Als Keine zeichnen

11. Bearbeite den Schaltflächentext, um jede Schaltfläche leicht zu identifizieren.

    

12. Öffne die Ordner Fortnite > UI und erstelle eine Material-Instanz des M_UI_Rectangle, um ein Hintergrundmaterial für dein Trivia-Popup zu erstellen.

    

13. Öffne in UMG dein Benutzer-Widget und wähle das Hintergrundbild-Widget aus. Wähle im Feld Pinsel > Bild die Material-Instanz aus, die du gerade erstellt hast.

    

14. Füge 32 px für das Auffüllen der Inhaltsstapelbox hinzu, um das Popup lesbarer zu machen.

    

Einrichtung der Konvertierungsfunktion

1. Öffne Fenster > Bindungen anzeigen.

   

2. Wähle im Hierarchie-Panel das Textblock-Widget TimeLeft aus. Klicke im Fenster Ansichtsbindungen auf +Widget hinzufügen.

   

3. Wähle in der linken Box TimeLeft > Text aus. Dadurch wird ein Wert in die Text-Eigenschaft von TimeLeft übergeben.

   

4. Wähle im rechten Feld CreativeModalDialogViewmodel > Verbleibende Zeit für Timeout aus. Wähle dann Konvertierungsfunktionen > Zu Text (Double).

   Wenn du den Mauszeiger über die Variable bewegst, siehst du, dass es sich bei diesem Wert um einen Float-Wert handelt. Die Konvertierungsfunktion Zu Text (Double) bietet dir eine Möglichkeit, einen Double/Float-Wert in eine Textvariable zu konvertieren und diese in deiner Benutzeroberfläche anzuzeigen.

   

   Im Fenster Ansichtsbindung werden einige Felder angezeigt.

   Weitere Informationen zu diesen Feldern findest du im Abschnitt Zu Text (Int/Double) Eigenschaften des Dokuments.

5. Klicke auf das Kettensymbol neben Wert und wähle CreativeModalDialogViewmodel > Verbleibende Zeit für Timeout > Auswählen.

   

Die Variable „Verbleibende Zeit für Timeout“ wird an die Konvertierungsfunktion „Zu Text (Double)“ übergeben, die den Float-Wert in ein Textformat ausgibt, das von deiner Benutzeroberfläche lesbar ist. Deine Benutzeroberfläche zeigt die verbleibende Zeit bis zum Schließen des Popup-Dialog-Widgets genau an.

Endergebnis

Ziehe ein Pop-up-Dialog-Gerät in dein Projekt und führe folgende Schritte aus:

1. Setze in einem Popup-Dialog-Gerät die Template-Override-Klasse auf das Trivia_Widget, das du erstellt hast.

2. Aktiviere die Option „Dialog-Timeout verwenden“.

3. Setze „Timeout-Dauer“ auf 6 Sekunden oder eine beliebige Zeit, die den Spielern genug Zeit gibt, um das Popup zu sehen und es zu lesen.

Wenn jetzt dein Popup-Dialog-Widget angezeigt wird, kannst du sehen, wie der Timer im Popup-Fenster jede Sekunde heruntertickt.

Zu Text (Int/Double) Eigenschaften

In der Konvertierungsfunktion „Zu Text (Int)“ sind einige Felder verfügbar. Zu Text (Double) teilt sich dieselben Felder, außer wenn etwas anderes angegeben ist:

• Wert – Die Integer-Variable, die an die Konvertierungsfunktion übergeben werden soll.

• Immer mit Vorzeichen – Fügt dem Präfix für die Textausgabe ein positives oder negatives Vorzeichen hinzu, das angibt, ob der Wert ein positiver oder negativer Wert ist. Wenn der Wert positiv ist, wird der Text als +{Value} ausgegeben. Ist er negativ, wird der Text als -{Value} ausgegeben.

• Gruppierung verwenden – Legt fest, ob die Werte gruppiert, aber getrennt werden, wenn der Wert über 1000 liegt. Für den Gruppierungskennzeichner wird die kulturabhängige Einstellung deines Computers verwendet. Wenn diese Funktion eingeschaltet ist, wird der Text als 1.000 ausgegeben. Wenn diese Funktion ausgeschaltet ist, wird der Text als 1000 ausgegeben.

• Minimum ganzzahliger Stellen – Die Mindestanzahl ganzzahliger Stellen, die im Text angezeigt werden sollen. Der Standardwert ist 1. Wenn das Minimum auf mehr als 1 eingestellt ist, werden Nullen für Ganzzahlen angezeigt, deren Anzahl an Ziffern kleiner als das Minimum ganzzahliger Stellen ist. Wenn zum Beispiel das Minimum ganzzahliger Stellen auf 3 festgelegt ist und der Wert aktuell 5 ist, wird der Text als 005 ausgegeben.

• Maximum ganzzahliger Stellen – Die maximale Anzahl der ganzzahligen Stellen, die im Text angezeigt werden sollen. Der Standardwert ist 354. Dadurch wird dein Text so beschränkt, dass er nur eine maximale Anzahl von Ziffern zeigt.

• Minimum Nachkommastellen (nur für Zu Text (Double)) – Die Mindestanzahl an Stellen, die nach dem Dezimalkomma angezeigt werden sollen. Der Standardwert ist 0.

• Maximum Nachkommastellen (nur für Zu Text (Double)) – Die maximale Anzahl an Stellen, die nach dem Dezimalkomma angezeigt werden sollen. Der Standardwert ist 3.

• Rundungsmodus (nur für Zu Text (Double)) – Legt fest, wie der Float-/Double-Wert auf die nächste Zahl aufgerundet wird.