前回までの作業で今回の脱出ゲームのコア部分を作ることができ、ほぼ完成といっても差し支えない状態になりました。ただしこのままだとページを開いたらいきなりゲームが始まってしまい少し不親切なので、最後にタイトル画面を作ってゲームを完成させましょう。
タイトル画面の作り方
では早速ですがタイトル画面を作っていきます。今回は「くろくま基本アセット2」の「Scenes」フォルダ内にタイトル画面のテンプレートがあるのでそれを使ってサクッと作りましょう。
主な作業手順は次の通り。
- 背景用のキャンバスを追加する
- タイトルロゴを変更する
- 「スタート」ボタンにスクリプトを追加する
背景用のキャンバスを追加する
まずはタイトル画面の背景画像を表示するためのキャンバスを作ります。いつも通り新しいキャンバスを作り、その子として「Panel」（右クリック→「UI」→「Panel」）を作成してください。さらに、Canvasコンポーネントの「ソート順」を「-1」に変更してください（これでこのキャンバスが一番後ろに表示されるようになります）。
そうしたら次の背景画像をダウンロードしてPanelのImageコンポーネントの「ソース画像」と差し替えましょう。
タイトルロゴを変更する
次にタイトルロゴを適当な画像に差し替えましょう。なお、もし今回のチュートリアルを参考にして作ったゲームを公開する場合は必ず別のタイトルにしてください。
「スタート」ボタンにスクリプトを追加する
そうしたら「スタート」ボタンに簡単なスクリプトを追加してMainシーンに移動できるようにします。新しいC#スクリプトを作り、名前を「StartButton」に変更して次のコードを書いてください。
using UnityEngine;
using UnityEngine.UI;
public class StartButton : MonoBehaviour
{
[SerializeField]
Button button = null;
void Start()
{
button.onClick.AddListener(() => GameObject.FindGameObjectWithTag("GameController").GetComponent<MoveSceneManager>().MoveToScene(1));
}
}
書けたらこれをTitleCanvasの子の「StartButton」にアタッチし、Start Buttonコンポーネントの「Button」欄にStartButton自身を登録しましょう。
BGMの追加
次に、現状ではサウンドが何もなくて寂しいのでBGMを追加します。Titleシーンに最初からある「GameManager」オブジェクトのSound Managerコンポーネントの「Default Bgm」の欄に適当なBGMを登録してください。
これでゲームが始まると自動的にBGMが流れるようになります。
ゲームの最終チェック＆ビルド
さて、ここまでの作業でやるべきことがほぼ終わりました。あとは
- タイトル画面から通しプレイをしてクリアできることを確認する
- ゲームをビルドしてブラウザで遊べるようにする
だけです。通しプレイに関しては各自きちんと行ってください。
最終チェックが済んだらいよいよゲームをビルドしていきます。メニューバーの「ファイル」→「ビルド設定」からBuild Settingsウィンドウを開いて「ビルドして実行」ボタンを押してください。
そうするとファイルの出力先を聞かれるので、適当な場所に新しいフォルダを作ってそこを指定してください（※注）。ビルドには時間がかかりますが気長に待ちましょう。
ビルドが終わるとブラウザが開いて実際に出来上がったゲームで遊ぶことができます。
※注：ビルド先までのファイルパスに日本語が含まれているとビルドに失敗することがあるので注意してください。
脱出ゲーム「小さな部屋からの脱出」完成！
お疲れさまでした。これで無事「小さな部屋からの脱出」が完成しました！
あとは完成したゲームを自分のサイトに載せたり、unityroomにアップロードしたりして色々な人に遊んでもらえるようにするとさらに良いでしょう（※いずれの場合も利用規約は守ってくださいね）。
以上で3D脱出ゲーム「小さな部屋からの脱出」のチュートリアルを終わります。最後までお読みいただきありがとうございました！このチュートリアルが少しでもお役に立てば幸いです。