3択問題

かなり期間があいてしまった。早いとこ乃木坂ちゃんに追いつかなきゃ。ただ箱根回のサウンドノベルについては文字送りのプログラムが分からないのでスルーする。今回は喫茶店で３択問題を作るみたい。問題があって、答えが三つある。そのうちのどれかを押して正解だったら正解の表示を出すというもの。やっていこー。

問題を置くUIを作る

問題文を置く場所を作る

2Dでプロジェクトを作ったのち、Hierarchyで右クリック→UI→Canvasを設置する。設置すると同時にMainCameraとEventSystemが自動で設置される。これは何に使うんだろう？まぁおいといて、CanvasはUIをのせるための下地のようなものということらしい。UI使うときには絶対使うそう。作ったらCanvasをダブルクリック。右クリックしてUI→Text…だが無い。Legacyの中に入ってたので一応そっちを使う。TextMeshProってなんだろうね。

答えを置くボタンを作る

Canvas上で右クリックし、UI→ここもLegacy→Buttonでボタンが設置できる。3回繰り返してScene上で左端に段々で並ぶように動かしておく。あ、問題も。

スクリプトを書く

さてここで番組ではスクリプトを書き始めたのだがはしょっており詳しい説明がない。スクリプト書いてボタン押したらオッケー完成☆彡みたいな感じだったが、やってみても当然動かない。なのでどういう仕組みになってるのか推測になってしまうのだが、おそらく正解のボタンをあらかじめ決めておき、そのボタンにスクリプトを仕込んでおいて、押されたら文字が表示されるようにしていると思われる。そういう感じで作ってみる。

スクリプトを用意

正解用ボタンのInspectorからAddComponentでNewScript→名前をAnswerButtonとして作成。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class AnswerButton : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {
        
    }

    // Update is called once per frame
    void Update()
    {
        
    }
}

これは初期値。ここからStartとUpdateメソッドは消す。そしたらusingにUIを使うためのおまじないを書く。あとは番組の通りに書く。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class AnswerButton : MonoBehaviour
{
    public void Pochi()
    {
        text.text = "正解！";
    }

    public Text text;
}

こうなる。ここで番組の言う通り再生ボタンを押して、正解ボタンを押してみても何の反応もしない。ということで色々ググった。

ボタンが押されたときに実行する処理を登録

ボタンが押されたときに実行する処理を登録しなければならない。ButtonのInspectorにはon Click ()というクリックされた時に実行するメソッドを登録するための場所がある。

ここの＋ボタンを押す。そしたらNoneのところにHierarchyから正解ボタンをドラッグ＆ドロップする。するとNoFunctionのところが選択できるようになっているので、AnswerButton→Pochi()を選択する。これでメソッドの登録ができたはず。既に正解ボタンのInspectorを選択しているのに、なぜonClickに再度Hierarchyから選択する必要があるのかがよく分からないかな…。onClickは独立してるような感じなんだろうかとも思ったけど、ほかのボタンと共有してる感じじゃなさそうだし、うーん？まぁとりまこれで実行してみる。すると

NullReferenceException: Object reference not set to an instance of an object

というエラーが立つ。下部の赤字をクリックすると、これはオブジェクトが参照できないエラーだよ～ということみたい。AnswerButtonスクリプトの

text.text = "正解！";

この部分がダメで、なぜダメかというとtextが何を指しているかを定義していないから。あれ？でもpublic Text textで変数準備したよね？と思ったらそれだけでは足りないみたい。というかそもそもの「正解！」を表示するエリアを作ってないよね？まずはそれを適当に作り、今度は正解ボタンのInspectorのAnswerButton(script)に行く。そこのTextの項目がNoneになっているので、先ほど作った正解のTextをドラッグ＆ドロップする。

これで実行してみると、右のtextエリアに「正解！」と表示された！いえーい！あとは問題文とボタンのテキストに入力すればいいだけだね。

見た目を変える

文字色と文字の大きさ

変えたいテキストをHierarchyで選択、InspectorのText内Fontsizeで大きさ、colorで色が変えられる。あ、Sceneでエリアのサイズを変えとかないとはみ出たり切れたりする。もしくはBestFitにチェックを入れると自動的にサイズ調整してくれる。

完成

ということでできたのがこちら

再現できてるんじゃないでしょうか！