wake-up-neo.com

Unity 4.6 - Wie skaliere ich GUI-Elemente für jede Auflösung auf die richtige Größe?

Die neue Unity 4.6 enthält eine neue grafische Benutzeroberfläche. Wenn ich die Auflösung von Unity ändere, passt sich der UI-Button perfekt an. Wenn ich jedoch das Nexus 7-Gerät teste, erscheint der Button zu klein. Irgendeine Idee, wie man das löst?

Unity 4.6

Android - Nexus 7 2Gen

28
benLIVE

Das neue GUI-System von Unity verwendet "Anker", um zu steuern, wie GUI-Elemente (wie Schaltflächen) im Verhältnis zu ihrem übergeordneten Container skaliert werden.

Unity hat ein Tutorial-Video zur Verwendung der neuen "Rect-Transformation" -Komponente (wo die Anker konfiguriert sind) hier: http://unity3d.com/learn/tutorials/modules/beginner/ui/rect-transform .

Die letzte Hälfte des Tutorials dreht sich alles um Anker. Diese Seite enthält Links zu der gesamten Tutorialserie. Es ist nicht zu lang. Du solltest das Ganze beobachten.

Spezifisch für Ihre Frage:

Die Anker sind in Ihrem ersten Screenshot sichtbar. Das sind die 4 kleinen Pfeile oben links auf Ihrer Schaltfläche.

Im Moment ist Ihre Schaltfläche nur in der oberen linken Ecke verankert.

Die zwei rechten Anker müssen nach rechts gezogen werden, damit der rechte Rand der Schaltfläche in einem Bereich innerhalb des übergeordneten Containers verankert wird.

Abhängig von Ihrer Situation müssen die beiden unteren Pfeile möglicherweise nach unten gezogen werden, damit auch die untere Kante Ihrer Schaltfläche verankert wird.

Das Video, das ich oben verlinkt habe, behandelt all dies ausführlich.

Damit die Schriftgröße bei unterschiedlichen Auflösungen gut skaliert werden kann, müssen Sie der Basisoberfläche Ihrer Benutzeroberfläche eine Referenzauflösungskomponente hinzufügen und konfigurieren, wie zuvor von Ash-Bash32 beschrieben.

Update: Der beste Weg, eine Referenzauflösungskomponente hinzuzufügen, ist über das Inspektorfenster für die Grundfläche der Benutzeroberfläche.

1) Klicken Sie unten im Inspektor auf die Schaltfläche "Komponente hinzufügen".

2) Geben Sie das Wort "Referenz" in das Suchfilterfeld ein.

3) Wählen Sie in den Suchergebnissen die Komponente "Referenzauflösung" aus.

steps to add a reference resolution component in Unity

23
schmosef

Die Referenzauflösung wird nun in Canvas Scaler umbenannt. Neben der Umbenennung wurden viele weitere Funktionen für die Dynamik des Canvas hinzugefügt. Sie können den Unity Doc von Canvas Scaler durchgehen und außerdem in diesem Artikel nach einem praktischen Beispiel für die Verwendung von Canvas Scaler suchen. Vergewissern Sie sich auch, dass Sie die Ankerpunkte gut einsetzen, um die Stabilität zu erhöhen.

21
gameOne

Zum Skalieren der Benutzeroberfläche fügte die ReferenceResolution-Komponente zum Canvas-Bereich hinzu, den Sie skalieren möchten .enter image description here

P.S. Es gibt keine Dokumentation für ReferenceResolution

10
Ash-Bash32

Wenn Sie möchten, dass die Schaltfläche für alle Bildschirme und Auflösungen die gleiche Größe hat, müssen Sie die Leinwandskalierkomponente zur Leinwand hinzufügen und den Bildschirmanpassungsmodus auf Folgendes einstellen: Breite oder Höhe anpassen. Hier ist der Link zu den Dokumenten, hier hilft viel, wenn Sie auf verschiedene Größen oder Auflösungen zielen möchten:

http://docs.unity3d.com/Manual/HOWTO-UIMultiResolution.html

2
MykeAngel

Dies wird riesig und umständlich, wenn Sie mit dem Auslegen von Code und mit einem Canvas-Scaler beginnen. Deshalb möchte ich Ihnen eine gründliche Antwort geben, um jemanden die Stunden zu retten, die ich durchgemacht habe.

Verwenden Sie zunächst nicht anchoredPosition, um etwas zu positionieren, es sei denn, Sie wissen, dass es eine Zahl von 0,0 bis 1,0 ist. Verwenden Sie die RectTransform localPosition, um das eigentliche Layout festzulegen, und denken Sie daran, dass es sich auf den übergeordneten Anker bezieht. (Ich musste ein Raster von der Mitte aus anlegen)

Legen Sie anschließend einen Canvas Scaler auf das übergeordnete Layoutobjekt UND die inneren UI-Teile. Einer macht das Layout an der richtigen Stelle, der andere ändert die Größe der Elemente, sodass sie tatsächlich richtig angezeigt werden. Sie können sich nicht auf das übergeordnete Element verlassen, es sei denn, die untergeordneten Elemente verfügen auch über Skalierer (und Graphic Raycasters, um sie zu berühren). 

Drittens: Wenn Sie einen Scaler verwenden, verwenden Sie NICHT Screen.width und height. Nehmen Sie stattdessen an, dass der Bildschirm derselbe Wert ist, den Sie für die Scaler verwenden (hoffentlich haben Sie denselben verwendet oder wissen, was Sie tun). Die Bildschirmbreite gibt immer die tatsächlichen Gerätepixel und auch Netzhautgeräte zurück. Die Canvas-Scaler berücksichtigen dies jedoch NICHT. Dies gibt wahrscheinlich die einzige verbleibende Möglichkeit, die tatsächliche Bildschirmauflösung zu ermitteln, wenn Ihr Spiel dies wünscht. Bearbeiten: Dieser Absatz gilt für alle übergeordneten Zeichenflächen, die mit dem Code verbunden sind, der für das Layout verwendet wird. Nicht streunende Leinwände, Sie können es wahrscheinlich verwechseln. Denken Sie einfach an die Unity-Richtlinien zur Leistung bei Leinwänden.

Viertens ist die Leinwand immer noch ein bisschen fehlerhaft. Trotz des oben beschriebenen Vorgangs werden einige Dinge nicht gerendert, bis Sie eine Leinwand löschen und neu erstellen, wenn Sie die Szene erneut öffnen oder sie abstürzt. Ansonsten ist das oben die allgemeinen "Regeln", die ich gefunden habe.

Um ein "Gitter von Dingen" zu zentrieren, können Sie nicht nur die Hälfte oder Breite des Canvas-Scalers verwenden. Sie müssen die Höhe Ihres Gitters berechnen und den Versatz auf die Hälfte setzen, andernfalls wird es immer etwas abweichen. Ich habe dies nur als zusätzlichen Tipp hinzugefügt. Diese Berechnung funktioniert für alle Orientierungen.

1
Stephen J