クリックゲーム開発

#16. Anchorでサイズ可変の所持金表示UIの作り方2

Anchorでサイズ可変の所持金表示UIの作り方

前回から所持金表示UIを作っています
そこでは、Unity UI の Anchor (アンカー)について解説しました。

今回は、前回作った下地の上にアイコンと所持金のテキストを配置します。

コインのアイコンを配置する

前回 Hierarchy に作った下地である UITop の下に、UI > Image を作成します。
名前は CoinIcon としました。

コインアイコンには AssetStore の無料アイコンを使用しています。

画像に応じて適宜スケールは調整してください。

コインアイコンの配置ですが、ここでもアンカーを使いましょう。
・下地の左上を基点
・基点から右に15ピクセル
・基点から下に15ピクセル
という設定を下図のようにします。

所持金UIのアイコン

・Anchor の MinとMaxを同じ (0,1)とすることで、基点を画面左上とすることができます
・そこからの位置を、Pos X 15
・そこからの位置を、Pos Y -15

と設定することで実現できます。
Anchor は使いながら覚えていきましょう。

所持金UIのテキストを配置する

続いて所持金を表すテキストを配置します。
UI > TextMeshPro を子に作成し、名前を CoinText としました。

テキストとアイコンの位置関係が大事です。
今度は、Anchor をアイコンの縦方向中央からの相対位置とします。
・コインアイコンの Yの中心を基点
・そこから右に

下図のように設定しました
所持金UIのテキスト

・Anchor の MinとMaxを同じ (0, 0.5)とすることで、基点をコインの左端中心
・そこからの位置を、Pos X 130

こうすると後述するテキストの設定とあわせて揃えやすいかと思います。
(ただし、ぴったり中心だとしっくりこなかったので見栄えの微調整として、Pos Y 5 を入れました。)

テキストの設定は、下図のように水平方向は左揃え、垂直方向は中央揃えとします。

所持金UIのテキスト設定

このように、アイコンの横に中央揃えでおくことで、フォントサイズやアイコンのスケールを変えても最低限の調整で済むようにしました。

終わりに

いかがでしたでしょうか。
2回に渡って所持金UIを作ることで、Anchor について理解が深まったと思います。

次回は、Enemyを倒したときにこのUIへ向かってコインが向かって所持金が増えるという演出を作ります。

つづく。