Rückenschilder zeigen verschiedene Arten von Informationen im HUD an, wie das Avatar-Bild eines Spielers, ein Gamer-Tag, Kondition, Schilde und mehr.
Rückenschilder erfüllen eine Reihe von Funktionen, von der Identifizierung von Teammitgliedern in kooperativen Mehrspieler-Spielen bis zur Identifizierung niedriger Konditions- und Schildstatistiken.
In Unreal Editor für Fortnite (UEFN) werden Rückenschilder aus
Texturen können jedoch speicherintensiv sein. Das kann dein Speicherbudget belasten und die Performance deiner Insel verringern. Texturen und Textur-Sample-Knoten in deinem Material benötigen eine Menge Speicherplatz.
Materialien werden am besten verwendet, um flache Designs zu erstellen, und können dem Rückenschild animierte Effekte hinzufügen. Materialien sind weniger speicherintensiv, da sie auf die GPU angewiesen sind, um einfache Algebra-Mathematik auszuführen. Auf diese Weise kannst du eine Reihe von Aufgaben erledigen, vom Erstellen einfacher Formen bis hin zur Animation komplexer Interaktionen in einem Material.
 |  |
Flat-UI-Design mit Materialien | UI-Design mit Texturen |
Wenn du dich für die Verwendung von Texturen entscheidest, solltest du sicherstellen, dass du sie sparsam verwendest – es wird empfohlen, alles über 256 x 256 Pixel für UI-Texturen zu vermeiden.
Materialien sind weniger speicherintensiv, da sie zum Rendern die GPU verwenden.
Die Methode, die du für deine Avatar-Rückenschilder verwendest, hängt von einer Reihe von Faktoren ab:
Persönliche Vorlieben für das UI-Design.
UI-Stil und -Design, die die Art des von dir erstellten Inselerlebnisses ergänzen
Wie viel Speicher du sparen möchtest
Das Avatar-Backplate-Design in diesem Tutorial verwendet drei Material-Instanzierungen für das grundlegende Design. Die folgenden Backplate-Designs wurden mit dem Material M_UI_Shape_Rectangle erstellt, um sie einzubeziehen:
Einen durchscheinenden rosafarbenen Hintergrund
Einen rosafarbenen Container, der den Namenstext und den durchscheinenden Hintergrund umgibt
Einen Aqua-Kreis, der den Avatar des Spielers enthält
Erstelle deine eigene UI mit Materialien! Siehe Erstellen von benutzerdefinierten Benutzeroberflächen mit Material-Instanzen.
Richte ein benutzerdefiniertes Widget ein
Verwende den Benutzer-Widget-Workflow des UI-Pop-Up-Dokuments zum:
Erstellen eines Benutzer-Widgets.
Benenne die Miniaturansicht in Player_Info um.
Doppelklicke auf die Miniaturansicht, um den UMG-Widget-Editor (Unreal Motion Graphics) zu öffnen.
Im Widget-Editor legst du das Erscheinungsbild und die Bildschirmplatzierung für dein Rückenschild-Design fest. Danach fügst du ein Viewmodel hinzu, um die Bindungsfunktionalität zu erstellen, um bestehende Spielerinformationen zu erfassen und sie an das Backplate-Design zu binden.
Im Event-Diagramm:
Wähle die Einstellung Bildschirm füllen in der oberen rechten Ecke aus und setze sie stattdessen auf Gewünscht.
Über diese Einstellung kannst du deine Widgets auf eine bestimmte Größe ändern, damit deine Benutzeroberfläche während des Gameplays nahtlos erscheint.
Um das UI-Design für dein benutzerdefiniertes HUD zu gestalten, fügst du zunächst Panels zum Event-Diagramm hinzu.
Navigiere im Palette-Panel zum Abschnitt Panel und ziehe ein Canvas-Panel entweder in das Event oder direkt in das Hierarchie-Panel. Benenne dann das Panel in HUD_Canvas um.
Das Canvas -Panel bietet eine Möglichkeit, verschiedene UI-Elemente an bestimmten Stellen auf dem Bildschirm zu verankern. Stelle sicher, dass du einen UI-Designplan hast, bevor du weitere Panels zum Canvas hinzufügst, um sicherzustellen, dass dein Design-Layout im Canvas-Panel widergespiegelt wird.
Verwende das Canvas-Panel nur, wenn du bestimmte UI-Elemente als Teil deines Designs verwenden musst. Verwende dieses Panel zum Beispiel, wenn du ein HUD erstellst und verschiedene Child-Widgets an bestimmten Stellen auf dem Bildschirm platzieren musst.
Anstatt die Einstellung Bildschirm füllen auf Gewünscht zu ändern, kannst du die Größe des Canvas-Panels auf 1920 x 1080 oder 2560 x 1440 ändern, was den gängigsten Bildschirmformaten (16:9) entspricht.
Verschachtele im Abschnitt Panel des Palette-Panels eine Stapelbox unter HUD_Canvas im Hierarchie-Panel und benenne sie in Backplate_StackBox um. Dies ist der Container für die Rückenschild-UI, in der die Widgets, aus denen deine UI-Variablen bestehen, verschachtelt werden.
Wenn du Variablen zur Stapelbox hinzufügst, werden sie im Panel automatisch von links nach rechts gestapelt.
Du kannst die Stapelbox auch verwenden, um deine UI-Elemente von Oben nach Unten zu stapeln.
Verschachtele im Abschnitt Allgemein des Palette-Panels ein Bild unter Backplate_StackBox, und der Hierarchie. Benenne dann das Bild in Avatar_Bild um, das den Rahmen des Avatars enthält.
Verschachtele im Abschnitt Panel des Palette-Panels ein Overlay unter Backplate_StackBox, und benenne es um in Nameplate_Overlay. Das Overlay bietet eine Möglichkeit, Widgets übereinander zu legen.
Ziehe und verschachtele aus dem Palette-Panel zwei Bilder unter Nameplate_Overlay.
Benenne die Bilder nach den Materialien, Hintergrund und Rahmen, um.
Ziehe und verschachtele ein Größenbox-Panel unter Nameplate_Overlay.
Verwende die Größenbox, um die Eigenschaften der geschachtelten Children festzulegen. Dadurch wird verhindert, dass etwas aus der Größenbox herausragt und möglicherweise andere UI-Elemente oder das Gameplay verdeckt.
Ziehe und verschachtele ein Overlay unter die Größenbox und benenne es in Text_Overlay um.
Ohne ein Overlay kannst du nur ein Widget unter der Größenbox unterordnen.
Ziehe und verschachtele aus dem Abschnitt Allgemein des Palette-Panels zwei Textblöcke unter Text_Overlay. Benenne die Textblöcke in Aktiv und Inaktiv um.
Das UI-Layout ist fertig. Als Nächstes legst du die Eigenschaften des Widgets fest, um die Größe der Rückenschild-UI-Elemente relativ zur Bildschirmgröße zu machen.
Widget-Eigenschaften festlegen
Ein Container-Panel passt seine Größe automatisch an das größte Widget darin an. Das Parent-Panel muss alle Children enthalten, bevor du mit der Bearbeitung seiner Eigenschaften beginnst. Andernfalls könnten sich die Proportionen des Parent-Elements verschieben, wenn Child-UI-Elemente auf dem Hierarchie-Tab hinzugefügt werden.
Beginne mit dem Einstellen der Eigenschaften für das Panel Backplate_StackBox, um die Bildschirmplatzierung und die Grenzen der Backplate festzulegen.
Die folgenden Eigenschaften wurden für das Design dieses Rückenschilds bearbeitet:
Klicke auf das Bild, um es zu vergrößern.
| Einstellung | Wert |
|---|---|
Anker | Untere linke Ecke |
Ausrichtung | Sollte auf ein Paar Koordinaten gesetzt sein, das dein Widget von den Rändern des Bildschirms auffüllt. |
Größe an Inhalt anpassen | True |
Orientierung | Horizontal (Alle Child-Widgets werden von links nach rechts angezeigt.) |
X scheren | -20,0 (Skelett der Stapelbox negativ nach rechts.) |
Halte Umschalten + Strg gedrückt und klicke auf die linke untere Ecke, um die Position und Ausrichtung deines Widgets automatisch zu aktualisieren.
Die grundlegenden Bestandteile des Rückenschild-Layouts sind vorhanden. Jetzt kannst du die von dir erstellten Materialien hinzufügen und die Textblöcke des Namensschilds bearbeiten.
Hinzufügen und Bearbeiten von Backplate-Assets
Der Widget-Editor hat Einstellungen für ausgewählte Widgets, um Materialien und Text hinzuzufügen sowie die in der Pinsel-Einstellung verwendeten Asset-Eigenschaften zu ändern.
Es ist wichtig, die Anordnungsreihenfolge des Materials im Hierarchie-Panel zu beachten. Achte beim Hinzufügen deiner Assets darauf, dass sie ordnungsgemäß angezeigt werden. Hintergrund-Assets sollten unten liegen, zusätzliche Elemente darüber.
Bearbeiten von Materialinstanzen
Wähle deine Widgets im Hierarchie-Panel aus, um deine Materialien und Texte hinzuzufügen.
Wähle Avatar-Bild unter der Stapelbox, um das Widget zu markieren und seine Eigenschaften im Details-Panel zu öffnen.
Füge im Details-Panel das Avatar-Rahmenmaterial zur Pinsel-Einstellung hinzu. Passe die Einstellungen für die Bildgröße an das Bild-Widget mit dem Material an.
Klicke auf das Bild, um es zu vergrößern.
Materialien sind wie Farbe. Wenn das Material zur Pinsel-Einstellung hinzugefügt wird, füllt es den Bereich des Bild-Widgets aus.
Wenn du bestimmte Avatare für dein Erlebnis hast, gehe wie folgt vor:
* Erstelle ein Overlay, um ein Avatar-Bild unter ein Rahmenmaterial zu legen.
* Füge deine importierten Avatar-Bilder zu einer Bild-Hintergrundebene hinzu.
* Verwende das Rahmenmaterial auf der obersten Ebene.
Wähle das Hintergrundbild im Hierarchie-Panel aus, um die Overlay-Optionen im Details-Panel zu öffnen.
Stelle im Details-Panel die Einstellungen Horizontale und Vertikale Ausrichtung auf Mittige Ausrichtung ein und füge das Hintergrundmaterial zur Pinsel-Einstellung hinzu. Passe die Einstellungen für die Bildgröße so an, dass sie zum Bild-Widget mit der Hintergrundfarbe des Materials passen.
Klicke auf das Bild, um es zu vergrößern.
Wähle das Rahmenbild unter Nameplate_Overlay aus, um das Widget zu markieren und seine Eigenschaften im Details-Panel zu öffnen.
Stelle im Details-Panel die Einstellungen Horizontale und Vertikale Ausrichtung auf Mittige Ausrichtung ein und füge das Rahmenmaterial zur Pinsel-Einstellung hinzu. Passe die Einstellungen für die Bildgröße so an, dass der Rahmen um die Hintergrundfarbe herumgeht.
Klicke auf das Bild, um es zu vergrößern.
Die Backplate nimmt ein einfaches Aussehen an und jetzt kannst du die Textblöcke bearbeiten.
Bearbeite das Namensschild
Das Namensschild zeigt die Gamer-Tags des Spielers an. Die oben entworfene Backplate enthält sowohl eine Größenbox als auch Textblöcke.
Durch Bearbeitung der Eigenschaften der Größenbox kannst du verhindern, dass der Text sich über seine Begrenzung hinaus in andere UI-Elemente ausbreitet oder die Sicht des Spielers verdeckt.
Wähle die Größenbox in der Hierarchie aus, um ihre Eigenschaften im Details-Panel zu öffnen.
Stelle im Details-Panel die Einstellungen Horizontale und Vertikale Ausrichtung auf Mittige Ausrichtung ein. Dadurch werden die Textblöcke in den Namensschild-Bildern automatisch zentriert. Setze die Optionen Breiten- und Höhen-Override der Größenbox auf True und lege die gewünschte Größe des Nameplate_Overlay fest.
Die grüne Box zeigt den Rahmen der Größenbox an.
Klicke auf das Bild, um es zu vergrößern.
Klicke im Hierarchie-Panel mit der rechten Maustaste auf Größenbox und wähle Umhüllen mit... > Größenbox für die Textblöcke, um den Spielertext entsprechend den Eigenschaften der Größenbox einzuwickeln.
Die grundlegende Einrichtung der Namensschild-UI ist abgeschlossen. Alle Child-Elemente übernehmen die Eigenschaften ihrer Parent-Elemente, so dass der Bearbeitungsaufwand für diese Widgets minimal ist.
Im Details-Panel kannst du die aktiven und inaktiven Textblöcke bearbeiten, indem du die Ausrichtung und Schriftgröße, Farbe, Umrandung und vieles mehr festlegst.
Stelle sicher, dass der aktive Text eine andere Farbe als der inaktive Text hat. In diesem Beispiel hat die Schriftart „Aktiver Textblock“ eine Größe von 145 in Weiß mit einer Umrandung von 6 und die Schriftart „Inaktiv“ eine Größe von 145 in SlateGrey mit einer Umrandung von 6.
Setze die Sichtbarkeit-Einstellung des Inaktiv-Textfelds auf ausgeblendet. Dadurch wird verhindert, dass der Text angezeigt wird, bis die Bindung an das Widget im Spiel ausgelöst wird.
Damit werden alle Teile zusammengefügt, das Namensschild und das Avatar-Rückenschild.
Füge Ansichtsbindungen hinzu
Nachdem das UI-Design erstellt ist, ist es an der Zeit, Bindungen zu den Textboxen und Avatar_Image hinzuzufügen, basierend auf den Daten, die sie während einer Live-Sitzung erhalten müssen.
Das HUD-Kontrollgerät-Spielerinfo-Viewmodel bietet eine Möglichkeit, Teile deines HUD durch ein benutzerdefiniertes Widget zu ersetzen. Um diese Einstellung zu nutzen, musst du ein Viewmodel deines Rückenschilds erstellen.
Text des Spielernamens
Befolge diese Schritte, damit der Spielername im richtigen Feld angezeigt wird:
Öffne den Tab Anzeigebindungen, indem du auf Fenster > Anzeigebindungen klickst oder im unteren Bereich des Bildschirms Anzeigebindungen auswählst und ihn andockst.
So zeigst du die Liste HUDPlayerInfoViewModelBase der Anzeigebindungen an:
1. Öffne das Fenster Viewmodels, indem du Fenster > Viewmodels auswählst.
1. Gehe zu +Viewmodel und wähle HUD-Controller Team/Squad-Spieler-Info Viewmodel-Basis.
Die HUD-Kontrollgerät Teamspieler-/Kaderspieler-Infolistebietet eine Möglichkeit, die Informationen des steuernden Spielers ohne seine Truppe oder sein Team anzuzeigen.
1. Klicke auf Auswählen.
Wähle den Textblock aus der Liste Hierarchie aus oder klicke im UI-Vorschaubildschirm auf den Bereich Spielername.
Klicke im Tab „Bindungen anzeigen“ auf + Widget Active_Name hinzufügen.
Wähle das Aktiv-Feld „PlayerName“ aus und wähle dann Text > Auswählen.
Wähle im leeren Feld auf der rechten Seite HUDPlayerInfoViewModel > Info steuernder Spieler > Spielername > Aus dem Dropdown-Menü auswählen.
Die endgültige Bindung sollte folgendermaßen aussehen:
Wiederhole die Schritte 2 bis 3 für das Element Inactive_Name.
Um die Sichtbarkeitseinstellungen für den inaktiven Name zu ändern, füge ein neues Widget zu Inactive_Name hinzu. Wähle im ersten Feld aus und wähle Sichtbarkeit > Aus der Dropdown-Liste auswählen.
Klicke auf das leere Feld auf der rechten Seite und wähle Konvertierungsfunktionen > Nach Sichtbarkeit (Boolesche Variable) > Auswählen.
Durch die Auswahl dieser Option werden drei neue Felder angezeigt. Klicke auf das Link-Symbol neben Ist sichtbar. Wähle im Menü HUDPlayerInfoViewModel > Info steuernder Spieler > Ist eliminiert > Auswählen.
Setze True Sichtbarkeit auf Nicht trefferprüfbar (Nur Self). Lass False Sichtbarkeit auf zugeklappt. Wenn der Spieler eliminiert oder vom Spiel getrennt wird, ersetzt der Name Active_Name, aber wenn der Spieler am Leben ist, bleibt es zugeklappt.
Die endgültige Inactive_Name-Bindung sollte wie folgt aussehen:
Klicke auf das Bild, um es zu vergrößern.
Klicke auf Kompilieren, um die Änderungen zu übernehmen, und schon bist du mit den Spielernamen fertig!
Spieler-Avatar-Symbol
Wähle Avatar_Image aus der Hierarchie aus oder klicke im UI-Vorschaubildschirm auf den Spielersymbol-Bereich.
Klicke auf + Widget Profile_Image hinzufügen.
Gehe zu Avatar_Image > Brush und drücke Auswählen. Diese Bindung betrachtet im Wesentlichen die ausgewählte Pinsel-Einstellung aus dem Details-Panel des Avatar_Image.
Klicke in das leere Feld rechts und wähle Konvertierungsfunktionen > Bildpinsel aus Material erstellen > Auswählen.
Setze die leeren Bildgröße-Felder auf die Größe deines Symbolrahmenmaterials im Widget. In diesem Beispiel ist das Rahmenmaterial X=50 und Y=45.
Die endgültige Bindung sollte folgendermaßen aussehen:
Klicke auf das Bild, um es zu vergrößern.
Klicke auf Kompilieren, um dein Widget zu speichern.
Ziehe als Nächstes ein HUD-Kontrollgerät in dein Projekt und füge dein UMG-Widget (Unreal Motion Graphics) zum Gerät im Feld „Spielerinfo-Widget-Override“ hinzu.
Teste das Aussehen des benutzerdefinierten Avatar-Namensschilds im Spiel. Es sollte ungefähr wie das folgende Bild aussehen.
Klicke auf das Bild, um es zu vergrößern.
