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

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.

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

Oder reduziert:

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:

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!

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:

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:

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:

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

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:

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:

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:

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.

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:

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:

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: