幅または高さを満たす塗りつぶしUnity正方形

私はこの要件でボードを作成しようとしています：

• 正方形である必要があります。
• 利用可能な幅または高さに合わせる必要があります。
• キャンバスの中央に配置する必要があります。
• 必要に応じて、追加の中間キャンバスにラップできます。

私はアンカーで遊んでいますが、それを行うための組み合わせを見つけていません。私が考えることができる唯一の解決策は、コンテナのある種の「OnResize」をスクリプト化し、ボードのサイズをプログラムで設定することです。

これがオリジナルのレイアウトです。（1）はBoardCanvasです。（2）は取締役会です。

画面が高くなると正方形が大きくなりますが、正方形のままです。

または削減：

ただし、上記の例では上端と下端にスナップしていますが、垂直方向のスペースが使用可能な幅よりも高くなる場合、正方形が左と右の境界に応じてサイズを制限することも必要です。

Q1：アンカー/ピボットでこれを行う方法はありますか？動作する場合は、BoardCanvasとBoard自体の間に中間キャンバスを作成してもかまいません。

Q2：その場合、アンカーをどこに配置すればよいですか？中間オブジェクトが必要ですか？

Q3：そうでない場合、スクリプトで解決策はありますか？キャンバスに処理するOnResizeはありますか？リストにサイズ変更イベントが表示されませんが、どこを探したらよいかわかりません。すべてのフレームでそれをテストすることは少しやり過ぎに思え、イベント駆動がより良いように思えます

ありがとう！

最後に、私はそれを行う方法を見つけました（v5.0.0でテスト済み）。

• 向きを確認するためのコードや条件は必要ありません。
• スケールでハッキングせず、参照解像度も必要ありません。

UIビデオチュートリアルでは、テキストドキュメントに詳しく記載されているものの、「自動レイアウト」システムの大部分が欠落しています。

自動レイアウトは、「レイアウト」と「レイアウトコントローラ」で構成されるメカニズムです。レイアウトコントローラは、UIゲームオブジェクトにアタッチできるコンポーネントです。コントローラはRect Transformsをインテリジェントにサイズ変更できます。

特定のコントローラーは、コンポーネントが適用されるオブジェクトのサイズを変更できますが、他のコントローラーは、そのオブジェクトの子のサイズを変更できます。

いくつかの組み込みコントローラーがあります。それらの1つはAspect Ratio Fitterです。

まず、Boardパネルを選択し、新しいAspect Ratio Fitterコンポーネントをアタッチします。

Aspect Ratio Fitterオブジェクトの望んでいたアスペクト比を「維持」することを目指しているようです。これを行うには、オブジェクトを（アスペクト比を維持しながら）子オブジェクトを「ラップ」するように設定するか、または（アスペクト比を維持しながら）コンテナを拡大して合わせるように設定します。

次に、Fit In Parentオプションを選択し、目的のアスペクト比を1に設定して、完全な正方形が必要であることを指定します。

これは私が望んだものと非常に似たレイアウトで得られますが、ボードにその寸法を伝える必要はありませんでした。しかし、それでも、描かれているように、それが正方形でなければならないことはわかっています。

垂直方向に縮小または拡大すると、アスペクト比を維持しながら正方形が親に追従します。

魔法のように、幅を減らして変更を行うと、「アスペクト比フィッター」が自動的に行うため、添付するスクリプトや変更するプロパティはありません。

最後に、そこに少しのマージンが必要だったので、スペーサーとして機能するコンテナrect変換を配置し、をBoardからに移動BoardCanvasしますMarginCanvas。

これは可能ですが、画面が横向きか縦向きかを定義し、いくつかの値を変更するためのコードは、ほんの数行です。

キャンバスで、Canvas Scalerの「Uiスケールモード」を「画面サイズに合わせて拡大縮小」にし、「画面一致モード」を「幅または高さを一致」にする必要があります。

デフォルトの参照解像度800x600が使用されていると想定し、画面のビューポートが横長（たとえばScreen.width、より大きいScreen.height）であると想定すると、[一致]スライダーを[高さ]までずっと設定する必要があります1。

次に、中央/中央のアンカープリセットを使用して、キャンバスに画像を配置します。また、画像の幅と高さをキャンバススケーラーの参照解像度のY値と一致させる必要があります。

次に、カメラのビューポートのサイズを変更し、ビューポートの高さに合わせて高さを伸ばしながら、画像がその形状を保持していることを確認できます。

画面が縦向きであり、必要に応じて確認や変更を行うためにコードを記述する必要がある場合は、スケーラーの一致値をにし0、画像の高さと幅を参照解像度に一致するように変更する必要があります。 X値。（下の画像では、画像の幅と高さが両方です800）

小さい画像を内側に収めようとする場合は、幅と高さを参照解像度のXまたはY値（横または縦に応じて）に合わせて調整することで、画像を「スケーリング」できます。たとえば、（ビューポートが縦向きであるため）参照解像度のX値の半分を使用する青い正方形を作成し、適切に拡大縮小します。

さらに、チェッカーボードなどが必要な場合は、各画像のXとYの位置と高さと幅を、Canvas Scalerの解像度のパーセンテージに基づいて自由に設定できます。