Einheits-UI-Quadrat, das die Breite ODER Höhe ausfüllt

11

Ich versuche ein Board mit diesen Anforderungen zu erstellen:

  • Es soll quadratisch sein.
  • Es MUSS auf die verfügbare Breite ODER Höhe passen.
  • Es soll in der Leinwand zentriert sein.
  • Es kann in so viele zusätzliche Zwischenbilder wie nötig eingewickelt werden.

Ich spiele mit Ankern, aber ich finde keine Kombination dafür. Die einzige Lösung, die ich mir vorstellen kann, besteht darin, eine Art "OnResize" des Containers zu skripten und die Größe der Karte programmgesteuert festzulegen.

Dies ist das ursprüngliche Layout. (1) ist das BoardCanvas. (2) ist der Vorstand.

Ursprüngliches Layout

Ich möchte, dass das Quadrat wächst, wenn der Bildschirm größer wird, aber immer noch quadratisch ist:

Geben Sie hier die Bildbeschreibung ein

Oder reduziert:

Geben Sie hier die Bildbeschreibung ein

Obwohl diese vorherigen Beispiele am oberen und unteren Rand einrasten, möchte ich auch, dass das Quadrat seine Größe abhängig vom linken und rechten Rand begrenzt, wenn der vertikale Raum größer als die verfügbare Breite wird:

Geben Sie hier die Bildbeschreibung ein

Q1: Gibt es eine Möglichkeit, dies mit den Ankern / Drehpunkten zu tun? Es ist in Ordnung für mich, Zwischenbilder zwischen BoardCanvas und Board selbst zu erstellen, wenn dies funktioniert.

F2: Wenn ja, wo soll ich die Anker positionieren? Benötige ich Zwischenobjekte?

F3: Wenn nicht, wird die Lösung per Skript erstellt? Gibt es OnResize auf der Leinwand, die verarbeitet werden kann? Ich kann kein Größenänderungsereignis in der Liste sehen, aber vielleicht weiß ich nicht, wo ich danach suchen soll. Ich denke, dass das Testen bei jedem Frame ein bisschen übertrieben erscheint, ereignisgesteuert scheint es besser zu sein.

Vielen Dank!

Xavi Montero
quelle

Antworten:

13

Schließlich habe ich einen Weg gefunden, dies zu tun (getestet in v5.0.0), und zwar auf folgende Weise:

  • Benötigt keinen Code oder Bedingungen, um die Ausrichtung zu überprüfen.
  • Hackt nicht mit Skalen und benötigt auch keine Referenzauflösung.

In den UI-Video-Tutorials fehlt ein großer Teil, obwohl er in der Textdokumentation gut dokumentiert ist: Das "Auto-Layouts" -System.

Auto-Layouts sind Mechanismen, die aus "Layouts" und "Layout-Controllern" bestehen. Layout-Controller sind Komponenten, die an das UI-Spielobjekt angehängt werden können. Controller können die Größe ändernRect Transform intelligent .

Bestimmte Controller können die Größe des Objekts ändern, auf das die Komponente angewendet wird, während andere Controller die Größe der untergeordneten Elemente dieses Objekts ändern können.

Es gibt ein paar eingebaute Controller. Eines davon ist das Aspect Ratio Fitter.

Zuerst wähle ich mein BoardPanel aus und füge eine neue Aspect Ratio FitterKomponente hinzu:

Geben Sie hier die Bildbeschreibung ein

Das Aspect Ratio Fitterscheint darauf abzuzielen, das gewünschte Seitenverhältnis des Objekts "beizubehalten". Zu diesem Zweck kann das Objekt entweder so eingestellt werden, dass es ein untergeordnetes Objekt "umschließt" (während das Seitenverhältnis beibehalten wird), oder es kann so eingestellt werden, dass es seinen Container erweitert und anpasst (während das Seitenverhältnis beibehalten wird).

Ich wähle dann die Fit In ParentOption und gebe an, dass ich ein perfektes Quadrat möchte, indem ich das gewünschte Seitenverhältnis auf 1 setze:

Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein

Dies ergibt ein sehr ähnliches Layout wie das, das ich wollte, aber ich musste dem Board nicht die Abmessungen mitteilen. Trotzdem weiß es, dass es quadratisch sein muss, wie abgebildet:

