Benutzer-Widgets werden im Widget-Editor mit UMG-Widgets erstellt.
Nutzer-Widgets sind wie Karten, da sie die Route zwischen einem UMG-Widget und den Gerätefunktionen nachverfolgen. Wenn du ein Nutzer-Widget lesen kannst, kannst du den Aufbau einer Benutzeroberfläche verstehen. Im Widget-Editor kannst du Folgendes untersuchen:
Die Widget-Bindungen in Ansichtsbindungen.
Öffne in der Funktionsvorlage den Ordner HUD-Kontrollgerät und doppelklicke auf das Widget UW_HCD01, um mehr darüber zu erfahren, wie dieses Widget erstellt und an das HUD-Kontrollgerät gebunden wurde.
Widget-Layout
Das Widget-Layout ist die Designphase bei der Erstellung einer benutzerdefinierten Benutzeroberfläche. Im Widget-Editor kannst du UMG-Widgets aus dem Palette-Panel verwenden, um das Aussehen zu erstellen und die Funktionalität deiner Benutzeroberfläche zu planen. Die Reihenfolge, in der du UMG-Widgets verwendest, bestimmt die Darstellung der Benutzeroberfläche.
Lies im Abschnitt Palette des Widget-Editor-Dokuments nach, um mehr darüber zu erfahren, was die UMG-Widgets tun.
Sieh dir bei geöffnetem Widget UW_HCD01 das Hierarchie-Panel an. Das Hierarchie-Panel zeigt an, welche UMG-Widgets verwendet wurden und in welcher Reihenfolge sie dem Viewport hinzugefügt wurden.
UMG-Widgets können im Hierarchie-Panel umbenannt werden, sobald sie dem Viewport hinzugefügt wurden.
Alle Widget-Designs müssen ein Stamm-Widget haben, das als Bildschirm fungiert. Ein Overlay-Widget namens „Stamm“ befindet sich im Stamm des Designs und fungiert als Bildschirm. Der Viewport ist auf Bildschirm füllen gesetzt, wodurch das Design den vom Stamm bestimmten Bereich ausfüllt.
Ein Raster-Panel wird verwendet, um das Design der Konditions- und Schildbalken aufzunehmen. Raster-Panels sind flexible Raster, die ihre Widgets in Zeilen und Spalten organisieren.
Du kannst Zeilen und Spalten weiter Personalisieren, weil das Raster-Panel seinen Child-Widgets Optionen hinzufügt, die die Anzahl der Zeilen und Spalten, den Raum, den Zeilen und Spalten einnehmen, die Ebene, die das Widget im Design einnimmt, und eine spezielle Bewegungsoption namens Anstupsen steuern.
Anstupsen bietet eine Möglichkeit, das Kind-Widget über die x- und Y-Achse zu bewegen, ohne Raum einzunehmen. Das bedeutet, dass nur der Inhalt im Container verschoben wird, der Container aber seine Position und den Raum, den er im Layout einnimmt, beibehält.
Das Overlay-Widget mit dem Namen ShieldBarContainer ist das erste Child-Widget des Raster-Panels. Dieses Widget befindet sich in Zeile 1, Spalte 0 und wird über Zeilenbereich 1, Spaltenbereich 0 angezeigt. Die ShieldBarContainer-Widgets werden auf Layer1 angezeigt.
Das bedeutet, dass alle Child-Widgets von ShieldContainer auf der Vorderseite des Designs angezeigt werden, weil sie auf Ebene 1 liegen, sich aber rechts von den Widgets dahinter befinden, weil sie in Zeile 1 liegen. Der Schildbalken überspannt 2 Zeilen (0 und 1), dies bestimmt die Länge des Schildbalkens.
Mit der Option Anstupsen > Y kannst du das ShieldBarContainer-Widget um -25,0 Slate-Einheiten von seiner Standardposition nach unten verschieben, sodass es den Kondition-Container dahinter leicht verdeckt.
Das Overlay-Widget mit dem Namen HealthBarContainer ist das zweite Child-Widget des Raster-Panels. Dieses Widget befindet sich in Zeile 1, Spalte 0 und wird über Zeilenbereich 1, Spaltenbereich 0 angezeigt. Die HealthBarContainer-Widgets werden auf Layer0 angezeigt.
Das bedeutet, dass alle Child-Widgets von HealthBarContainer im hinteren Bereich des Designs angezeigt werden, da sie auf Ebene 0 liegen. Der Konditionsbalken befindet sich in Zeile 0, sodass er links neben dem Schildbalken angezeigt wird. Der HealthBarContainer überspannt auch die Zeilen 0 und 1, was die Länge des Konditionsbalkens bestimmt.
Im Folgenden findest du eine Aufschlüsselung der UMG-Widgets, aus denen die Schild- und Konditionsbalken bestehen, und ihre Funktion im Gesamtdesign.
ShieldBarContainer
Der ShieldBarContainer enthält alle UMG-Widgets, die das Design des Schildbalkens ausmachen. Der Schildbalken besteht aus folgenden Elementen:
| UMG-Widget | Widget-Name | Zweck |
|---|---|---|
Bild | ShieldBar_backing | Wird als Container verwendet, um das gesamte Schildbalkendesign zu umgehen. Dies ist eine Material-Instanz mit dem Namen MI_HCD01_Backplate. |
Stackbox | ShieldContent | Organisiert seine Child-Widgets (Schildbalken-Symbol und Schildbalken-Material) von links nach rechts innerhalb des ShieldBar_Backing-Materials und des ShieldBarContainers. |
Bild | ShieldIcon | Das Material des Schildsymbols, das als Frontebene verwendet wird. |
Overlay | ShieldBarContainer | Wird verwendet, um seine Child-Widgets in der zweiten Ebene der ShieldContent-Stapelbox zu legen. Diese Widgets bilden das Schuldleistenmaterial. |
Bild | ShieldBarStroke | Wird als Container verwendet, um den Schildbalken zu umgehen. Dies ist eine Material-Instanz mit dem Namen MI_HCD01_BarStroke. |
Bild | ShieldBar | Das M_ProgressBar_Basic-Material ist ein dynamisches zweitoniges Material, das eine Material-Funktion verwendet, um sich nach links und rechts über den Schuldbalken zu bewegen, abhängig von den Informationen, die das Widget vom HUD-Controller-Gerät erhält. |
HealthBarContainer
Der HealthContainer enthält alle UMG-Widgets, die das Design des Konditionsbalkens ausmachen. Der Konditionsbalken setzt sich aus folgenden Elementen zusammen:
| UMG-Widget | Widget-Name | Zweck |
|---|---|---|
Stackbox | Konditionsinhalt | Organisiert seine Child-Widgets (Design des Konditionsbalken-Symbols und Material des Konditionsbalkens) von links nach rechts im HealthContainer. Diese Stapelbox erstreckt sich über das ShieldContainer-Overlay-Widget und zentriert den Schildbalken im gesamten UI-Design. Das liegt daran, dass die HealthContent-Stapelbox eine größere X-Achsen-Abmessung hat als die ShieldContent-Stapelbox. |
Bild | HPIcon | Das Material des Konditionssymbols, das als Frontebene verwendet wird. |
Overlay | HPBarContainer | Wird verwendet, um seine Child-Widgets in der zweiten Spalte der HealthContent-Stapelbox zu schichten. Diese Widgets bilden das Material für den Konditionsbalken. |
Bild | HPBarStroke | Wird als Container um den Konditionsbalken herum verwendet. Dies ist eine Material-Instanz mit dem Namen MI_HCD01_BarStroke. |
Bild | HPBar | Ein dynamisches, zweifarbiges Material, das eine Material-Funktion nutzt, um sich nach links und rechts über den Konditionsbalken zu bewegen, abhängig von den Informationen, die das Widget vom HUD-Kontrollgerät erhält. |
Als Nächstes lernst du, wie du ein Ansichtsmodell auswählst, um die UI-Materialien zu aktualisieren und den aktuellen Konditions- und Schildstatus des Spielers im Spiel anzuzeigen.
Ansichtsmodell
Ein Ansichtsmodell steuert die Spielerinformationen durch eine Liste von Funktionen. Die Funktionen bieten eine Möglichkeit, Spielerinformationen über das UMG-Widget und die Gerätefunktionalität zu steuern. Ansichtsmodelle bieten eine spezielle Möglichkeit, UMG-Widgets an Kreativmodus-Geräte zu binden.
Ansichtsmodelle hören auf Funktionen, die im Gerät ausgeführt werden, mit dem Benutzer-Widget, um die Standard-Benutzeroberfläche zu ersetzen. Das Ansichtsmodell verwendet dann die Gerätefunktionen, um die Benutzeroberfläche über Ansichtsbindungen zu aktualisieren.
Zum Beispiel hören die Schild- und Konditionsbalken-Ansichtsmodelle die Schild- und Konditionsfunktionen des HUD-Kontrollgeräts ab. Wenn die HUD-Kontrollgerät-Funktion für die Schilde und die Kondition der Spieler ausgeführt wird, hört das Ansichtsmodell auf diese Funktionen und gibt die Informationen über die Ansichtsbindungen weiter, um die Benutzeroberfläche zu aktualisieren.
Es stehen eine Reihe verschiedener Ansichtsmodelle zur Auswahl. Beachte in der folgenden Liste der Ansichtsmodelle, dass es gerätespezifische Ansichtsmodelle gibt. Diese enthalten die für dieses Gerät spezifischen Funktionen.
Die folgenden Ansichtsmodelle steuern durch die Gerätefunktionen in den Listen mehr als einen Teil der Benutzeroberfläche.
Das Gerät – HUD-Kontrollgerät-Team/Einheit-Spielerinformationsliste wird mit dem Widget UW_HCD01 verwendet. Sie verwendet die Steuernder Spieler Info, um deine Informationen vom HUD-Kontrollgerät aufzunehmen, denn diese Vorlage soll von einem Spieler gespielt werden – dir!
In diesem UI-Beispiel werden deine Kondition und dein Schild über dieses Ansichtsmodell gesteuert, indem du den Funktionen des HUD-Kontrollgeräts zuhörst.
Als Nächstes lernst du, wie du Kondition- und Schild-UI-Materialien in Ansichtsbindungen an die HUD-Kontrollgerät-Funktionalität bindest.
Ansichtsbindungen
Ansichtsbindungen ordnet die UMG-Widget-Funktionalität den Funktionen des gebundenen Geräts zu und aktualisiert die Benutzeroberfläche im HUD. Im UW_HCD01-Widget sind die Materialien ShieldBar und HPBar an die Schild- und Kondition-Funktionen des HUD-Kontrollgeräts gebunden. Diese Funktionen überwachen deine Schilde und Kondition im Spiel und aktualisieren das Material des Balkens basierend darauf, wie viel Schild und Kondition du hast.
Um die Schild- und Kondition-UI funktional zu machen, wähle zuerst ein UMG-Widget aus und binde die Widget-Eigenschaften an eine bestimmte Gerätefunktion. Bindungen müssen im Ansichtsbindungen-Panel erstellt werden.
Hinzufügen eines UMG-Widgets
Bild-Widgets (ShieldBar und HPBar) werden zuerst über das Hierarchie-Panel und dann über das Ansichtsbindungen-Panel ausgewählt. Du kannst auf die Schaltfläche +Widget hinzufügen klicken, um die Liste der Ansichtsmodell-Funktionen zu öffnen. Dem Widget wird eine Funktion hinzugefügt, um die Eigenschaftsinformation des Widgets zu steuern. In diesem Fall ist es die Pinsel-Funktion, um die Materialien ShieldBar und HPBar zu steuern.
Gerätebindung hinzufügen
Nachdem bestimmt wurde, welches Widget gebunden werden soll, wird der Gerätebindungstyp ausgewählt. Neben dem Widget-Feld befindet sich ein leeres Feld. Wenn du in das leere Feld klickst, öffnet sich eine Liste mit verfügbaren Gerätebindungen. Die Gerätebindungsoptionen werden automatisch unter den Feldern Widget und Gerätebindung angezeigt. Die Optionen bestimmen, wie das Widget aktualisiert wird, basierend auf den Informationen, die es vom Gerät erhält.
Das Widget UW_HCD01 verwendet ein Skalarparameter festlegen, um die Pinsel-Eigenschaften zu aktualisieren.
Ansichtsbindungen
| ShieldBar-Pinsel Eigenschaft | HealthBar-Pinsel Eigenschaft |
|---|---|
 |  |
