Create stylish and modern tutorials in Unity games using video tips in Pop-Up windows

Hi everyone, in today's tutorial I'm going to talk about creating stylish tutorial windows for your games using video. Usually such inserts are used to show the player what is required of him in a particular training segment, or to show a new discovered ability in the game.

Creating Tutorial Database

First, let's set the data about the tutorials. I set up a small model that stores a value with tutorial skip, text data, video reference and tutorial type:

// Tutorial Model
[System.Serializable]
public class TutorialData
{
    public bool CanSkip = false;
    public string TitleCode;
    public string TextCode;
    public TutorialType Type;
    public VideoClip Clip;
}

// Simple tutorial types
public enum TutorialType
{
    Movement,
    Collectables,
    Jumping,
    Breaking,
    Backflip,
    Enemies,
    Checkpoints,
    Sellers,
    Skills
}

Next, I create a payload for my event that I will work with to call the tutorial interface:

public class TutorialPayload : IPayload
{
    public bool Skipable = false;
    public bool IsShown = false;
    public TutorialType Type;
}

Tutorial Requests / Areas

Now let's deal with the call and execution of the tutorial. Basically, I use the Pub/Sub pattern-based event system for this (you can read more about it in my other tutorial), and here I will show how a simple interaction based on the tutorial areas is implemented.

public class TutorialArea : MonoBehaviour
{
    // Fields for setup Tutorial Requests
    [Header("Tutorial Data")] 
    [SerializeField] private TutorialType tutorialType;
    [SerializeField] private bool showOnStart = false;
    [SerializeField] private bool showOnce = true;

    private TutorialData tutorialData;
    private bool isShown = false;
    private bool onceShown = false;

    // Area Start
    private void Start() {
        FindData();

        // If we need to show tutorial at startup (player in area at start)
        if (showOnStart && tutorialData != null && !isShown) {
            if(showOnce && onceShown) return;
            isShown = true;
            // Show Tutorial
            Messenger.Instance.Publish(new TutorialPayload
                { IsShown = true, Skipable = tutorialData.CanSkip, Type = tutorialType });
        }
    }

    // Find Tutorial data in Game Configs
    private void FindData() {
        foreach (var tut in GameBootstrap.Instance.Config.TutorialData) {
            if (tut.Type == tutorialType)
                 tutorialData = tut;
        }

        if(tutorialData == null)
            Debug.LogWarning($"Failed to found tutorial with type: {tutorialType}");
    }

    // Stop Tutorial Outside
    public void StopTutorial() {
        isShown = false;
        Messenger.Instance.Publish(new TutorialPayload
            { IsShown = false, Skipable = tutorialData.CanSkip, Type = tutorialType });
    }

    // When our player Enter tutorial area
    private void OnTriggerEnter(Collider col) {
        // Is Really Player?
        Player player = col.GetComponent<Player>();
        if (player != null && tutorialData != null && !showOnStart && !isShown) {
            if(showOnce && onceShown) return;
            onceShown = true;
            isShown = true;
            // Show our tutorial
            Messenger.Instance.Publish(new TutorialPayload
                { IsShown = true, Skipable = tutorialData.CanSkip, Type = tutorialType });
        }
    }

    // When our player leaves tutorial area
    private void OnTriggerExit(Collider col) {
        // Is Really Player?
        Player player = col.GetComponent<Player>();
        if (player != null && tutorialData != null && isShown) {
            isShown = false;
            // Send Our Event to hide tutorial
            Messenger.Instance.Publish(new TutorialPayload
                { IsShown = false, Skipable = tutorialData.CanSkip, Type = tutorialType });
        }
    }
}

And after that, I just create a Trigger Collider for my Tutorial zone and customize its settings:

Tutorial UI

Now let's move on to the example of creating a UI and the video in it. To work with UI I use Views - each View for a separate screen and functionality. However, you will be able to grasp the essence:

To play Video I use Video Player which passes our video to Render Texture, and from there it goes to Image on our UI.

So, let's look at the code of our UI for a rough understanding of how it works (Ignore the inheritance from BaseView - this class just simplifies showing/hiding UIs and Binding for the overall UI system)*:

public class TutorialView : BaseView
{
    // UI References
    [Header("References")] 
    public VideoPlayer player;
    public RawImage uiPlayer;
    public TextMeshProUGUI headline;
    public TextMeshProUGUI description;
    public Button skipButton;

    // Current Tutorial Data from Event
    private TutorialPayload currentTutorial;

    // Awake analog for BaseView Childs
    public override void OnViewAwaked() {
        // Force Hide our view at Awake() and Bind events
        HideView(new ViewAnimationOptions { IsAnimated = false });
        BindEvents();
    }

    // OnDestroy() analog for BaseView Childs
    public override void OnBeforeDestroy() {
        // Unbind Events
        UnbindEvents();
    }

    // Bind UI Events
    private void BindEvents() {
        // Subscribe to our Tutorial Event
        Messenger.Instance.Subscribe<TutorialPayload>(OnTutorialRequest);

        // Subscribe for Skippable Tutorial Button
        skipButton.onClick.RemoveAllListeners();
        skipButton.onClick.AddListener(() => {
            AudioSystem.PlaySFX(SFXType.UIClick);
             CompleteTutorial();
        });
    }

    // Unbind Events
    private void UnbindEvents() {
        // Unsubscribe for all events
        skipButton.onClick.RemoveAllListeners();
        Messenger.Instance.Unsubscribe<TutorialPayload>(OnTutorialRequest);
    }

    // Complete Tutorial
    private void CompleteTutorial() {
        if (currentTutorial != null) {
            Messenger.Instance.Publish(new TutorialPayload
                { Type = currentTutorial.Type, Skipable = currentTutorial.Skipable, IsShown = false });
            currentTutorial = null;
        }
    }

    // Work with Tutorial Requests Events
    private void OnTutorialRequest(TutorialPayload payload) {
        currentTutorial = payload;
        if (currentTutorial.IsShown) {
           skipButton.gameObject.SetActive(currentTutorial.Skipable);
           UpdateTutorData();
           ShowView();
        }
        else {
           if(player.isPlaying) player.Stop();
           HideView();
        }
    }

    // Update Tutorial UI
    private void UpdateTutorData() {
        TutorialData currentTutorialData =
            GameBootstrap.Instance.Config.TutorialData.Find(td => td.Type == currentTutorial.Type);
        if(currentTutorialData == null) return;

        player.clip = currentTutorialData.Clip;
        uiPlayer.texture = player.targetTexture;
        player.Stop();
        player.Play();
        headline.SetText(LocalizationSystem.GetLocale($"{GameConstants.TutorialsLocaleTable}/{currentTutorialData.TitleCode}"));
        description.SetText(LocalizationSystem.GetLocale($"{GameConstants.TutorialsLocaleTable}/{currentTutorialData.TextCode}"));
    }
}

Video recordings in my case are small 512x512 clips in MP4 format showing certain aspects of the game:

And my TutorialData settings stored in the overall game config, where I can change localization or video without affecting any code or UI:

In conclusion

This way you can create a training system with videos, for example, showing what kind of punch your character will make when you press a key combination (like in Ubisoft games). You can also make it full-screen or with additional conditions (that you have to perform some action to hide the tutorial).

I hope I've helped you a little. But if anything, you can always ask me any questions you may have.

Thanks!

---

My Discord | My Blog | My GitHub | Buy me a Beer