【Unity】チュートリアルの「Roll a Ball」をやってみる話 #12

記事をご覧いただき、誠に有難うございます。

投稿主の無能です。

今回は、タイトル画面を作りたいと思います。

タイトル画面を作る

ゲームにはタイトル画面がありますよね。

これからそのタイトル画面を作りたいと思います。

シーンを新規作成する

シーンを新規作成して、このシーンをタイトル画面にしたいと思います。

ProjectビューのScenesフォルダの中で右クリック > Create > Scene を選択し、シーンを「GameTitle」と言う名前で新規作成します。

右クリック > Create > Scene を選択してシーンを作成

「GameTitle」という名前にする

ついでに今まで作り込んだシーンの名前も変えておきます。

自由に名前を変更して問題ありませんが、今回は「Stage_1」としておきます。

ステージを増やす場合は「Stage_〇」として増やせますね。

今まで作り込んだシーンを「Stage_1」という名前に変更

ではGameTitleシーンを開きます。

タイトルを書く

久々に真っ新なシーンを見ましたね。

まずはタイトルを書いていきます。

メニュー Game Object > UI > Text - TextMeshPro からテキストを作成します。

名前を「Title」とします。

メニュー Game Object > UI > Text - TextMeshPro からテキストを作成

名前を「Title」とする

テキストは自由に決めてください。

今回はそのまま「Roll a Ball Sample」とします。

フォントもコーポレート・ロゴ（ラウンド）をそのまま使います。

フォントを変えたい場合は、フォントを探して設定してください。

位置や大きさも自由ですが、今回は以下のように設定します。

テキストを設定

Gameビュー

後ろに摺りガラスのようなものを置きたいですね。

HierarchyビューのCanvasを選択し、メニュー Game Object > UI > Panel を選択し、パネルを追加します。

メニュー Game Object > UI > Panel を選択

Panelを作成

何だか、テキストの前にパネルがあるような…？

テキストの前にパネルがある

これはCanvasの表示の順番の仕様で、Canvasの子オブジェクトの順番が下であるほど手前に、上であるほど奥になります。

現状では、子オブジェクトの順番がPanelの方が下に来ていますので、手前からPanel、Titleという順番でGameビューに映っています。

Canvasの表示順

ですので、PanelをTitleの上に持ってくれば奥に映ります。

Panelの順番をTitleより上に持ってくる

するとTitleが手前に表示されます。

Gameビュー

タイトルからシーンを遷移する

タイトル画面からゲーム画面、今回だとGameTitleからStage_1へシーンを遷移したいと思います。

シーンを遷移する場合、先に下準備が必要になります。

メニュー File > Build Settings からビルド設定画面を開きます。

メニュー File > Build Settings からビルド設定画面を開く

このような画面が出てきました。

ビルド設定画面

この画面は、様々なプラットフォームへゲームを出力するための設定画面です。

PCやスマホ、Webにゲームを出力できます。

この画面上部にある「Scene In Build」という項目に、Scene/Stage_1という形でシーンが入っています。

このScene In Build項目に、ゲームで使用するシーンを全て入れておくことで、ゲームとして出力されるようになります。

Scene In Build項目にゲームで使用するシーンを追加するとゲームとして出力される

今タイトル画面のシーンが追加されていないので、Add Open Scenesボタンを押して追加します。

Add Open Scenesボタンを押してタイトル画面のシーンを追加

タイトル画面が追加されました。

タイトル画面が追加された

ただ、このままだと順番がStage_1から実行されます。

順番をドラッグして入れ替えます。

ドラッグして順番を入れ替える

これでシーンの登録が出来ました。

そのままビルド設定画面は閉じても大丈夫です。

次に、何かキーを押したらシーンを遷移するようにします。

何かキーを押したらシーンを遷移する

何かキーを押したらシーンを遷移するようにします。

今回はスペースキーを押したらStage_1にシーンを遷移させます。

「スペースキーを押して開始」をタイトル画面にテキストで追加します。

以下のようにテキストを追加しました。

Gameビュー

「StartText」を作成

テキストの設定

次に遷移するためのスクリプトを記述します。

ProjectビューのScriptsフォルダに「TitleInput」という名前でスクリプトを新規作成します。

「TitleInput」という名前でスクリプトを新規作成

このスクリプトをCanvasにアタッチします。

ついでにCanvasの名前を「TitleScreen」に変更しておきます。

CanvasにTitleInputスクリプトをアタッチ

Canvasの名前を「TitleScreen」へ変更

ではスクリプトを書いていきます。

TitleInputスクリプトをVSで開きます。

スクリプトを記述する

TitleInputスクリプトを開いたら、Start関数は使わないので削除します。

Update関数内に、次のように記述します。


// スペースキーが押されたら
if (Input.GetKey(KeyCode.Space))
{
	// シーンを遷移
	SceneManager.LoadScene("Stage_1");
}

このようになります。

この処理も道具箱が不足していたので、次の一文が追加されました。

シーンを扱うものにはこのUnityEngine.SceneManagementが必要になるので覚えておきましょう。

ではスクリプトを保存して、Unityでゲームを実行して確認します。

スペースキーを押してゲーム画面が始まればOKです。

スペースキーを押す

ゲームが開始された

無事にゲーム画面に遷移できました。

でもタイトル画面に音が無いのは寂しいので、探してきて音を付けちゃいましょう。

甘茶の音楽工房さんでレトロパーティというBGM素材をダウンロードしてきました。

Audio SourceはTitleScreenに追加しました。

このような設定になりました。

ではゲームを実行して確認しましょう。

Gameビュー

やはり音の無いタイトル画面より遥かに良いですね。