Details-Panel
| ShieldBar-Material | HealthBar-Material |
|---|---|
 |  |
Im UW_HCD01-Widget haben die Bild-Widgets (ShieldBar und HPBar) dynamische Materialien in ihren Pinseleigenschaften (zu finden im Details-Panel).
Geräteparameter festlegen
Damit die Materialien den aktuellen Zustand von Schild und Kondition des Spielers widerspiegeln, besitzen die Gerätebindungen Parameter, die gesetzt werden müssen, um die Geräteinformationen an die UMG-Widgets zu senden.
In diesem Beispiel werden das Bild-Widget und seine Pinsel-Funktion automatisch zum Pinsel-Parameter des HUD-Kontrollgeräts hinzugefügt. Diese Bindung bestimmt, welche Pinsel-Eigenschaft des Bild-Widgets aktualisiert werden soll.
Als Nächstes gibt der Parametername an, welcher Parameter im Pinsel-Material aktualisiert werden soll. Hier wird Fortschritt in das Feld eingegeben.
Schließlich wird der Wert für die Bindung vom Ansichtsmodell bestimmt. Im Wert-Feld der Bindung sind die Funktionen HUDPlayerInfoListViewmodel> Steuernder Spieler Info > Schild und Kondition festgelegt.
Die HUD-Kontrollgerät-Funktionalität aktualisiert nun die Pinsel-Eigenschaft im Bild-Widget über die Skalarparameter-Konvertierungsfunktion, indem sie sich die Fortschritt-Eigenschaft ansieht und ihr den Kondition- und Schildwert übergibt.
Fortschritt ist der Wert, der den Balken zwischen den Werten Fortschritt Start und Fortschritt Ende hin und her bewegt. Das bedeutet, dass der Fortschritt-Wert zwischen 0 und 1 gebunden ist.
| ShieldBar-Material Parametergruppen | HealthBar-Material Parametergruppen |
|---|---|
 |  |