Geben Sie hier die Bildbeschreibung ein

Wenn ich vertikal schrumpfe oder expandiere, folgt das Quadrat dem übergeordneten Element, wobei das Seitenverhältnis beibehalten wird:

Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein

Wenn die Änderung durch Verringern der Breite geändert wird, muss auf magische Weise kein Skript angehängt und keine Eigenschaft geändert werden, da der "Seitenverhältnis-Monteur" dies automatisch für uns erledigt:

Geben Sie hier die Bildbeschreibung ein

Schließlich, da ich dort ein wenig Spielraum haben wollte, platziere ich einfach eine Container-Rect-Transformation, die als Abstandshalter fungiert, und verschiebe die Boardvon der BoardCanvasin die MarginCanvas:

Geben Sie hier die Bildbeschreibung ein

Xavi Montero
quelle
Ah, großartig, das sieht nach einer exzellenten Lösung aus. Ich bin froh, dass du es gefunden hast, danke fürs Teilen!
Chris McFarland
3

Dies ist möglich, aber wahrscheinlich mit nur einer oder zwei kleinen Codezeilen, um zu definieren, ob der Bildschirm im Quer- oder Hochformat angezeigt wird, und um einige Werte zu ändern.

Auf der Leinwand müssen Sie festlegen, dass der "UI-Skalierungsmodus" des Canvas-Skalierers "Mit Bildschirmgröße skalieren" und "Bildschirmanpassungsmodus" "Übereinstimmungsbreite oder -höhe" ist:

Geben Sie hier die Bildbeschreibung ein

Unter der Annahme, dass die Standardreferenzauflösung von 800 x 600 verwendet wird und das Ansichtsfenster des Bildschirms im Querformat angezeigt wird (z. B. Screen.widthgrößer als Screen.height), muss der Schieberegler "Anpassen" bis zur Höhe als eingestellt werden1 .

Sie möchten dann ein Bild auf der Leinwand mit der Voreinstellung für den mittleren / mittleren Anker. Sie möchten auch, dass die Breite und Höhe des Bildes mit dem Y-Wert der Referenzauflösung Ihres Canvas-Skalierers übereinstimmt.

Geben Sie hier die Bildbeschreibung ein

Anschließend können Sie die Größe des Ansichtsfensters der Kamera ändern und feststellen, dass das Bild seine Form beibehält, während die Höhe an die Höhe des Ansichtsfensters angepasst wird:

Geben Sie hier die Bildbeschreibung ein


Wenn der Bildschirm im Hochformat angezeigt wird - und hier müssen Sie wahrscheinlich Code eingeben, um ihn nach Bedarf zu überprüfen und / oder zu ändern -, müssen Sie den Übereinstimmungswert des Skalierers festlegen 0und die Höhe und Breite Ihres Bilds an die Referenzauflösung anpassen X-Wert. (In den Bildern unten sind sowohl die Breite als auch die Höhe des Bildes angegeben. 800)


Wenn Sie versuchen, ein kleineres Bild hinein zu passen, können Sie das Bild "skalieren", indem Sie seine Breite und Höhe an den X- oder Y-Wert der Referenzauflösung anpassen (abhängig von Quer- oder Hochformat). So habe ich beispielsweise ein blaues Quadrat erstellt, das die Hälfte des X-Werts der Referenzauflösung verwendet (da das Ansichtsfenster ein Hochformat ist) und das gut skaliert und verkleinert wird:

Geben Sie hier die Bildbeschreibung ein

Wenn Sie ein Schachbrett oder etwas anderes möchten, können die X- und Y-Position sowie die Höhe und Breite jedes Bilds auf einem Prozentsatz der Auflösung des Canvas-Skalierers basieren, um zu tun, was Sie möchten:

Geben Sie hier die Bildbeschreibung ein

Chris McFarland
quelle
1
Vielen Dank, Chris, für deine sehr detaillierte Antwort. Schließlich habe ich eine Lösung gefunden, die keine Codezeile zur Überprüfung der Ausrichtung benötigt, nicht mit der Waage hackt und keine Referenzauflösung verwendet. Ich werde meine eigene Antwort veröffentlichen, aber ich wollte nicht weitergeben, ohne mich für Ihre Bemühungen und Ihre Illustration zu bedanken.
Xavi Montero