Unityでタイトル画面を作る！ボタンクリックで画面遷移！

今回は、Unityでゲームのタイトル画面を作成してみます。

手順は簡単。UnityのCanvasオブジェクトを使えばタイトル画面はすぐに完成します。

タイトル画面の作り方はある程度パターンが決まっています。なので覚えておくと様々なタイトル画面を作成する際に役に立つと思います。

また、Canvasの使い方を知っておく事で、画面UIの作り方についても理解を深められると思います。

この記事は以下の方を対象にまとめています

Unityでゲームのタイトル画面を作成した
タイトル画面⇒ゲーム画面への遷移方法を知りたい
UnityのCanvas上でUIを作成する仕組みが知りたい

コンテンツ

1 今回の開発の前提
- 1.1 タイトル画面の考え方
2 Canvas（キャンパス）を使ってタイトル画面を作成
3 ゲームを実行してみよう
4 まとめ

今回の開発の前提

以前作成したブロック崩しゲームのタイトル画面を作成するイメージで進めます。

ブロック崩しを作った時の記事は以下になります。

Unityで3Dブロック崩しを作る！ゲーム開発の入門に最適！ | Liibercraft｜リーベルクラフト
https://liibercraft.com/archives/6981
ブロック崩しは昔からゲーム開発者の入門用として最適なゲームです。以前は2Dの座標計算で開発されるのがスタンダードだった様ですが、今は3Dで、かつ物理エンジンを使用したものが増えてきています。 Unityなどの開発エンジ …

また、今回はゲーム画面が１ステージのみある場合を前提とします。
※エンディング画面やオプション画面も無い状態で、単純にタイトル画面とゲーム画面のみを作る前提です。

タイトル画面の考え方

今回の場合、Unityでタイトルを作る時のパターンは以下の２つが考えられます。

タイトルのパターン

Sceneを２つ作成する（タイトル画面・ゲーム画面）⇒タイトル画面のスタートボタンをクリックするとゲーム用画面に移動
Sceneを１つ作成する（タイトルもゲームも同じ画面）⇒ゲーム画面上にタイトルを表示してスタートボタンをクリックするとゲームが開始
※ステージ毎にSceneを作成する場合は、ゲーム画面がさらに追加されます。

今回は、１の場合の、タイトル画面とゲーム画面の２つのSceneを用意するケースで話を進めていきます。

Canvas（キャンパス）を使ってタイトル画面を作成

まずはCanvas（キャンパス）を使ってどの様にタイトルを作るのか、簡単に説明します。

Canvas（キャンパス）の仕組み

Canvasはゲームの中の世界とは別に、カメラに固定表示される文字やボタンを設定できるオブジェクト機能です。

タイトルやボタンのようなUI(ユーザインタフェース)を画面に配置する際には、基本的にこのCanvasを使用します。

テレビ番組などでも、タレントの方たちがいるテレビの中の世界とは別に、テレビタイトルやテロップ、ワイプ画面等が画面上に固定表示されていますよね。Canvasというのは、簡単に言うとあれと全く同じような仕組みです。

Unity公式リファレンス：https://docs.unity3d.com/ja/2020.3/Manual/UICanvas.html
※対象Versionを選択して参考にして下さい。

UIを配置

今回タイトル画面で使用するのは、以下の通り、CanvasのテキストUIと、ボタンUI、パネルUIになります。
※よく使用するUIです。

パネル（Panel）UI　 ※タイトルの背景
テキスト（Text）UI　※タイトル文字
ボタン（Button）UI　※スタートボタン

これらのUIオブジェクトを配置する際は、ヒエラルキーウィンドウで右クリックするか、ツールバーの「GameObject」で以下を選択します。

UI>Panel
UI>Text
UI>Button

ヒエラルキーウィンドウのCanvas配下にPanel、Text、Buttonができました。

■Canvas配下にPanel、Text、Buttonができあがる

ここからテキストUIと、ボタンUI、パネルUI、それぞれの設定について詳しく解説します。

