脱出ゲーム

今回で完成させるぞー。

鍵を拾ったら消えるようにする

Inspectorの名前の横のチェックボックスをオンオフすることによって表示・非表示というより有効・無効なのかな？が切り替えられる。それをプログラム的に表現するには

 gameObject.SetActive(false);

とする。falseなら消えるし、有効化したいならtrueを入れればよい。で、鍵を消したいためKeyスクリプトに追記するのだが

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

public class Key : MonoBehaviour
{
    public Door door;
    
    public void PickUp()
    {
        door.flag = true;
        gameObject.SetActive(false);
    }
}

こうだと、ボタンが消える。これはボタンにこのスクリプトが設定されているからかな？対象を指定しないと自分自身が消えるのかもしんない。鍵の画像を消したいので、変数を用意して対象をつなげて、Unity上で設定する。

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

public class Key : MonoBehaviour
{
    public Door door;
    public Image image;
    
    public void PickUp()
    {
        door.flag = true;
        image.gameObject.SetActive(false);
    }
}

これで消えた。

脱出成功の文字を表示する

これはまぁボタンを押したら表示するようにするだけなのでちゃっちゃと

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

public class Door : MonoBehaviour
{
    public Image image;
    public Sprite sprite;
    public bool flag = false;
    public Text text;

    public void Open()
    {
        if (flag == true)
        {
            image.sprite = sprite;
            text.text = "脱出成功！！";
        }
    }

}

できた。

番外：ボタンを押したら鍵が表示されるようにする

という機能を作る。画像を読み込みcanvasにImage追加。

ボタンの画像設定。Assetsに新規スクリプトSwitchを作成。

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

public class Switch : MonoBehaviour
{

    public Image image;

    public void Press()
    {
        image.gameObject.SetActive(true);
    }
}

表示させたいのでtrueにする。これなんでPushじゃダメだったんだろうね。ていうか番組だとKeyにしてる。これなんでなんだろうなぁ？多分何か説明されてないことがあると思われる。まぁ動くからいいか。ボタンを追加、ボタンにSwitchスクリプトとonClickにPressメソッドを設定。 鍵のInspectorのチェックボックスを外して表示を消しておく。そしたら実行。

できた。が、動画の後半部分を見てわかる通り鍵は表示されていなくともボタンは生きているので虚無を取得し扉を開けることが可能となる。なにこれ。たぶんさっきのImageとKeyの差なんだろうな…。

アレンジ：ボタンに布を被せる

番組をよく見ると布がある。

なんに使うんだろうと思っていたら使わずに終わった。多分だがボタンに被せておいて、クリックしたら取れるのかなあーとか思った。ついでに実装してみる。布じゃなくて紅白帽にしてみた。

これを取り込む。canvas用意して設置するとスイッチのほうがボタンが押せなくなってる。いろいろあって出来上がり。

いぇい！次は何やるんだろうな～。

脱出ゲーム

引き続き。なんかしれっと項目の内容変わってね？

まぁいいんだけどさ。

何をするか

ちょっと整理する。

今作ってるのは「鍵を使って扉を開けるゲーム」。前回までで、クリックしたら扉が開く、というところが作れた。現在までに教えてもらった内容を利用して、目標までにあと何が必要だろうか。

そもそも「鍵を使って扉を開けるゲーム」として期待される動作とは何だろう。スタートから分解してみる。

1. 画面に扉と鍵が表示されている
2. この時点で扉をクリックしても開かない
3. 鍵をクリックする（鍵を取得する）
4. 鍵が消える（鍵を取得したことの演出）
5. 扉をクリックする
6. 扉が開く
7. 脱出成功の表示が現れる

大体こんな感じかなぁ。前回までで5と6の部分を作れた。

今回はここに「鍵を取得したかどうか」という2と3の要素を加えることになる。ではここで、その要素を実現するための仕組みを考えなければならない。ここでいう仕組みというのはフローチャート的なもので、Unity上でどう実現するか、という視点とはまた別だ。いったん、5と6ではどういう仕組みにしたか振り返ると

1. 画面に扉を表示する
2. 扉の所には透明なボタンを設置する
3. 扉＝透明なボタンをクリックすると、扉の画像を閉じているものから開いてるものへ差し替える

という仕組みで、クリックしたら扉が開くという動作を実現できた。前回はこれをUnity上に落とし込んだわけだ。ここに2と3の要素を加えるにはどうしたらよいだろうか。

2と3の要素というのは「鍵を取得したかどうか」によって処理を分けることによって実現できる。「鍵を取得したかどうか」は、双六の時にやったフラグを利用することで判定できる。つまり、「もし鍵を取得していたら、扉をクリックした時に扉が開く」という動作の仕組みを考えることになる。じゃあ

1. 画面に鍵を表示する
2. 「鍵を取得したかどうか」を判定するためのフラグを用意する
3. 鍵と同形に透明なボタンを設置する
4. 鍵＝透明なボタンをクリックしたら、2のフラグを立てる（オンにする・trueを入れる）
5. 扉をクリックすると、フラグから「鍵を取得したかどうか」を判定し、取得していたら扉の画像を差し替える

という仕組みで実現できそうだ。ということで、これをUnity上に落とし込んでいく。

フラグが立っていない時は扉が開かないようにする

Doorを

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

public class Door : MonoBehaviour
{
    public Image image;
    public Sprite sprite;
    public bool flag = false;

    public void Open()
    {
        if (flag == true)
        {
            image.sprite = sprite;
        }
    }

}

