前回から所持金表示UIを作っています。
そこでは、Unity UI の Anchor （アンカー）について解説しました。
今回は、前回作った下地の上にアイコンと所持金のテキストを配置します。
コインのアイコンを配置する
前回 Hierarchy に作った下地である UITop の下に、UI > Image を作成します。
名前は CoinIcon としました。
コインアイコンには AssetStore のドット絵無料アイコンを使用しました。
画像に応じて適宜スケールは調整してください。
コインアイコンの配置ですが、ここでもアンカーを使いましょう。
・下地の左上を基点
・基点から右に15ピクセル
・基点から下に15ピクセル
という設定を下図のようにします。
・Anchor の MinとMaxを同じ (0,1)とすることで、基点を画面左上とすることができます
・そこからの位置を、Pos X 15
・そこからの位置を、Pos Y -15
と設定することで実現できます。
Anchor は使いながら覚えていきましょう。
所持金UIのテキストを配置する
続いて所持金を表すテキストを配置します。
UI > TextMeshPro を子に作成し、名前を CoinText としました。
テキストとアイコンの位置関係が大事です。
今度は、Anchor をアイコンの縦方向中央からの相対位置とします。
・コインアイコンの Yの中心を基点
・そこから右に
下図のように設定しました
・Anchor の MinとMaxを同じ (0, 0.5)とすることで、基点をコインの左端中心
・そこからの位置を、Pos X 130
こうすると後述するテキストの設定とあわせて揃えやすいかと思います。
（ただし、ぴったり中心だとしっくりこなかったので見栄えの微調整として、Pos Y 5 を入れました。）
テキストの設定は、下図のように水平方向は左揃え、垂直方向は中央揃えとします。
このように、アイコンの横に中央揃えでおくことで、フォントサイズやアイコンのスケールを変えても最低限の調整で済むようにしました。
終わりに
いかがでしたでしょうか。
2回に渡って所持金UIを作ることで、Anchor について理解が深まったと思います。
次回は、Enemyを倒したときにこのUIへ向かってコインが向かって所持金が増えるという演出を作ります。
つづく。
