【unity】SubmitButton（OKボタン）の作り方【位置とサイズ、色】

SubmitButton（OKボタン）の作り方

① ボタンを作る

Canvas を右クリック
→ UI
→ Button - TextMeshPro

Hierarchy はこうなります：

Canvas
└─ Button (TMP)
└─ Text (TMP)

② 名前変更

Button (TMP)
↓
SubmitButton

③ ボタンの文字を「OK」にする

Hierarchy で

SubmitButton
└─ Text (TMP)

を選択して Inspector の Text を変更：

OK

④ ボタンの位置とサイズ

SubmitButton を選択 → RectTransform

Pos X = 0
Pos Y = -40
Width = 200
Height = 60

Anchor は 中央 にします。

⑤ ボタンの色（おすすめ）

SubmitButton → Image

おすすめ色：

R 100
G 180
B 255

押したボタンっぽくなる。

⑥ ボタンを押した時の処理を設定（超重要）

ここめちゃくちゃ重要です。

SubmitButton を選択 → Inspector → Button コンポーネント

On Click ()
→ ＋ を押す

次に

QuizManager をドラッグ
→ Function
→ QuizManager
→ SubmitAnswer()

これで

OKボタン押す → SubmitAnswer() 実行

になります。

⑦ QuizManager.cs 側の関数

この関数を作ります。

1. using UnityEngine;
2. using TMPro;
3. using UnityEngine.UI;
4. using System.Collections.Generic;
6. public class QuizManager : MonoBehaviour
7. {
8.     public TextMeshProUGUI questionText;
9.     public TMP_InputField answerInput;
10.     public TextMeshProUGUI resultText;
11.     public TextMeshProUGUI scoreText;
13.     private Dictionary<string, string> words = new Dictionary<string, string>();
14.     private string currentQuestion;
15.     private int score = 0;
17.     void Start()
18.     {
19.         words.Add("apple", "りんご");
20.         words.Add("dog", "犬");
21.         words.Add("cat", "猫");
22.         words.Add("water", "水");
24.         NextQuestion();
25.     }
27.     public void SubmitAnswer()
28.     {
29.         string answer = answerInput.text;
31.         if(answer == words[currentQuestion])
32.         {
33.             resultText.text = "Correct!";
34.             score++;
35.         }
36.         else
37.         {
38.             resultText.text = "Wrong...";
39.         }
41.         scoreText.text = "Score : " + score;
42.         answerInput.text = "";
44.         NextQuestion();
45.     }
47.     void NextQuestion()
48.     {
49.         List<string> keys = new List<string>(words.Keys);
50.         currentQuestion = keys[Random.Range(0, keys.Count)];
51.         questionText.text = currentQuestion + " の意味は？";
52.     }
53. }

⑧ スクリプトとUIを接続

GameObject を作る

Hierarchy
→ 右クリック
→ Create Empty
→ 名前 QuizManager

QuizManager.cs を追加

Inspector で UI をドラッグ：

QuestionText → questionText
AnswerInput → answerInput
ResultText → resultText
ScoreText → scoreText

これ超重要

⑨ ここまで完成すると

ゲームはこう動きます：

問題表示
↓
答え入力
↓
OKボタン
↓
Correct / Wrong 表示
↓
スコア増える
↓
次の問題