Wenn du das Spiel mit voller Kondition und Schilden beginnst, bewegt sich der Balken bei Schaden nach links, basierend auf den Eigenschaften Fortschritt und Fortschritt normalisieren. Diese Eigenschaften bestimmen, wie stark sich das Material nach links bewegt, wenn der Spieler Schaden nimmt.
Das Material bewegt sich über den Balken nach rechts, wenn Kondition und Schilde mit der gleichen Rate wiederhergestellt werden, wie sie sich verschlechtern, indem man die Eigenschaften Fortschritt und Fortschritt normalisieren verwendet.
Öffne andere Benutzer-Widgets und versuche, sie zu lesen und die Reihenfolge zu verstehen, in der die UMG-Widgets zur Hierarchie hinzugefügt wurden, den für das Nutzer-Widget ausgewählten Ansichtsmodell-Typ und wie die UMG-Widget-Parameter und Gerätefunktionen in Ansichtsbindungen gebunden sind.
Ausgerüsteter Gegenstand Ansichtsmodell
Dieses Ansichtsmodell kann mit dem HUD-Kontrollgerät verwendet werden, um die Statistik eines ausgerüsteten Gegenstands mit dem Widget-Slot Ausgerüsteter Gegenstand Info-Widget Override zu überschreiben. Alle UI-Beispiele verwenden das Sturmgewehr WID_Assault_AutoHigh_Athena_C_Ore_T03 als ausgerüsteten Gegenstand.
Öffne den Ordner Geräte > HUD-Kontrollgerät > Widgets und führe einen Doppelklick auf das Widget UW_HCD03_SelectedItem aus. Mit diesem Ansichtsmodell kannst du eine Reihe von Waffen-Infos und Statistiken in der Benutzeroberfläche verfolgen:
Gegenstandssymbol
Gegenstandsname
Munitionssymbol
Munitionsmenge
Munitionsüberschuss
Ist Waffe mit Magazin
