RPGSystems 12: Leveling 03 – Creating Experience UI

The RPGEntity class will be the center class that will control all classes that make up and entity. Below we will cover an extreme simple version that will be extended upon in future tutorials.

Create a new C# script called RPGEntity

public class RPGEntity : MonoBehaviour {
    [SerializeField]
    private RPGEntityLevel _entityLevel;

    public RPGEntityLevel EntityLevel {
        get { return _entityLevel; }
        set { _entityLevel = value; }
    }
    
    void Awake () {
        if (EntityLevel == null) {
            EntityLevel = GetComponent<RPGEntityLevel>();
            if (EntityLevel == null) {
                Debug.LogWarning("No RPGEntityLevel assigned to RPGEntity");
            }
        }
    }
}

This basic version of the RPGEntity contains the variable and property used for the RPGEntityLevel that’s part of the entity. It also checks if the entity level was set in the inspector and if it wasn’t tries to grab it off the GameObject the RPGEntity class is attached to.

Simple Experience UI

The UI for the experience bar will be made up of four different GameObjects: UIExperienceBar, ExperienceBarArea, ExperienceBarFill, and ExperienceBarValues. The Hierarchy for these objects is displayed below.

The UIExperienceBar GameObject will be the base GameObject for the experience bar element. It will control the overall size and location of the experience bar. This object will also contain an Image component that will be used as the background for the experience bar.

The ExperienceBarArea GameObject will be used to calculate the size of the fill object. The Area object should ideally be stretched to fit the UIExperienceBar GameObject with a slight bit of padding. This object will not have any additional attachments, and will only be used for it’s size.

The ExperienceBarFill will be manipulated by the script controlling the experience bar UI element to visually show how much the of the required experience the entity currently has. This object should be stretched to fit the ExperienceBarArea object with no padding. The fill object should also have an Image component that will display the experience amount.

The ExperienceBarValues will be a text object that will display the values from the EntityLevel. This object will be stretech to fit the ExperienceBarArea with some padding. The values object will need a Text component and have the Alignment values of the text set to Center Align and Mid Align.

The end result for this setup can look similar to what is shown below.

Create a new C# script called UIExperienceBar

using UnityEngine;
using UnityEngine.UI;
public class UIExperienceBar : MonoBehaviour {
    public RPGEntity entity;
    public RectTransform expBarArea;
    public RectTransform expBarFill;
    public Text expBarValues;

    void Awake () {
        entity.EntityLevel.OnEntityExpGain += OnExpGain;
    }

    void OnExpGain(object sender, RPGExpGainEventArgs args) {
        // Find the precentage of the current levels required experience the entity has
        float expPercent = Mathf.Clamp((float)entity.EntityLevel.ExpCurrent / (float)entity.EntityLevel.ExpRequired, 0f, 1f);

        // Get the new right offset value
        float newRightOffset = -expBarArea.rect.width + expBarArea.rect.width * expPercent;

        // Set the ExpBarFill's new right offset
        expBarFill.offsetMax = new Vector2(newRightOffset, expBarFill.offsetMax.y);

        // Update the exp bar value text with correct values
        expBarValues.text = string.Format("{0} / {1} (Level {2})", 
            entity.EntityLevel.ExpCurrent, 
            entity.EntityLevel.ExpRequired, 
            entity.EntityLevel.Level);
    }
}

The UI script will listen to the set entity’s experience gained event, and update the size of the experience bar’s fill object and the text of the experience bar values object. This script will be attached to the UIExperienceBar GameObject and the values will need to be set from the inspector.

Note* Create a prefab of the UIExperienceBar once all values are set to only have to set up the element once.

Creating a GameObject with the RPGEntity and a relating RPGEntityLevel class we can tell the UIExperienceBar to listen to the new entity by setting the entity field in the UIExperienceBar’s inspector. The experience bar should reflect the values given from the RPGEntityLevel class.

Simple Experience Test

To see the RPGEntityLevel in action we can create a simple test script that will give the entity a set amount of experience every frame. As the entity is given experience it should level up and the experience bar UI should update to reflect the changes.

Create a new C# script called RPGEntityLevelTest

public class RPGEntityLevelTest : MonoBehaviour {
    public RPGEntity entity;

    void Update () {
        entity.EntityLevel.ModifyExp(100);
    }
}

Github Repository

https://github.com/jkpenner/RPGSystemTutorial

Stat System End Point Branch

https://github.com/jkpenner/RPGSystemTutorial/tree/StatSystemEndPoint