次にStage_1のシーンに移って、スクリプトを追加します。

リトライを追加する

シーン遷移の方法が分かったので、ステージが終了したらリトライ出来るようにしたいと思います。

Stage_1のシーンに移ります。

Hierarchyビューで、StageClearテキストをアクティブにします。

StageClearをアクティブにする

そして再度StageClearを選択し、メニュー Game Object > UI > Button - TextmeshPro を選択しボタンを作成します。

メニュー Game Object > UI > Button - TextmeshPro を選択しボタンを作成

このボタンですが、StageClearの子オブジェクトになるようにします。

StageClearの子オブジェクトになっていない場合は、ドラッグしてStageClearの子オブジェクトになるようにしてください。

子オブジェクトにできたら、ボタンの名前を「Button＿Retry」に変更します。

「Button＿Retry」に名前を変更

ボタンの子オブジェクトにテキストが付いていますが、これがボタンのテキストになります。

位置を調整します。

調整の仕方はテキストと同様です。

今回はこのように設定しました。

ボタンをこのように設定した

ボタンの設定

次にボタンのテキストを「リトライ」にします。

ボタンのテキストを「リトライ」にした

ボタンのテキストの設定

リトライボタンが出来たので、スクリプトを記述します。

スクリプトの記述

リトライボタンに設定するスクリプトを記述します。

GameManagerスクリプトに新たにStageRetry関数を追加します。

このようになります。

ここに


// シーンを遷移
SceneManager.LoadScene("Stage_1");

と記述してシーンを再読み込みしても良いのですが、シーンが増えたりして遷移が複雑になった時に、スクリプトの修正がいちいち発生してしまいます。

ですので、自動的にシーンを取得して読み込みできるようにします。

変数を追加します。

このような記述になります。


// 現在のシーン番号
private int sceneNumber;

このようになります。

次にStart関数内に次の一文を追加します。


// シーン番号を取得
sceneNumber = SceneManager.GetActiveScene().buildIndex;

このようになります。

この処理は、アクティブになっているシーン（現在のシーン）のインデックス番号を取得しています。

シーンの番号はビルド設定画面で確認できます。

Scene In Build項目にある、それぞれのシーン名の右側の数値です。

シーンのインデックス番号

この番号を自動的に取得する処理をスクリプトに書きました。

次に作成したStageRetry関数内に記述します。

このような記述になります。


// シーンの再読み込み
SceneManager.LoadScene(sceneNumber);

このようになります。

ではスクリプトを保存して、Unityに戻ります。

ボタンにスクリプトを設定する

次にボタンにスクリプトを設定します。

Button_Retryを選択します。

Inspectorビューを見ると、Buttonコンポーネントの中にOn Click()という項目があります。

On Click()は「ボタンが押されたとき」という意味になります。

このOn Click()にスクリプトに記述した処理を登録することで、ボタンが押された時にそのスクリプトの処理が呼ばれて実行される、という流れになります。

では追加していきます。

下の+を押します。

すると次のようになりました。

このNone(Object)にGameManagerを設定します。

これでStageRetry関数を設定できる筈なのですが、選択候補に出てきません。

これが結構ハマってしまうポイントになるのですが、GameManagerスクリプトのStageRetry関数をpublicにしてあげる必要があります。

これは 外部のButton_Retryから StageRetry関数を呼びたい時に、 公開範囲がprivateなので 外部から見えなくなっています 。

ですので、アクセス修飾子のpublicをStageRetry関数に付けてあげます。

このようになります。

ではスクリプトを保存して、先程のButton_Retryに戻ります

次にGameManagerを選択します。

選択する時に、AssetとSceneというタブで分かれているので、Sceneを選択して、GameManagerを選択します。

Sceneタブを選択してGameManagerを選択する

するとGameManagerが設定されました。

次にNo Functionに設定されたプルダウンを押してGameManager > StageRetry () を選択します。

プルダウンを押し GameManager > StageRetry () を選択

StageRetry関数が設定されました。

これでボタンが押されたらリトライ出来るようになりました。

StageClearを非アクティブにします。

ではゲームを実行して確認します。

ステージクリアのUIが表示されて、リトライボタンが表示されること、リトライボタンでシーンの再読み込みがされることを確認します。

リトライボタンが表示された

リトライボタンでシーンが再読み込みされた

これでリトライのボタンが出来ました。

次にステージ失敗のリトライボタンを作ります。

ステージ失敗のリトライボタンを作る

ステージ失敗のリトライボタンを作ります。

先程ステージクリアのリトライボタンを作ったので、コピーすれば良いですね。

ではButton_RetryをCtrl+Dキーで複製します。

Button_Retryを複製

そしてStageFailedに子オブジェクトとしてドラッグします。

StageFailedの子オブジェクトとなるようにドラッグ

名前の(1)を取ります。

名前の(1)を取る

これでリトライボタンをステージ失敗にも設置出来ました。

StageFailedをアクティブにして確認します。

StageFailedをアクティブにして確認する

ではStageFailedを非アクティブにして、ゲームを実行して確認します。

ステージ失敗のUIでリトライボタンが表示されること、リトライボタンでシーンが再読み込みされることを確認します。

ステージ失敗のUIにリトライボタンが表示された

リトライボタンでシーンが再読み込みされた

リトライの機能ができました！

今回はここまで。

まとめ

本記事では

タイトル画面用のシーンを作成した
タイトル画面からゲーム画面へシーンが遷移するようにした
ステージクリア・失敗のUIにリトライボタンを追加した

という事を行いました。

次は、ゲームの最終調整をしたいと思います。

本記事もご覧頂き、誠に有難うございます。

ではまた。

このブログを検索

日の目を見ない言葉達