Unityでシンプルなスキルツリーを作成。Part.1簡単なUIとステータス上昇

Unityでシンプルなスキルツリーを作成してみます。スキルツリーは様々なゲームで実装されており多くの種類があります。今回は簡単な仕組みで作成していきます。

はじめに

今回作成するスキルツリーは、ボタンを押すとステータス（ライフ、攻撃力）を加算、次のボタンを開放する。というシンプルな作りです。Part1では「簡単なUIとボタンを押したらステータス上昇」を作成していきます。

Unityのバージョン

今回は「Unity 6000.5.2f1」バージョンで作成していきます。UnityHubから「新しいプロジェクト」を選択、テンプレートは「Universal 2D」を選択します。

作成開始

まずは簡単なUIを作成していきます。

UIを作成

Hierarchyに空オブジェクトを追加、名前を「UI」に変更します。

「UI」配下に「Canvas」を追加、名前を「SkillTreeCanvas」に変更します。

「SkillTreeCanvas」配下に「Image」を追加、名前を「BackImage」に。さらに配下に「Button」を追加します。

BackImageはスキルツリーの背景になります。位置や大きさ・色を変更します。

ボタンもサイズを変更します。

ボタンのイメージを好きなアイコンに変更します。今回は最大HPを上昇させるのでライフっぽいアイコンにしています。

下記の様な感じにします。薄い背景にボタンがあるだけです。見た目だけなので好きな形でOK

アイコンは下記アセットストアでフリーで公開されているものを利用しています。

動作確認テスト用作成

新規で空オブジェクトを追加、名前を「Test」に変更。「TestScript」を新規作成してアタッチします。

「TestScript」の中身を下記に変更。最大HPのみを保持しています。

using UnityEngine;

public class TestScript : MonoBehaviour
{
    public int maxHealth;
}

スクリプト作成

「Button」の名前を「MaxHealthUP」に変更。「SkillPanel」スクリプトを新規作成してアタッチします。

「SkillPanel」スクリプトの中身は下記に変更します。UnityActionを利用して、ボタンを押した時に他スクリプトでも作動するようにしています。

using UnityEngine;
using UnityEngine.Events;

public class SkillPanel : MonoBehaviour
{
    public static UnityAction<SkillPanel> OnSkillPanelClick;

    public void ButtonClick()
    {
        OnSkillPanelClick?.Invoke();
    }
}

「UnityAction」の基本は下記にて記事にしています。

「TestScript」を下記に変更します。「OnSkillPanelClick」に最大HPが増える関数を登録しています。

using UnityEngine;

public class TestScript : MonoBehaviour
{
    public int maxHealth = 50;

    private void OnEnable()
    {
        SkillPanel.OnSkillPanelClick += MaxHealthUP;
    }

    private void OnDisable()
    {
        SkillPanel.OnSkillPanelClick -= MaxHealthUP;
    }
    private void MaxHealthUP()
    {
        maxHealth += 10;
    }
}

ボタンクリックにスクリプトの「ButtonClick」を割り当てます。

実行してボタンを押した時、「Test」の最大HPが増えたらOKです。

現状だと何度も押せてしまうので、「SkillPanel」スクリプトを下記に変更。フラグを追加して一回だけ有効に制御します。また、有効時は背景を白色、無効時は灰色にします。

using UnityEngine;
using UnityEngine.Events;
using UnityEngine.UI;

public class SkillPanel : MonoBehaviour
{
    public static UnityAction<SkillPanel> OnSkillPanelClick;

    private Image skillImageBackColor;
    private bool isLocked;

    private void Start()
    {
        skillImageBackColor = GetComponent<Image>();
        skillImageBackColor.color = Color.grey;
        isLocked = false;
    }

    public void ButtonClick()
    {
        if(!isLocked)
        {
            isLocked = true;
            skillImageBackColor.color = Color.white;
            OnSkillPanelClick?.Invoke();
        }
    }
}

実行してみて、一回しか最大HPが増えなければOK。「OnSkillPanelClick」に「最大HPアップ」を登録。ボタンを押した時に「OnSkillPanelClick」が作動するという感じですね。