Unity ノンフィールドRPGの作り方4 ダンジョン探索画面のUIを実装しよう

現場レベルのゲーム制作が、すべてここで学べます。

【永久会員チケット】

全講座を見放題で学ぶ

ソースコード・素材・プロジェクトすべて公開。
Unityの基礎から応用まで、一生使えるスキルを体系的に習得。

この講座はUnity 初心者向けノンフィールドRPGの作り方講座の第4回です。

前回はタイトル画面からダンジョン画面へ移行するための基本となる機能やオーディオ再生機能をシングルトンを用いて実装しました。

前回の記事：

Unity ノンフィールドRPGの作り方3 シングルトンを使ってゲームマネージャーを実装／BGMと効果音を実装

この講座はUnity 初心者向けノンフィールドRPGの作り方講座の第3回です。前回はTextMeshProやButtonオブジェクトを配置してタイトルシーンを作成しました。前回の記事：第3回ではタイトルシーンから別のシーンに移行するためのス...

ここからはノンフィールドRPGのダンジョン探索画面のシーンを開発していきます。

4章ではカメラや音響などダンジョンシーンの基本設定を行い、プレイヤーのステータスパネルUIやダンジョン探索のための行動ボタンを作成していきます。

今すぐ無料で登録▶

【ゲームの作り方講座プレゼント中！】

ダンジョンシーンを作成する
1. カメラの設定
ダンジョン探索シーンで流す音楽を準備しよう
1. SoundManager.cs
2. AudioClipをアタッチする
UIの作成　ダンジョン探索画面のステータスや行動ボタンを設定しよう
今回のプロジェクトファイル
まとめ

ダンジョンシーンを作成する

ダンジョンシーンを作成していきます。[Assets]→[Scenes]にある[Dungeon]をダブルクリックしてダンジョンシーンを開きます。

[Window]→[Rendering]→[Lighting]の順でクリックして、Lightingを開きます。

上にある[Environment]をクリックしてEnvironmentを表示します。

Environmentの一番上にある[Skybox Material]の右にあるオブジェクトピッカーをクリックして、[None]を選択します。

カメラの設定

背景を黒くするためにカメラの設定を変更します。

Hierarchyビューにある[Main Camera]をクリックしてInspectorビューを表示します。

Transformを上記のとおり(0, 0, 0)に設定します。Cameraコンポーネントの[Clear Flags]を「Solid Color」に変更し、Backgroundの色を黒に変更します。

Gameビューを開いて背景が黒になっていることを確認します。

ダンジョン探索シーンで流す音楽を準備しよう

ダンジョンシーンのBGM準備をします。

タイトルシーンでのBGM処理と同じようにまずはAudioClipをアタッチするための変数を宣言します。そしてダンジョンシーンのBGMを再生するメソッドを追加していきます。

SoundManager.cs

using UnityEngine;

public class SoundManager : MonoBehaviour
{
    public static SoundManager Instance;
    private AudioSource audioSource;

    public AudioClip TitleBGM;
    public AudioClip DungeonBGM;
    public AudioClip TouchSE;

    private void Awake()
    {
        if (Instance == null)
        {
            Instance = this;
            audioSource = GetComponent<AudioSource>();
            DontDestroyOnLoad(gameObject);
        }
        else
        {
            Destroy(gameObject);
        }
    }

    // Start is called once before the first execution of Update after the MonoBehaviour is created
    void Start()
    {

    }

    // Update is called once per frame
    void Update()
    {

    }

    private void PlayBgm(AudioClip audioClip)
    {
        if (audioSource.clip == audioClip) return;// すでに再生されているBGMなら処理しない

        audioSource.clip = audioClip;
        audioSource.Play();
    }

    public void PlayTitleBGM()
    {
        PlayBgm(TitleBGM);
    }

    public void PlayDungeonBGM()
    {
        PlayBgm(DungeonBGM);
    }

    public void PlayTouchSE()
    {
        audioSource.PlayOneShot(TouchSE);
    }
}

using UnityEngine;

public class SoundManager : MonoBehaviour

