ローグライクゲームの作り方6　パラメータ表示用UI・経験値・レベルアップ処理を開発する

→ Unity入門の森オリジナル本格ゲーム制作講座はこちら
11種類の本格ゲームの全ソースコード公開・画像＆動画による解説付き

前回の記事ではUnityとC#を用いてローグライクRPGの戦闘システムを実装しました。

風来のシレン、トルネコの大冒険、チョコボの不思議なダンジョンのようなターン制戦闘システムを作成しましたね。

前回の記事：

前回までの記事で敵の移動AIをUnityとC#でローグライクRPGに組み込んでいきました。前回の記事：今回の記事ではプレイヤーと敵がぶつかった時に戦闘するようにしていきましょう！まずは戦闘に必要なプレイヤーのステータスパラメータを作り...

今回の記事ではプレイヤーのパラメータを画面に表示するようにしていきます。

また、戦闘の結果、プレイヤーに経験値が入るようにしてレベルアップできるようにしていきます。

段々と本格的なローグライクRPGに近づいていきますね。

【Line登録者限定のプレゼントもあるよ！】

プレイヤーのパラメータ用のUIを作成
1. C#スクリプトからメニューの値を制御できるようにする
敵を倒したら経験値が入るようにする
まとめ

プレイヤーのパラメータ用のUIを作成

まずはプレイヤーのパラメータを表示するUIを作成していきます。

プレイヤーのパラメータとしては新しくレベルと経験値を加え、以下のものを用意します。

体力
攻撃力
Level：この記事で新しく追加
経験値：この記事で新しく追加

UIはUnity UIを使用して配置していきます。

次のような画像になるように配置してください。

上の画像のGameObjectの階層は次のようになっています。

「PlayerUI」(Canvas)
– 「Root」(Image)
– – 「LevelRoot」(空のゲームオブジェクト)
– – – 「Label」（Text）
– – – 「Level」（Text）
– – 「LifeRoot」(空のゲームオブジェクト)
– – – 「Label」（Text）
– – – 「Life」（Text）
– – 「AttackRoot」(空のゲームオブジェクト)
– – – 「Label」（Text）
– – – 「Attack」（Text）
– – 「ExpRoot」(空のゲームオブジェクト)
– – – 「Label」（Text）
– – – 「Exp」（Text）

この中の「Level」、「Life」、「Attack」、「Exp」はスクリプトから制御します。

また各GameObjectの作成方法とパラメータの一例は次のものになります。

//パラメータの一例
//「PlayerUI」
メニューのGameObject > UI > Canvasから作成

CanvasScaler
+ UI Scale Mode = 「Scale With Screen Size」
+ Match = Gameビューがいい感じになるように変更する。
+ ReferenceResolution X=800 Y=600 (画面サイズを変更した時はここも変更してください)

// -「Root」
「PlayerUI」を選択した状態でGameObject > UI > Imageで作成

RectTransform
+ Anchors Min=(0.25, 1) Max=(0.75, 1)
+ Offset Left=0, Left=0, PosY=0, PosZ=0, Height=34
+ Pivot = (0.5, 1)

Image
+ Source Image:なし
+ Color: 白色の半透明色

HorizontalLayoutGroup
+ ChildAlignment = Middle Center
+ Padding, Spacing = ともに０
+ ChildForceExpand = Width=true, Height=true
+ その他のパラメータはfalse
※子GameObjectの配置を簡単にするためだけに使用しているのでなくてもOK

// - -「LevelRoot」
RectTransform
+ Width = 60, Height = 30
+ Pivot = (0.5, 0.5)
+ Anchors, Posは「Root」のHorizontalLayoutから制御されている。

// - - -「Label」
「LevelRoot」を選択した状態でGameObject > UI > Textで作成

RectTransform
+ Anchors Min=(0, 0) Max=(0.5, 1)
+ Offset Left=0, Right=0, Top=0, Bottom=0
+ Pivot = (0.5, 0.5)

Text
+ Text = Lv
+ Alignment = 縦横ともに中央揃え
+ Best Fit = true, Min Size=10 Max Size=32

// - - -「Level」
「LevelRoot」を選択した状態でGameObject > UI > Textで作成

RectTransform
+ Anchors Min=(0.5, 0) Max=(1, 1)
+ Offset Left=0, Right=0, Top=0, Bottom=0
+ Pivot = (0.5, 0.5)

Text
+ Text = 1
+ Alignment = 縦は中央揃え、横は右揃え
+ Best Fit = true, Min Size=10 Max Size=32


// - -「LifeRoot」
「LevelRoot」のものをコピー

RectTransform
+ Width = 90, Height = 30

子GameObject 「Label」
+ TextコンポーネントのText =  Life

子GameObject 「Level」
+ 名前を「Life」に変更
+ TextコンポーネントのText =  10


// - -「AttackRoot」
「LevelRoot」のものをコピー

RectTransform
+ Width = 70, Height = 30

子GameObject 「Label」
+ TextコンポーネントのText =  Ak

子GameObject 「Level」
+ 名前を「Attack」に変更
+ TextコンポーネントのText =  2

// - -「ExpRoot」
「LevelRoot」のものをコピー

RectTransform
+ Width = 90, Height = 30

