Jump to content
Unity Insider Forum
DerStefan

[UI] Problem mit Platzierung und Größe von Buttons

Recommended Posts

Hallo Unity Community,

ich arbeite gerade an einem einfachen Beispiel, in dem ich Buttons platzieren möchte.
Meine erste Idee war es, dies mit Image Buttons zu tun, aber ich denke, dass es performance-technisch
besser wäre, wenn alle grafischen Elemente bereits im Hintergrundbild integriert wären.
(Speziell in meinem Fall werden sich die grafischen Buttons nur minimal von einander unterscheiden.)
Dies heißt also, dass ich ganz normale Unity-Buttons so platzieren möchte, dass sie über den grafischen "Buttons" liegen.

Ich habe also einfach ein Canvas erzeugt, darin ein Panel mit dem entsprechenden Hintergrundbild und mehrere Unity-Buttons.

Leider habe ich gleich 2 Probleme:
1) Platzierung
Wenn ich die Buttons innerhalb des Editors korrekt platziere und dann auf Play drücke, befinden sie sich an einer anderen Stelle.
Heißt also, dass mir die Scene und Game-Views in diesem Fall nicht helfen, da ich es probieren und testen muss.
Sicherlich hab ich da was übersehen.

2) Falsche Abmessungen
Das Hintergrundbild, das die grafischen Buttons integriert hat, hat eine Auflösung von 1920x1080.
Ich habe das Bildverhältnis innerhalb von Unity auf 16:9 (statt Free Aspect) geändert.
Die bereits integrierten Grafik-Buttons haben jeweils eine Auflösung von 200x100.
Wenn ich meinen Unity-Buttons die gleiche Auflösung gebe, sind sie in der Vorschau viel größer als die Grafik-Buttons.
Drücke ich auf Play, passt es von der Größe her, aber die Position ändert sich (wie bereits in Punkt 1 erwähnt).

Kompiliere/builde ich, ist das Ergebnis wieder ganz anders.

Zusammengefasst kann man sagen: Größe und Position sind in allen 3 Fällen unterschiedlich.

So sieht das ganze aus, und nein, das wird nicht das finale Hintergrundbild sein :D
g7z7d3sk.png

Danke für jede Hilfe!

Share this post


Link to post
Share on other sites

Mal ohne gross auf das spezifische Problem ein zu gehen, was für mich danach aussieht als ob dein Background-Bild falsch skalliert, weil der Button immer gleich gross aussieht(oder Kameraeinstellung usw.), würde ich eher von dieser Technik abraten. Es macht es um einiges aufwändiger dinge zu platzieren, wie du ja selbst merkst, und spätere überarbeitung ist auch in meinen Augen mühseeliger.

Das ganze jetzt rein performance Technisch machen zu wollen, denke ich ist hier etwas übertrieben. Wenn das nicht gerade auf einem Toaster laufen soll, sollte das kein Problem sein.
Ausserdem wenn du, wie du sagst, eh alles die gleichen Buttons hast, teilen sich diese ja auch das ensprechende Sprite, was dann alles in einem rutsch ausgeführt wird.
Korrigiert mich falls ich falsch liege, aber ich denke du baust hier Probleme wo keine sein müssten und es ist für mich kein gutes Fundament.

  • Thanks 1

Share this post


Link to post
Share on other sites

Ich muss da Jomnitech zustimmen du machst dir das leben schwerer als es sein muss. Stell dir vor du willst die Scallierung der Buttons ändern das dauert dann wieder unnötig lange.

Ich würde tatsächlich mit den Unity Buttons mit verändertem Sprite arbeiten.  Aber wenn du das tatsächlich so machen willst schau dir mal die Erweiterung: TextMeshPro im Unity Store an. (ist for free) Damit haste mehr UI-Optionen als in Vanilla Unity vielleicht geht es mit dem Tool besser. 

 

LG Peanut :3

 

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites

Hallo und danke für eure Unterstützung!

Ich habe das ursprüngliche Problem übrigens gelöst, indem ich im Canvas die Reference Resolution auf 1920x1080 gesetzt habe
und den UI Scale Mode auf "Scale With Screen Size" festgelegt habe.
Außerdem hab ich den Screen Match Mode auf Expand gesetzt (weiß nicht, ob das positiven Einfluss hatte).

Selbstverständlich ist mir eure Meinung wichtig, daher habe ich darüber nochmal nachgedacht.
Prinzipiell gebe ich euch Recht, dass die Art und Weise (selbst wenn's von der Performance her Toaster-Kompatibel ist :D ), nicht so praktisch ist.
Allerdings waren meine Beispiele nur die halbe Wahrheit.

Es soll am Ende eher in diese Richtung hier gehen:
5gwc5xdx.png

Unterschiedliche Schriftgrößen und 3D.
Die normale Button-Beschriftung in Unity gibt das möglicherweise nicht her.
Heißt auch, dass die Buttons dann nicht den gleichen Sprite nutzen könnten.
(Hintergrund ist gleich, aber die Schrift ist anders.)

TextMeshPro sieht allerdings interessant aus!
Hab mir mal paar Beispiele angeschaut, und auf einem Blog hab ich das hier gesehen, was wirklich beeindruckend ist:
textmesh-gif-2.gif

Auf die Schnelle habe ich jetzt das hier hinbekommen:
hali59m9.png

Ein UI-Image eingefügt, als Source Image diesen grünen Kasten verwendet
und innerhalb des UI-Images ein UI-TextMeshPro-Element eingefügt und darin die Schrift reingeschrieben und Farbe + Größe mit tags definiert.

Die Option TextMeshPro war bei mir übrigens schon standardmäßig drin.
Wenn es keine 3D-Schrift ist, dann ist das auch kein so großer Untergang.
Hätte sonst alles mit Photoshop gemacht, aber so werde ich mich nur auf die Hintergründe konzentrieren und die Schrift in Unity machen.

Viele Grüße

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...