{

public static SoundManager Instance;

private AudioSource audioSource;

public AudioClip TitleBGM;

public AudioClip DungeonBGM;

public AudioClip TouchSE;

private void Awake()

{

if (Instance == null)

{

Instance = this;

audioSource = GetComponent<AudioSource>();

DontDestroyOnLoad(gameObject);

}

else

{

Destroy(gameObject);

}

// Start is called once before the first execution of Update after the MonoBehaviour is created

void Start()

{

}

// Update is called once per frame

void Update()

{

}

private void PlayBgm(AudioClip audioClip)

{

if (audioSource.clip == audioClip) return;// すでに再生されているBGMなら処理しない

audioSource.clip = audioClip;

audioSource.Play();

}

public void PlayTitleBGM()

{

PlayBgm(TitleBGM);

}

public void PlayDungeonBGM()

{

PlayBgm(DungeonBGM);

}

public void PlayTouchSE()

{

audioSource.PlayOneShot(TouchSE);

}

AudioClipをアタッチする

SoundManagerオブジェクトにAudioClipをアタッチするのですが、SoundManagerオブジェクトはタイトルシーンにあるため、一度[Assets]→[Scenes]にある[Title]をダブルクリックしてタイトルシーンに戻ります。

Unityエディタで別のシーンを開くとき、今のシーンを保存するかどうかを確認するダイアログが開くことがあります（Ctrlキー + Sキーなどでシーンを保存していれば開きません）。

必ず保存してから別のシーンを開くようにしましょう。

ではタイトルシーンのHierarchyビューにあるSoundManagerオブジェクトをクリックしてInspectorビューを表示します。

AssetStoreからインポートしたフォルダ[LUShvalleySound]→[LUShvalleySound_FantasyBGM_FreePackVol.01]→[LVSD-0006_09_CursedForest_loop]をドラッグアンドドロップします。

（↑この画面操作では最初にインスペクターのカギマークをクリックして画面固定を行ってからBGMデータをアタッチしています。終わったらカギマークを外しておきましょう）

SoundManagerオブジェクトはシングルトンで設計したのでゲーム中ずっとタイトルシーンから存在し続けます。

今後もGameManagerやSoundManagerにアタッチするときはタイトルシーンから行います。

また、この章ではダンジョンシーンでのBGM再生スクリプトは書きません。6章でダンジョン管理のスクリプトを作成するのでそこで一緒に行います。

UIの作成　ダンジョン探索画面のステータスや行動ボタンを設定しよう

再度、[Assets]→[Scenes]にある[Dungeon]をダブルクリックしてダンジョンシーンを開きます。

まずはダンジョンシーンで表示するプレイヤーのステータスウィンドウを作成します。

Hierarchyビューを右クリックし、[UI]→[Image]をクリックします。

[Canvas]とその下に[Image]そして、[EventSystem]オブジェクトが作成されます。

まずはImageオブジェクトの名前を「Status」に変更しておきます。

次に、Canvasオブジェクトを選択してInspectorビューを開きます。

Canvas Scalerコンポーネントの[UI Scale Mode]を[Scale With Screen Size]に変更します。

[Reference Resolution]のXを1080にYを1920に変更します。

[Screen Match Mode]を[Expand]に変更します。

StatusオブジェクトをHierarchy画面でクリック。Inspectorビューを表示し、Transformで四角形で描かれているAnchor Presetの設定をStretch-Topに変更しておきます。

↑Shiftキーを押しながらStretch-Topを選択。

RectTransformコンポーネントの設定を上の画像のとおり変更します。

ImageコンポーネントのSource ImageにAssetStoreからインポートした[GUI_Parts]→[GUI_Parts]→[mid_background]をドラッグアンドドロップします。

ステータスウィンドウ用フレーム画像を用意してBorder設定を行う

Border設定とは、画像の四隅・上下左右・中央の9つの領域を分けて、UIの画像を拡大しても画像のフチが伸びすぎないようにする機能です。

まずはAssetStoreからインポートした[GUI_Parts]→[GUI_Parts]→[Mini_frame1]を選択してInspectorビューを開きます。

[Open Sprite Editor]をクリックしてSprite Editorウィンドウを開きます。

画像のとおりBorderのL,T,R,Bの設定を64にし、上にある[Apply]をクリックしてからウィンドウを閉じます。

設定を変更したMini_frame1.pngの状態を保存するか聞かれたら「Save」をクリックしましょう。

フレーム画像を表示させる

Hierarchyウィンドウの[Status]オブジェクトを右クリックし、[UI]→[Image]をクリックします。

Imageオブジェクトの名前を「Frame」に変更してInspectorビューを表示します。

まず、左側のAnchorをcenter-middleからStretch-Stretchに変更します。

そして数値設定を上記のとおり設定します。ImageコンポーネントのSource Imageを先ほどSprite Editorで編集した[GUI_Parts]→[Gui_parts]→[Mini_frame1]をドラッグアンドドロップします。

↑このようにステータス画面の枠にフレームが表示されるようになりました。囲み枠ができてステータスウィンドウがリッチな仕上がりになりましたね。

ステータス表示用テキストオブジェクトを作成しよう

ステータスウィンドウにプレイヤーのレベル、プレイヤーのHP、ダンジョンの階層、食料の残りを表示するためのテキストを作成します。

Hierarchyウィンドウの[Status]オブジェクトを右クリックし、[UI]→[Text – TextMeshPro]をクリックしてText(TMP)を4つ作成します。

それぞれ名前をLevel、HP、Floor、Foodに変更します。作成した4つのオブジェクトをShiftキーを押しながら複数選択してInspectorビューを表示します。

作成したオブジェクトをShiftキーを押しながらまとめて選択します。

まとめて選択されたオブジェクトに同じコンポーネントがある場合、同時にそれらの設定を変更できます（例外的にまとめて設定を変更できないコンポーネントも存在します）。

Anchorをcenter-middleからstretch-stretchに変更し、Rect Transformの数値を変更していきます。

4つの共通のコンポーネントの設定を上記のとおり変更します。

LevelオブジェクトのTextMeshProコンポーネントの設定

Hierarchyウィンドウの[Level]オブジェクトだけをクリックし、Inspectorビューを表示し、以下の設定に変更します。

プレイヤーのレベルはステータスウィンドウの左上に表示します。この段階では『LV 0』と表示されるようにしておきます。

HPオブジェクトのTextMeshProコンポーネントの設定

Hierarchyウィンドウの[HP]オブジェクトだけをクリックし、Inspectorビューを表示し、以下の設定に変更します。

プレイヤーのHPはステータスウィンドウの左下に表示します。この段階では『HP 0 / 0』と表示されるようにしておきます。Alignmentを変更し、テキストを左下に寄せています。

FloorオブジェクトのTextMeshProコンポーネントの設定

Hierarchyウィンドウの[Floor]オブジェクトだけをクリックし、Inspectorビューを表示し、以下の設定に変更します。

ダンジョンの階層はステータスウィンドウの右上に表示します。仮で「1F」と表示させます。Alignmentを変更し、テキストを右上に寄せています。

FoodオブジェクトのTextMeshProコンポーネントの設定

Hierarchyウィンドウの[Food]オブジェクトだけをクリックし、Inspectorビューを表示し、以下の設定に変更します。

残りの食料はステータスウィンドウの右上に表示します。仮で「食料 100」と表示させます。Alignmentを変更し、テキストを右下に寄せています。

Gameビューで上記のようなステータスウィンドウが作成されていることを確認します。

次の階層に進むための「前進ボタン」の作成

ダンジョン探索を行うための前進ボタンを作成していきます。

HierarchyウィンドウのCanvasを右クリックして、[UI]→[Button – TextMeshPro]をクリックします。

Buttonオブジェクトの名前を「ButtonMove」に変更してInspectorビューを表示し、設定を行います。

↑操作の流れを動画にしています。ちょっと長いので個別設定画面を以下に掲載します。

まずはButtonMoveのInspercor画面から上記画像のように設定を変更します。Source ImageにはAsset Storeからインポートした[GUI_Parts]→[Gui_parts]→[barmid_ready]をドラッグアンドドロップします。

次に、ButtonMoveオブジェクトの下にあるText(TMP)オブジェクトをクリックして、Inspectorビューを開きます。

TextMeshProコンポーネントを以下のとおり変更します。

HPを回復するための休憩ボタンの作成

このゲームではダンジョン探索を行う前進ボタンだけでなく、食料を消費してHPを回復する休憩機能も実装します。

ただ前進するだけでなく、ステータス状況に応じて休息をとる選択をプレイヤーに迫ることでゲーム性を高めます。

まずは前進ボタンである「ButtonMove」オブジェクトを複製して休憩ボタンを作成します。

HierarchyウィンドウのButtonMoveを右クリックして、[Duplicate]をクリックしてボタンを複製します（ctrl + Dキーでも複製可能です）。

複製したButtonオブジェクトの名前を「ButtonRest」に変更してInspectorビューを表示します。

RectTransformコンポーネントのPos Xだけを変更します。

ButtonRestオブジェクトの下にあるText(TMP)のText Inputを「休憩」に変更します。

上の画像のようなUIが作成されていることを確認します。

今回のプロジェクトファイル

ここまでの操作を行ったプロジェクトファイルを用意しました。

まとめ

今回はダンジョンシーンの設定を行い、ステータスウィンドウや前進、休憩コマンドを行うためのボタンUIを作成しました。

次回はダンジョンのオブジェクトを作成し、プレイヤーのデータを保存するためのクラスを作成します。

Unity ノンフィールドRPGの作り方5 3Dダンジョンの制作と光源の設置／プレイデータ管理クラスの作成

この記事はノンフィールドRPGの作り方講座の第5回です。前回はダンジョンシーンの作成とステータスUI・行動ボタンの作成を行いました。前回の記事：第5回ではダンジョンにオブジェクトを配置していき、プレイデータを管理するクラスを作成します。ダン...

Unity ノンフィールドRPGの作り方講座に戻る>>

【ゲームの作り方講座もプレゼント中！】