【Unity基礎3】画面遷移機能をボタンに実装する

Unity基礎

今回はUnityでボタンが押された時に、別の画面を遷移(移動)する機能の実装について説明します。単一画面のゲームもなくはないですが、画面遷移ができればダンジョンの探索画面→戦闘画面などができるようになり、本格的なゲーム作りに役立つと思います。

Canvasの作成と調整

 

先ずはボタンを表示させる土台となるCanvasを作成するとともに、位置や大きさを調整します。

方法はすでに【Unity基礎_2】で説明していますので、下記を参考に設定をして下さい。

【Unity基礎2】会話シーンの実装方法〜Fungusの使い方①〜
今回はUnityの無料AssetであるFungusを使った会話の実装方法について説明します。

Buttonの作成と調整

 

STEP1:Buttonの作成

Canvasが作成できたら、次はCanvasの子要素としてボタンを作成しましょう。具体的にはヒエラルキーウィンドウでCanvasを選択した状態で右クリックを押し、UI→Buttonを左クリックという手順で作成できます。(下図参照)

STEP2:Buttonの大きさ・位置の調整

続いて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つが同じゲームで使われるシーンであることを認識させる必要があります。

登録は下図に示すように

①Fileタブ→BuildSettingsを左クリックする
②BuildSetteingsウィンドウのScenesInBuildの枠内に二つのシーンをドラッグ&ドロップする

という手順で行うことができます。

ScenesInBuildの右側に0や1といった数字が割り振られています。ゲームをスマートフォンなどでプレイした時には0番からスタートしますので、必要に応じて設定しましょう。

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");
    }
}

ここで上記スクリプトのポイントを説明すると以下の通りです。

4行目:画面遷移を実施する、LoadSceneを使用するために記述します。
8行目:ボタンを押した時に呼び出されるメソッドです。
ボタンオブジェクトというクラスの外部からこの関数を呼び出すため、publicにしています。
11行目:SceneManager.LoadScene(“A”)は決まり文句です。Aの中には呼び出したいシーンの名前を記述します。

ボタンクリック時の機能実装

最後にボタンに上でスクリプトに記述した関数を認識させ、ボタンがクリックされた時の挙動と結びつけましょう。

STEP1:スクリプトのアタッチ

先ずは先程作成したスクリプトをオブジェクトにアタッチします。これによりアタッチされたオブジェクトにそのスクリプトで記述された特性を持たせることができます。

ここでいう特性とは関数や変数のことを指しています。

今回はButtonオブジェクトに先程記述したButtonControllerスクリプトをアタッチすることとします。方法はいくつかありますが、今回はプロジェクトウィンドウのスクリプトをヒエラルキーウィンドウのButtonにドラッグ&ドロップを行うことで実施します。(下図参照)

上述の手順により上図のようにButtonオブジェクトのインスペクターウィンドウ下部にButtonControllerが追加されることが確認できると思います。

これでアタッチは成功です。

STEP2:クリック時の機能とスクリプトの結合

スクリプトのアタッチまでできたら、ボタンクリック時にスクリプトに記述したClickTitleScene関数が呼ばれるようにしましょう。

先ず、下図を参考に、Butonオブジェクトのインスペクターウィンドウ下部にあるOnClick() の+ボタンを左クリックします。

続いてOnClick()部分にあるNoneと記述されている箱にスクリプトがアタッチされたオブジェクト(今回はButtonオブジェクト)をドラッグ&ドロップします。(下図参照)

上記作業により、Buttonオブジェクトがクリックされた時にButtonオブジェクトにアタッチされたスクリプトの関数を呼び出すことができるようになります。

最後に下図を参考に、ボタンがクリックされた時に呼び出したい関数をOnClick()に結びつけましょう。

機能の確認

それでは実際にボタンクリック時の機能を確認しましょう。画面上にあるPlayボタンをクリックし、Buttonオブジェクトをクリックしてみて下さい。 

結果として下図のように画面が移動していれば成功です。

皆さん、上手くできたでしょうか。この記事が少しでも皆様のゲーム制作の役に立てば幸いです。

以上。

-ゲームアプリ「HelloAnotherWorld」ダウンロードのお願い-

私が作成したゲームアプリ「HellowAnotherWorld」をダウンロードしていただけると嬉しいです。
有料ではありますが、ペットボトル飲料一本分程度の値段ですので、是非お願いします。
皆様にもメリットがあり、「このサイトで勉強すればこの程度のアプリであれば自分一人で作成できるようになる」という一つの目安にもなるかと思います。

-ゲームアプリ「HelloAnotherWorld」ダウンロードのお願い-

私が作成したゲームアプリ「HellowAnotherWorld」をダウンロードしていただけると嬉しいです。
有料ではありますが、ペットボトル飲料一本分程度の値段ですので、是非お願いします。
皆様にもメリットがあり、「このサイトで勉強すればこの程度のアプリであれば自分一人で作成できるようになる」という一つの目安にもなるかと思います。

スポンサーリンク
HelloAnotherWorld
HelloAnotherWorld
¥120
posted withアプリーチ
Unity基礎
ソフィーのUnity講座

コメント