Ein Widget das ein Mesh als 2D im Userinterface darstellt


Erstellen eines Avatarabbildes als 2D Widget. Relativ einfach. Diese Technik ist recht flexibel und kann nach eigenen Bedürfnissen sehr einfach angepasst werden. Zum Beispiel um im Inventar gerenderte Vorschaubilder darzustellen.


Als Erstes erstellen wir ein Rendertarget.

Also im Contenbrowser mit Rechtsklick auf Materials & Textures und darin dann Render Target auswählen. Dies nennen wir um in Avatar_Mirror.


Wir öffnen das Rendertarget und passen die Größe unseren Bedürfnissen an. In meinem Fall sind folgende Einstellungen ideal. Allerdings benutze ich es halt zur Darstellung des Avatars. Man kann diese Technik aber auch für bewegte 3D-Vorschaubilder im Inventar oder ähnliches benutzen.

11730-01-rendertarget-size-png

Auf jeden Fall sollte die Größe so gewählt werden das von dem Objekt, welches am Ende dargestellt werden soll, nichts abgeschnitten wird.

Für das Rendertarget brauchen wir nun nichts mehr. Es ist jedoch ratsam es offenzulassen und in einem Nebenfenster im Auge zu behalten, weil dadurch die nächsten Schritte einfacher werden.

Als Nächstes erstellen wir einen Actor. Einen ganz normalen Actor in der Auswahl ganz oben.

11731-02-actor-png

Diesen benennen wir um in MeshWidget_actor.

Hier wird nun alles reingepackt, was im Widget zu sehen sein soll.

11732-03-actor-komponenten-png

In diesem Fall kommt eine Camera hinzu, umbenannt in Mirror 2D

Ein Skeletal Mesh umbenannt in DollMesh

Ganz wichtig ist ein Spotlight das alles, was von der Kamera gefilmt wird von vorne beleuchtet. Wenn ihr dies nicht macht, habt ihr nur einen schwarzen Umriss. Wenn ihr etwas in der Art erzeugen möchtet, sieht dann aus wie ein Shadow Warrior, dann lasst halt das Licht weg.

Zusätzlich habe ich noch Skylight und Atmospheric Fog eingefügt, um die Ausleuchtung etwas besser hinzubekommen. Ist nicht nötig, aber experimentiert da ruhig etwas rum.

Hier kommt übrigens alles rein, was später zu sehen sein soll. Wenn der Avatar also zum Beispiel auf einem Podest stehen soll, kommt der hier rein. Was auch schick aussieht, ist ein Flammenparticle System von unten, das hat dann ein wenig was von Höllenfeuer usw.

Einfachheitshalber bleiben wir jedoch nur beim Avatar, SKamera und SpotLight.

Diese Komponenten werden nun in einer Reihe angeordnet. Das Skeletal Mesh zuerst. Dann die Kamera, diese wird auf den Avatar ausgerichtet, sodass dieser komplett im Bild ist.

Und über der Kamera kommt das Spotlight hin das den Avatar anstrahlt. Bei der gesamten Ausrichtung hilft der Trick mit dem offenen Rendertarget, um zu sehen, was abgebildet wird. Hier sollte man auf jeden Fall einen Sportstrahler verwenden, denn sonst sieht man einfach nur schwarz.

Nun klickt ihr eines der Komponenten an und gebt unter Details den Suchbegriff „owner“ ein.

Nun geht ihr alle Komponenten durch und über all wo Owner No See erscheint, macht ihr dort ein Häkchen rein.

11733-04-owner-no-see-png

Der DollMesh könnt ihr noch eine Animation, z.B. Idle falls vorhanden, hinzufügen, dann bewegt sich der Avatar noch ein wenig. Und vorher natürlich noch ein DummyMesh, wie zum Beispiel das Mannquin von Unreal, damit überhaupt etwas zu sehen ist.

Zusätzlich fügen wir dem Ganzen noch eine Variable hinzu. Diese benennen wir in InputMesh um. Wir schalten sie auf Typ „Skeletal Mesh Object Reference“.

11734-05-variable-png

11735-06-variable-settings-png

Zudem muss diese Variable auf Instance Editable und Expose on Spawn gestellt werden.

Wir wechseln nun vom Viewport in den Eventgraph.

An das Event BeginPlay hängen wir die Node Set Skeletal Mesh.

Das Target wird mit DollMesh und New Mesh mit InputMesh verbunden.

11736-07-meshwidgetactor-event-graph-png

Kümmern wir uns nun um das Material.

Legen wir also ein neues Material an und nennen dies MeshWidget_mat.

Die Materialeigenschaften stellen wir auf

Material Domain: User Interface

Blend Mode: Masket

11737-08-materal-details-png

In das Material kommen schlicht zwei Nodes. Einmal Texture Sample wo als Texture das Rendertarget „Avatar_Mirror“ reinkommt.

11738-09-texture-sample-texture-png

Der RGB-Ausgang wird mit Final Coloor von dem Material verbunden.

Den Alphaausgang verbinden wir mit einem OneMinus und diesen dann mit Opacity Mask.

11739-10-material-nodes-png

Dies dient dem folgenden Zweck. Durch die Maske wird der Avatar später freigestellt dargestellt. Ansonsten hätte dieser einen schwarzen Rand um sich herum. Dies ist natürlich nicht so wichtig, wenn ihr noch mehr Objekte wie eine Plattform oder eine Wand im Hintergrund habt. OneMinus ist wichtig, weil ansonsten würde der schwarze Rahmen dargestellt werden und die Figur als durchsichtig. Netter Effekt, allerdings wüsste ich dafür keine Anwendung.

Das Material ist nun fertig.

Fangen wir mit dem Widget an.

Wir erstellen also ein neues Widget. Dies beinhaltet nur ein Image. Wir benennen dies in ShowMesh um.

11740-11-meshimage-png

Das Image stellen wir auf Is Variable. Size X und Y bekommt die gleiche Größe wie das Rendertarget. Und als Brush wählen wir das MeshWidget_mat.

11741-12-showmesh-einstellungen-png


Hier noch ein kleines Anwendungsbeispiel.


11742-beispiel-png

Über den Autor

Mal etwas mehr über mich.


Obwohl ich schon zu Zeiten des C64 mit Assembler angefangen habe, C (ohne ++) weiter gemacht habe und am Ende dann C# für mich entdeckt habe, bin ich nun bei der Unreal Engine und BP gelandet. Trotzdem würde ich mich eher als Anfänger bezeichnen, denn irgendwie lernt man beim Programmieren nie aus. Optimieren kann man immer und ständig jenseits einer "Hello World" - Anwendung.


Bei Artist, nun ja. Anfänger ist eigentlich übertrieben. Leider komme ich bei der Spieleprogrammierung nicht drumherum. Mir fehlt an der Stelle einfach etwas die Kreativität der bildlichen Vorstellungskraft und vor allem der geschickte Umgang mit der Maus in einer 3D-Umgebung.

Tomarr Urgestein

Kommentare