9.テキストとボタンの配置

４～８で記述したスクリプトのおかげで連打ゲームのシステムは完成しました。

しかしまだテキストやボタンの位置を決めていないです。

ここではその配置を行います。

Canvasの「土台」を整える（Scale With Screen Size）

「ボタンを置く前に、まずはどんな画面サイズでも崩れない『魔法の土台』を作ります」という書き出しにする。

Canvas を選択する。

左の「Inspector」から「Canvas Scaler」を探します。

UI Scale Mode を 「Scale With Screen Size」 に変更する。

Reference Resolution を一般的な解像度（例：1920 x 1080）に設定する

「Scale With Screen Size」にする理由

「Scale With Screen Size」の最大のメリットは「スマホの種類や画面比率に関わらず、UIが勝手にいい感じに拡大・縮小してくれること」です。

崩れない安心感:iPhone、Android、タブレットなど、画面サイズがバラバラな端末でも、あなたが配置した「ボタン」や「スコア」が、画面の端っこに寄ったり、小さくなりすぎたりせず、常に同じ見た目で表示されます。

メンテナンス性: もし画面サイズごとに別々のUI画像を用意していたら大変ですが、これを使えば「1つの画像」で全端末に対応できます。

なぜ「一般的な解像度（1920×1080）」に合わせる必要があるの？

基準となる解像度（Reference Resolution）を設定する理由は、「Unityに『これが基準だよ』という目安を教えないと、拡大・縮小の倍率が計算できないから」です。

基準がないと「100%」のサイズが決まらない

もし基準を決めないと、Unityは「このスマホの画面はすごく大きいから、ボタンをすごく大きく表示しよう！」と暴走したり、逆に小さすぎて見えなくなったりします。「1920×1080を基準に配置したボタンが、画面が小さくなったらどれくらい縮めるか」という計算のモノサシ（基準）がどうしても必要なんです。

配置作業のやりやすさ

1920×1080（フルHD）は、現在もっとも普及している画面サイズの一つです。このサイズで設計しておけば、実際のスマホ画面に近い感覚でボタンを配置できるので、「Unityの画面上で見た通りに、実際のスマホでも表示される」という作業上の快適さが生まれます。

「Canvas Scalerの設定は、ゲーム画面という舞台の『カメラ設定』のようなものです。最初に『基準となるサイズ』を伝えておくことで、どんな端末で遊んでも、あなたの作ったスタート画面やボタンが崩れることなく、美しく表示されるようになります。

ボタンの配置の調整

UI Scale Mode を 「Scale With Screen Size」 に変更した後はこのようになります。

変更前よりも全然小さいです。

ここからボタンの配置を調整していきます。

やり方は２つあります。

Toolで調整（推奨）

一つ目のやり方はToolの使用です。

Toolは「Scene」画面の左上にあります。６つありますが基本的にはMove Tool (2番目)とRect Tool (4番目) を使います。

Move Tool (2番目)：場所だけ動かしたい時

Rect Tool (4番目) ：サイズを変えたい時

小さいものを拡大する時はRect Tool (4番目)を選択し、真ん中の印をクリックしたまま引き延ばすときれいに拡大できます。

Inspectorの Rect Transformで調整

変更したいUIを選択した状態で、Inspectorの Rect Transformを見るとこのように座標が用事されています。

「PosX」「PosY」：縦と横の調整

「Width」「Height」：大きさの調整

どちらのやり方でも簡単にできるので、好きな方で調整してください。

テキストの配置と調整

基本的にはボタンと同じです。しかし少し注意点があります。

テキストは最初白い文字で表示されています。つまりいくらサイズを調整したところで見えないのです。

テキストの「Inspector」に「VertexColor」で色を黒にすることにより視覚化することをおすすめします。

また「TimerText」なら「Timer：」みたいにテキストの記入欄に書いておくと、どのテキストを表示しているかがわかりやすいです。

Canvasを切り離す

この連打ゲームのシステム上３つのPanelが重なっているので、それぞれ切り離してからやるとやりやすいです。

注意点として各Panelの配置が終わったらかならずPanelの「Rect Transform」の値をすべて０にしてください。

私はこのように作りました。

ここは自由に配置してみてください。