こう変えた。フラグ用変数をflagって命名しちゃいけないてどっかで見たけどそれは置いといて、このflagが鍵を持っているかどうかを表すことになる。

鍵の画像とボタンを用意

Canvas上にImageで鍵の画像を読み込み、透明なボタンを作成する。

鍵をクリックしたらフラグを立てる

新たにKeyスクリプトを作る。

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

public class Key : MonoBehaviour
{
    public Door door;
    
    public void PickUp()
    {
        door.flag = true;
    }
}

ImageやSpriteやTextと同じく、自分で作ったDoorでも変数を宣言できるんだなぁ。考えてみりゃそうなんだけど、教わらないと難しいよなこれは。PickUp関数内ではDoorが持ってるflagにtrueを代入している。このフラグは鍵を持っているかのフラグなので、これで鍵を持っていることになる。スクリプトを保存したら鍵用のButtonのAddComponentにD&Dし、InspectorのKey(script)のDoorには扉のImage、onClickには自分自身であるButton、FunctionにPickUpを設定する。

そしたら実行すると

できた～。次回で完成かな？

脱出ゲーム

プログラミングサミットという名の企画会議が行われ、一つの題材を複数回に分けて作っていこうという話になったようだ。で、今回は脱出ゲームを作っていく。流れはキャプチャを引用してしまうが

こう。これを一つずつこなしていけば脱出ゲームができる！関係ないけど「だしゅつ」じゃなくて「だっしゅつ」なんだな。打つのめんどい。

プロジェクト作成＆イラスト取り込み

２Dで作ってAssetsにD&Dする。

扉の開閉をプログラミング

Canvasを作成しImageを追加。SourceImageに閉じたドアをD&D。AssetsにてDoorスクリプトを作成。内容を

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

public class Door : MonoBehaviour
{
    public Image image;
    public Sprite sprite;

    public void Open()
    {
        image.sprite = sprite;
    }

}

とする。現在の画像を差し替えることになる。保存したらImageのAddComponentに追加し、Imageには自分自身、spriteには開いたドアの画像をD&Dする。新たにボタンを作成し、ウォーリーの時のように透明にしてドアの大きさと同じぐらいに変形する。ButtonのInspectorのonClickにImageを設定し、FunctionにdoorのOpenを指定する。こんな感じかな～。そしたら実行。

できーた。これで3分の1らしい。

ウォーリーを探せ風ゲーム

前回ボタンの使い方を学んだので、それを利用したゲームとしてウォーリーを探せ風のゲームを作るらしい。ボタンを透明に設置しクリック時に正解の表示を出すという流れ。早速やってみる。

写真の準備

写真を準備しなきゃならないが、番組のキャプチャを使用したい！吉田綾乃クリスティーを探すぜー。

画像をUnityに取り込む

Assetsに画像を放り込む。GameのRatioを＋から新規作成し、画像サイズに合わせる。Canvas上で右クリック、UI→Image。InspectorのSourceImageにAssetsから先ほど取り込んだ画像をD&D。画像が小さくしか表示されない場合、RectTransform内のWidthHeightを同じく画像サイズに合わせる。

ボタンの配置

Canvas上にボタンを配置し、色を透明にする。Colorのアルファ値を透明にする。大きさも正解のエリアの大きさに変更する。まぁほぼ前回と同様。

スクリプトを書く

これもほぼ前回と同様。正解表示のためのTextを置く。で前回は推測でAddCoｍponentsで追加したのだがほんとは違かったらしい。Assets上で右クリック、create→C# scriptで作ってた。ただそこで番組では説明終わってしまった。また推測になるが、どのオブジェクトでもいいのでAddComponents上にさっきのスクリプトをD&Dして、スクリプトのTextに正解のTextオブジェクト、ボタンのonclickにオブジェクト指定してfunction指定すれば動く。これでいいのかなぁ？

ふむー。

不正解をアレンジしてみる

間違ったところをクリックしたときに、不正解の表示を出したい。番組では小さい不正解ボタンを作っていたが、うんうん考えてみたら、ボタンを画像いっぱいに大きくすればいいんでないかと考えた。

同様にスクリプト等を準備した。ここで重要なのがHierarchyの順番で、これは上にあるほうが、画面上は奥にあり、下にあるほうが、画面上は手前にある。分かりずらいですね～。まぁそれを踏まえて順番を変えた。

そしたら実行！

おーうまくできた^^

効果音をつける

ボタンごとに正解のSEと不正解のSEが鳴るようにする。効果音を用意し、Assetsに取り込む。Hierarchyで正解ボタンを選択し、AddComponentsでAudioSourceを選択する。AudioClipの項目に先ほど取り込んだSEを設定する。PlayOnAwakeのチェックは外す。正解用スクリプトを編集する。

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

public class CorrectButton : MonoBehaviour
{
    public void Clicked()
    {
        text.text = "正解!!";
        audioSource.Play();
    }

    public Text text;
    public AudioSource audioSource;
}

こんな。AudioSourceの変数を用意し、関数内でPlay()を実行する。いったん保存し、正解ボタンのAddComponentsにスクリプトをD&D。スクリプトのAudioSourceにButtonを設定する。ここでAssetsから音をそのままD&Dしようとしてできなくて悩みまくった。onclickにButtonとFunctionを設定出来てたら実行！

できたーけどうまく撮影できんかったから動画はなしだ。完成～！

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にチェックを入れると自動的にサイズ調整してくれる。

完成

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

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