3.Canvasの配置とUI要素（ボタン・テキスト）の追加

「Canvas（キャンバス）」というUIを置くための専用の画用紙をシーンに配置します。何を言っているんだ？と思うかもしれません。なので詳しく説明していきます。

「Canvas」が必要な理由

Unityでゲーム画面上に「ボタン」や「スコア表示」などのUIを出す場合、必ずCanvasという枠の中に配置しないと画面に正しく表示されません。

たとえば映画の世界を想像してみてください。

映画の画面に「スコア」や「ボタン」という字幕（UI）を入れたいとします。

もし、映画のセットの中に直接「スコア」という看板を置くとどうなるでしょうか？

• 俳優が走って後ろに行ったら、スコアも一緒に遠くへ行ってしまう。
• カメラを横に向けたら、スコアが見えなくなってしまう。
• 俳優にぶつかって、スコアが倒れてしまう。

これではゲームのUIとして機能しませんよね。

そこで登場するのが 「Canvas（アクリル板）」 です。 このアクリル板を、カメラのレンズの直前（一番手前）にピタッと固定して配置します。

俳優（キャラクター）がどこへ行こうが、カメラをどう振ろうが、アクリル板に書かれた字幕（スコアやボタン）は常に画面の同じ位置に固定されていて、いつでも読める状態になります。

StartPanel、GamePanel、ResultPanelの配置

では実際に作っていきましょう。

「Hierarchy」上で「右クリック」→「UI(Canvas)」→「Image」

わかりやすいように名前を「StartPanel」にしましょう。

「右クリック」→「Rename」で名前を変更できる。

同様の手順で2つ作り、名前をそれぞれ「GamePanel」、「ResultPanel」にしましょう。

「StartPanel」 を右クリックし、「Duplicate（複製）」を2回行い、名前を変更するとスムーズにできる。

「Hierarchy」がこのような状態になっていれば成功です。

配置とサイズを整える

「StartPanel」 を選択。

「Inspector」の「Rect Transform」 の四角いアイコン（アンカー設定）をクリックします。

Alt (Macは Option) を押しながら、右下の「Stretch – Stretch」（四角い枠が全て広がるアイコン）をクリックします。

これでパネルがCanvas全体にぴったりフィットします。

残り2つのパネル（GamePanel, ResultPanel）にも同じ設定を行ってください。

各パネルに必要なUIの追加

次に各パネルの中にボタンやテキストを配置します。「Hierarchy」で各パネルを右クリックし、必要なUIを追加します。

「StartPanel」を「右クリック」＞「UI(Canvas)」＞「 Button – TextMeshPro 」を追加（「スタート」ボタン）する。

初回のみ、「 Button – TextMeshPro」 を作成した瞬間に「Import TMP Essentials」という画面が出てきます。

「Import TMP Essentials」ボタンを押してください。 これをやらないと日本語フォントが表示されません。

下の「Import TMP Examples & Extras」は押さなくてもいいです。

これはおまけみたいなものなのでデータの節約のためにも×を押しちゃいましょう。

このように表示されたら完了です。

一様区別するために名前を「StartButton」に変更しましょう。

GamePanelの中

「右クリック」＞「UI(Canvas)」＞「 Text – TextMeshPro 」を２つ追加（スコア用、タイマー用）する。

名前を区別するため、「ScoreText」「TimerText」とそれぞれ名前を変更しましょう。

「右クリック」→「UI(Canvas) 」→「 Button – TextMeshPro 」を追加（「リトライ」ボタン）する。名前を「ClickButton」にする。

このように表示されたら完成です。

ResultPanelの中

右クリック」→「UI(Canvas)」→「 Text – TextMeshPro 」を追加（最終スコア表）する。名前を「FinalScore」にする。

「右クリック」→「UI(Canvas) 」→「 Button – TextMeshPro 」を追加（「リトライ」ボタン）する。名前を「RetryButton」にする。

このように表示されたら完成です。

Buttonの名前変更

「UI(Canvas) 」→「 Button – TextMeshPro 」で作成されたButtonは「Hierarchy」上では「StartButton」「ClickButton」「ResultButton」と言うに名前を変更しました。

しかし実際の画面上では単に「Button」としか表示されていないです。

つまり見た目ではどれがどのボタンなのかがわからない状態です。

これをしっかりと「StartButton」「ClickButton」「ResultButton」と言う名前に変更しましょう。

「Hierarchy」の「StartButton」の左にある▼を押すと下に「Text（TMP）」と言うのが開きます。

それを選択した状態で左の「Inspector」画面を見ると上の写真のよな「TextInput」の文字が表示されているのを確認できます。

その下の記入欄を「Button」→「StartButton」に変更すると実際の画面上に「StartButton」が表示されます。

これを他のButtonも同様に「ClickButton」「ResultButton」と記入してみてください。

このようにしっかりと名前が変更されたら成功です。

パネルを視覚化

今まで３つのパネルを作成してきました。

今この時点ではその３つのパネルが重なっている状態です。

なので「Scene画面」で実際にパネルを視覚化してみましょう。

「StartPanel」を選択した状態で、上の「MoveTool」を使い、右にずらしてみましょう。

するともう一枚出てきました。今左にずらしたPanelが「StartPanel」で真ん中には「GamePanel」と「ResultPanel」が重なっています。

では「ResultPanel」を選択した状態で、右にずらしてみましょう。

これでしっかりと３つのパネルが表示されていることがわかりますね。

⑤でボタンの変更をしたおかげでどれがどのパネルなのかを判別できています。

これが確認出来たらもとに戻しましょう。このままでは実際の画面には映りません。

「Ctrl＋Z」もしくは「RectTransform」で０にして戻しましょう。

『【初心者向け】Unityで連打ゲームを作る全手順まとめ』