パネル（Panel）-タイトル画面の背景

まずはパネル（Panel）のUIを作成してタイトル画面の背景を作成します。

以下の様にパネルを選択して、ImageコンポーネントのColorで好きな色を選択すれば完了です。簡単！今回は青っぽい色にしてみました。

■タイトル画面の背景を作成

テキスト（Text）-タイトル文字

次にテキスト（Text）でタイトル文字を作成します。

Textコンポーネントで自分が好きな文字を入力したり、文字装飾ができます。今回は「BlockGame」というタイトルを設定しました。

またRect Transformコンポーネントで文字の位置を調整できます。

■タイトル文字を設定

ボタン（Button）-スタートボタン

最後にボタン（Button）を作成します。

Buttonコンポーネントでボタンのサイズや、ボタンの色などを設定できます。

さらに、Buttonオブジェクトの小オブジェクトであるTextオブジェクトで、ボタン上の文字を設定できます。

■スタートボタンを作成

ボタン押下時の処理

UIの配置は完了したので、スタートボタンを押したらゲーム画面に遷移する処理を追加します。

以下の３ステップでボタン押下時の処理を作っていきます。

C#スクリプトの作成
Build SettingsでScene登録
スタートボタンと処理関数の紐づけ

では順番に説明します。

C#スクリプトの作成

C#スクリプトの処理は非常に簡単で、ClickStartButton関数でゲーム画面があるSceneを読み込むだけです。

UIを使用する時は「using UnityEngine.UI;」を先頭に記述します。さらに、Sceneを移動する場合は「using UnityEngine.SceneManagement;」も記述します。

とりあえず、どちらもおまじないと思っておいてOKです。

また、SceneManager.LoadScene関数でSceneの読み込みができます。※「block_game」はゲーム画面のSceneファイル名です。

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

public class GameStart : MonoBehaviour
{
    public void ClickStartButton()
    {
        SceneManager.LoadScene("block_game");
    }
}

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

using UnityEngine.UI;

using UnityEngine.SceneManagement;

public class GameStart : MonoBehaviour

{

public void ClickStartButton()

{

SceneManager.LoadScene("block_game");

}

Build SettingsでScene登録

Scene移動をする場合は、Build SettingでScene登録する必要があります。

「FIle ＞ Build Settings 」をクリックします。

■Build Settings を選択

Build Settingsでタイトル画面のSceneと、ゲーム画面のSceneを登録します。

■対象Sceneを登録

スタートボタンと処理関数の紐づけ

C#スクリプトを作成したらスタートボタンにアタッチしましょう。

■スタートボタンにアタッチ

また、Buttonコンポーネントの「On Click（）」と書かれた場所に、オブジェクトをアタッチする箇所があります。

ここにButtonオブジェクト（自分自身）をアタッチしましょう。
※C#スクリプトがアタッチされたオブジェクトを、さらにここにアタッチします。

■Buttonオブジェクト（自分自身）をアタッチ

No Functionと書かれたプルダウンをクリックすると、アタッチしたC#スクリプトのクラス名が出るのでクリックします。

そうすると、作成した関数「ClickStartButton」が表示されるので、これを選択します。

■関数「ClickStartButton」が表示される

「ClickStartButton」が設定されました。

これで、スタートボタンを押したら関数「ClickStartButton」が実行されます。

■「ClickStartButton」が設定される

ゲームを実行してみよう

さて、タイトル画面が作成できたので、さっそくゲームを実行してみましょう。

タイトル画面のスタートボタンを押すと、ゲーム画面に遷移します。

■タイトル画面⇒ゲーム画面に遷移

無事にタイトル画面からゲーム画面への遷移ができました。

※ちなみにスタートボタンを押した瞬間にゲームが開始（ボールが動き出す）していますね。これだと、ユーザがびっくりしてしまう可能性があります。ゲームがスタートするまでにカウントを入れたり、ゲーム画面に遷移後、何かボタンを押したらボールが動き出すという処理を入れても良いかもしれません。この辺りは、今後の改善点ですね。