Widget Design (schöner machen)

  • Ahoi!


    Ich suche nach einem sehr guten Tutorial, womit man Widgets deutlich auf hübschen kann.

    Vor allem für Inventar, Character System usw.

    Im Grunde soll man damit ein sehr schönes Interface machen können.


    Eben damit das ganze ansehnlicher wird, als das Standard Kästchen Zeugs was es so gibt.


    Z.B. wie macht man in einem Widget, abgerundete Ecken usw.


    Freue mich auf Infos!

    Kann dazu bei Google und youtube nichts vernünftiges finden.

    • Offizieller Beitrag

    Ich kann dir nur sagen, dass widget fast wie html ist. Wenn du was hübsches machen möchtest, dann schau dir mal an, wie die designer html websites erstellen. Denn die vorgehensweise ist fast die selbe. Wenn man Buttons benötigt, die vom standard abweichen sollen, dann muss man selber in png buttons designen. Auch Borders als abgerundet muss man selber mit vektografik in anderen designer softwares erstellen und die vorhanden ersetzen. So wird das auch in HTML gemacht. CSS bietet tolle features. Sowas ähnliches bietet ue4 auch, aber nur wenig davon. Elemente, wie buttons, Bilder, oder Slots für dein Inventar können mit grid, horizontale, oder vertikale boxen sauber erstellt werden. Genauso wie in HTML und CSS. Deswegen schau dir beides an und du kommst sehr schnell auf super ideen.

    • Offizieller Beitrag

    Naja, immer in original Größe modellieren. Wenn dein Widget für 1080p ist, dann auch so die Knöpfe designen. Also ein leeres Blatt in original Größe erstellen und die Knöpfe in der richtigen Größe designen. Heute gibt es leider auch 4k Monitore. Man könnte sich daran auch anpassen. Aber die Widgets, oder die Boxen sind ja auch so anpassbar, dass sie maximal nur so groß werden, wie sie gedacht sind. Dann sind sie auf 4k genauso groß wie auf full hd.

    Ich habe oft alles auf einmal Design, bis das Menü fertig war und dann erst geschnitten, sodass einzelne Elemente daraus entstehen, die das Widget benötigt.

    Mit Rechtsklick habe ich mich noch nicht beschäftigt, oder drag and drop.

  • Rechte Maustaste geht mit Override "On mouse button down", dann auf Mouse Event input einfach einen "Is Mouse button down" node legen und "Right mouse button" auswählen (Das ganze an nen Branch). Drag & Drop geht ähnlich.

    Alles klar. Gerade die Lösung gefunden.

    Ist echt ziemlich umständlich.


    Man muss also die Override Funktion machen (weil es kein Mouse Event in Widgets existieren) und innerhalb "Override - On Mouse Button Down" dann entsprechend die Funktion oder Weiterleitung einbauen.

    Hier im Screenshot mein Inventar Button, wo die Gegenstände dann reingeladen und auch abgerufen werden können.




    Jetzt fehlt nur noch das ich das als Drag an Drop so machen kann, damit der Gegenstand weggeworfen wird.

    Während die rechte Maustaste dann zum "Benutzen" verwendet wird!

  • Naja, immer in original Größe modellieren. Wenn dein Widget für 1080p ist, dann auch so die Knöpfe designen. Also ein leeres Blatt in original Größe erstellen und die Knöpfe in der richtigen Größe designen. Heute gibt es leider auch 4k Monitore. Man könnte sich daran auch anpassen. Aber die Widgets, oder die Boxen sind ja auch so anpassbar, dass sie maximal nur so groß werden, wie sie gedacht sind. Dann sind sie auf 4k genauso groß wie auf full hd.

    Ich habe oft alles auf einmal Design, bis das Menü fertig war und dann erst geschnitten, sodass einzelne Elemente daraus entstehen, die das Widget benötigt.

    Mit Rechtsklick habe ich mich noch nicht beschäftigt, oder drag and drop.

    Das ganze Skaliert ja entsprechend mit der Auflösung des Spieler-Monitors. Wie gehe ich dann also sicher das die Auflösung der Grafiken auch so korrekt ist?


    Vor allem, welcher Dateityp ist dann für transparten Hintergrund zuständig.

    *.PNG

    oder was ist der beste Dateiformat für solche Grafiken?


    Bzw.

    Wie macht man dann so Animationen in das Widget, etwa wenn eine Waffe wenig Haltbarkeit hat, soll der Bereich hinter dem Gegenstand im Widget rötlich leuchte usw.


    Sozusagen allgemeine Tipps und Tricks wie man Widgets auf hübschen kann.