子GameObject 「Label」
+ TextコンポーネントのText =  Express

子GameObject 「Level」
+ 名前を「Exp」に変更
+ TextコンポーネントのText =  0

100

//パラメータの一例

//「PlayerUI」

メニューのGameObject > UI > Canvasから作成

CanvasScaler

+ UI Scale Mode = 「Scale With Screen Size」

+ Match = Gameビューがいい感じになるように変更する。

+ ReferenceResolution X=800 Y=600 (画面サイズを変更した時はここも変更してください)

// -「Root」

「PlayerUI」を選択した状態でGameObject > UI > Imageで作成

RectTransform

+ Anchors Min=(0.25, 1) Max=(0.75, 1)

+ Offset Left=0, Left=0, PosY=0, PosZ=0, Height=34

+ Pivot = (0.5, 1)

Image

+ Source Image:なし

+ Color: 白色の半透明色

HorizontalLayoutGroup

+ ChildAlignment = Middle Center

+ Padding, Spacing = ともに０

+ ChildForceExpand = Width=true, Height=true

+ その他のパラメータはfalse

※子GameObjectの配置を簡単にするためだけに使用しているのでなくてもOK

// - -「LevelRoot」

RectTransform

+ Width = 60, Height = 30

+ Pivot = (0.5, 0.5)

+ Anchors, Posは「Root」のHorizontalLayoutから制御されている。

// - - -「Label」

「LevelRoot」を選択した状態でGameObject > UI > Textで作成

RectTransform

+ Anchors Min=(0, 0) Max=(0.5, 1)

+ Offset Left=0, Right=0, Top=0, Bottom=0

+ Pivot = (0.5, 0.5)

Text

+ Text = Lv

+ Alignment = 縦横ともに中央揃え

+ Best Fit = true, Min Size=10 Max Size=32

// - - -「Level」

「LevelRoot」を選択した状態でGameObject > UI > Textで作成

RectTransform

+ Anchors Min=(0.5, 0) Max=(1, 1)

+ Offset Left=0, Right=0, Top=0, Bottom=0

+ Pivot = (0.5, 0.5)

Text

+ Text = 1

+ Alignment = 縦は中央揃え、横は右揃え

+ Best Fit = true, Min Size=10 Max Size=32

// - -「LifeRoot」

「LevelRoot」のものをコピー

RectTransform

+ Width = 90, Height = 30

子GameObject 「Label」

+ TextコンポーネントのText = Life

子GameObject 「Level」

+ 名前を「Life」に変更

+ TextコンポーネントのText = 10

// - -「AttackRoot」

「LevelRoot」のものをコピー

RectTransform

+ Width = 70, Height = 30

子GameObject 「Label」

+ TextコンポーネントのText = Ak

子GameObject 「Level」

+ 名前を「Attack」に変更

+ TextコンポーネントのText = 2

// - -「ExpRoot」

「LevelRoot」のものをコピー

RectTransform

+ Width = 90, Height = 30

子GameObject 「Label」

+ TextコンポーネントのText = Express

子GameObject 「Level」

+ 名前を「Exp」に変更

+ TextコンポーネントのText = 0

C#スクリプトからメニューの値を制御できるようにする

プレイヤーのパラメータを表示するためのUIが配置できたので、次はスクリプトから制御できるようにします。

新しく「PlayerUI」スクリプトを作成して、シーン上の「PlayerUI」にアタッチしてください。

「PlayerUI」スクリプトの内容は次のようにしてください。

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

class PlayerUI : MonoBehaviour
{
    [SerializeField] public Text LevelText;
    [SerializeField] public Text LifeText;
    [SerializeField] public Text AttackText;
    [SerializeField] public Text ExpText;

    public Player Player { get; private set; }

    public void Set(Player player)
    {
        Player = player;
    }

    private void Update()
    {
        if (Player == null) return;
        LevelText.text = Player.Level.ToString();
        LifeText.text = Player.Life.ToString();
        AttackText.text = Player.Attack.ToString();
        ExpText.text = Player.Exp.ToString();
    }
}

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

using UnityEngine.UI;

class PlayerUI : MonoBehaviour

{

[SerializeField] public Text LevelText;

[SerializeField] public Text LifeText;

[SerializeField] public Text AttackText;

[SerializeField] public Text ExpText;

public Player Player { get; private set; }

public void Set(Player player)

{

Player = player;

}

private void Update()

{

if (Player == null) return;

LevelText.text = Player.Level.ToString();

LifeText.text = Player.Life.ToString();

AttackText.text = Player.Attack.ToString();

ExpText.text = Player.Exp.ToString();

}

「PlayerUI」の中ではまだ定義していない「Player」コンポーネントの「Level」フィールドを使用しています。

そこで、次に「Player」スクリプトに「Level」フィールドを追加します。「Level」フィールドはこの記事の後でも使用します。

また、パラメータを「PlayerUI」コンポーネントに反映するようにしておきます。

//新しく追加する
public int Level = 1;
//次のメソッドを修正
    void Start()
    {
        var playerUI = Object.FindObjectOfType<PlayerUI>(); //追加
        playerUI.Set(this);

        StartCoroutine(CameraMove());
        StartCoroutine(ActionCoroutine());
    }