Unityの基礎設定Anchor（アンカー）の仕組みについて

Unityの基礎設定Anchor（アンカー）の仕組みについて

Unityでの作業で、こんな現象が起きた事はありませんか？

・ボタンやテキストをきれいに並べられない

・スマホの画面サイズごとにUIがズレる

・ゲーム画面のサイズを変えたら、端に配置していたボタンが消えた

・画面を大きくしたら、ボタンが不自然に引き伸ばされた

それはアンカーの設定がデフォルト（中央固定）のままになっているからです。

アンカーの仕組みを理解すれば、マルチプラットフォーム向けの開発もしやすくなります。

この記事を通して、どんな画面比率でも崩れないUIを作れるようになりましょう。

アンカーとは？

UIパーツを画面のどこに繋ぎ止めておくかを決めるピンです。

UnityのUI（Rect Transform）にある、「4つの白い三角」がアンカーです。

UIパーツは常に「自分のアンカーからの距離」をキープしようとします。

Anchor Presets（プリセット）の使い方

まずはRect Transformの左上にある四角い枠（Anchor Presets）を設定します。
（画像左上のピンクの枠で囲っている箇所をクリックするとプリセットが出てきます。）

アンカーを「広げる（Stretch）」

プリセットの下側や右側にある、矢印がびよーんと伸びている項目がストレッチです。

これはアンカーが「点」から「線・面」に変わる設定です。

4つの三角ピンがバラバラに離れると、UIパーツは「引き伸ばされる」性質に変わります。

下の画像のように、各方向に100の値を入力した場合は

親であるContent内で100の距離をキープしながら伸びてくれるUIパーツになります。

因みに上記で色々と説明したアンカーは

【Alt＋クリック】【Shift＋クリック】で簡単に設定できます。

ショートカットキーは他にもいろんなことができるので、一部だけ紹介します。

①Altを押しながらプリセットをクリック：UIの「位置」もその場所にパッと移動する

②Shiftを押しながらプリセットをクリック：ピボット（中心点）も一緒に動く

まとめ

UIを作成する際にはまずアンカーを設定する癖をつけましょう。

せっかく丁寧に配置したUIも、アンカーの設定をしていないと画面比率が変われば崩れてしまいます。

また、アンカーを使いこなせないとレイアウトを管理するコンポーネントを使用する時に苦労します。頑張りましょう…