Unity UI（Canvas）の作り方
- ① Canvasを作る
- ② UI配置（英単語クイズ画面）
- ③ QuestionText（問題表示）
- ④ AnswerInput（入力欄）
- ⑤ SubmitButton（OKボタン）
- ⑥ ResultText（正解・不正解）
- ⑦ ScoreText（スコア）
- ⑧ 最終UI配置イメージ
① Canvasを作る
Unity上で
Hierarchy
右クリック
→ UI
→ Canvas
作られるもの：
Canvas
EventSystem
UIは全部Canvasの中に置く
これがUnity UIの基本です。
② UI配置（英単語クイズ画面）
Hierarchyをこうします
Canvas
├─ QuestionText
├─ AnswerInput
├─ SubmitButton
├─ ResultText
└─ ScoreText
③ QuestionText（問題表示）
作り方：
Canvas 右クリック
→ UI
→ Text (TextMeshPro)
名前変更：
QuestionText
表示例：
apple の意味は？
RectTransform（位置）
Pos Y = 150
Width = 600
Height = 100
Font Size
36
④ AnswerInput（入力欄）
作り方：
Canvas 右クリック
→ UI
→ Input Field (TextMeshPro)
名前：
AnswerInput
位置：
Pos Y = 50
Width = 400
Height = 60
Placeholder：
ここに答え入力
⑤ SubmitButton（OKボタン）
作り方：
Canvas 右クリック
→ UI
→ Button (TextMeshPro)
名前：
SubmitButton
ボタンの文字：
OK
位置：
Pos Y = -40
Width = 200
Height = 60
⑥ ResultText（正解・不正解）
作り方：
Canvas
→ UI
→ Text (TextMeshPro)
名前：
ResultText
位置：
Pos Y = -120
表示：
Correct!
Wrong...
⑦ ScoreText（スコア）
作り方：
Canvas
→ UI
→ Text (TextMeshPro)
名前：
ScoreText
位置：
Pos Y = -200
表示：
Score : 0
⑧ 最終UI配置イメージ
画面はこうなります
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
| apple の意味は？ |
| [ 入力欄 ] |
| [ OK ] |
| Correct! |
| Score : 3 |
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
これで英単語クイズの画面完成。
