今回はUnityでボタンが押された時に、別の画面を遷移(移動)する機能の実装について説明します。単一画面のゲームもなくはないですが、画面遷移ができればダンジョンの探索画面→戦闘画面などができるようになり、本格的なゲーム作りに役立つと思います。
Canvasの作成と調整
先ずはボタンを表示させる土台となるCanvasを作成するとともに、位置や大きさを調整します。
方法はすでに【Unity基礎_2】で説明していますので、下記を参考に設定をして下さい。

Buttonの作成と調整
STEP1:Buttonの作成
Canvasが作成できたら、次はCanvasの子要素としてボタンを作成しましょう。具体的にはヒエラルキーウィンドウでCanvasを選択した状態で右クリックを押し、UI→Buttonを左クリックという手順で作成できます。(下図参照)
STEP2:Buttonの大きさ・位置の調整
続いてButtonの大きさや位置をお好みに合わせて調整してみましょう。私は今回、以下のように調整してみました。(下図参照)
・アンカー:middle-center
・PosX:300,PosY;100
・Width:300,Height;100
STEP3:Buttonテキストの変更
最後にボタン上のテキストを変更しておきます。今回はタイトル画面に戻る処理を想定し、ボタンの子要素であるTextの表示内容を「タイトル」とし、FontSizeは50に設定しておくことにします。(下図参照)
遷移先のScene作成と設定
STEP1:遷移先Scene作成
ボタンの作成までできたら次は遷移先のシーンを作成しましょう。シーンはプロジェクトウィンドウで右クリックを押し、Create→Sceneを左クリックすることで作成できます。(下図参照)
なお、今回作成したシーンの名前は下図のようにTitleSceneとしました。
STEP2:遷移先Sceneの設定
上記STEP1で遷移先のシーンが作成できたので、遷移先に移動した際に分かりやすいよう、簡単な設定を行っておきましょう。具体的には画面に「タイトルシーンです」という文字を表示させることにします。
遷移先シーンを開く
新しく作成したシーンを編集するため、TitleSceneを開きましょう。方法としては下に示すように、プロジェクトウィンドウからTitleSceneをダブルクリックすればOKです。
テキスト設定する
TitleSceneを開いたら、遷移先に移動した際に分かりやすいよう、お好みに合わせてテキストを設定してみて下さい。私は下図のように設定しました。
最初のシーンを開く
テキストの設定まで終わったら最初のシーンを開きましょう。方法はTitleSceneを開いた時と同様で、プロジェクトウィンドウから開きたいシーンをダブルクリックすればOKです。
シーンの登録
これまでに2つのシーンを作成したわけですが、Unityにこの2つが同じゲームで使われるシーンであることを認識させる必要があります。
登録は下図に示すように
②BuildSetteingsウィンドウのScenesInBuildの枠内に二つのシーンをドラッグ&ドロップする
という手順で行うことができます。
Scriptの作成と画面遷移機能の実装
ボタンがクリックされた時の機能を実装するには、その機能を記述したScriptが必要です。そこで先ずScriptを作成し、Scriptに画面遷移機能を実装しましょう。
STEP1:Scriptの作成
Scriptの作成は下に示すように、プロジェクトウィンドウで右クリックを押し、Create→C#Scriptを左クリックすることで行うことができます。
この時、作成されたスクリプトの名前はButtonControllerとしておきます。
STEP2:画面遷移機能の実装
続いて画面遷移機能を作成されたスクリプトに記述します。プロジェクトウィンドウで作成されたスクリプトをダブルクリックして開きましょう。(下図参照)
スクリプトを開いたら、TitleSceneへ画面遷移する関数を記述します。具体的には下記の通りです。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;//画面遷移を行う、LoadSceneを使用するために導入
public class ButtonController : MonoBehaviour
{
//タイトルボタンを押した時の処理
public void ClickTitleButton()
{
// " "内に記述された名前のシーンをロードする(画面遷移)
SceneManager.LoadScene("TitleScene");
}
}
ここで上記スクリプトのポイントを説明すると以下の通りです。
8行目:ボタンを押した時に呼び出されるメソッドです。
ボタンクリック時の機能実装
最後にボタンに上でスクリプトに記述した関数を認識させ、ボタンがクリックされた時の挙動と結びつけましょう。
STEP1:スクリプトのアタッチ
先ずは先程作成したスクリプトをオブジェクトにアタッチします。これによりアタッチされたオブジェクトにそのスクリプトで記述された特性を持たせることができます。
今回はButtonオブジェクトに先程記述したButtonControllerスクリプトをアタッチすることとします。方法はいくつかありますが、今回はプロジェクトウィンドウのスクリプトをヒエラルキーウィンドウのButtonにドラッグ&ドロップを行うことで実施します。(下図参照)
上述の手順により上図のようにButtonオブジェクトのインスペクターウィンドウ下部にButtonControllerが追加されることが確認できると思います。
これでアタッチは成功です。
STEP2:クリック時の機能とスクリプトの結合
スクリプトのアタッチまでできたら、ボタンクリック時にスクリプトに記述したClickTitleScene関数が呼ばれるようにしましょう。
先ず、下図を参考に、Butonオブジェクトのインスペクターウィンドウ下部にあるOnClick() の+ボタンを左クリックします。
続いてOnClick()部分にあるNoneと記述されている箱にスクリプトがアタッチされたオブジェクト(今回はButtonオブジェクト)をドラッグ&ドロップします。(下図参照)
最後に下図を参考に、ボタンがクリックされた時に呼び出したい関数をOnClick()に結びつけましょう。
機能の確認
それでは実際にボタンクリック時の機能を確認しましょう。画面上にあるPlayボタンをクリックし、Buttonオブジェクトをクリックしてみて下さい。
結果として下図のように画面が移動していれば成功です。
皆さん、上手くできたでしょうか。この記事が少しでも皆様のゲーム制作の役に立てば幸いです。
以上。
コメント