C# OverlayUI and InGameMissionUI: Guide to Creating Game UI

This article provides a detailed explanation of two C# classes, OverlayUI and InGameMissionUI, used for creating game UI in Unity. It guides you through understanding their structure, functionalities, and how to inherit and extend them for custom UI development.

OverlayUI: The Foundation of Game UI

The OverlayUI class serves as a foundation for creating UI elements in your game. It inherits from CoolSelectable and provides essential functionalities for managing UI display, animation, and interaction. Let's break down its core features:

Attributes and Properties:

• ShadowUnderlay: An Image component for displaying a shadow background behind the UI.
• Panel: A SlidingPanel component for housing the primary content of the UI.
• CvsGrp: A CanvasGroup component for controlling the transparency of the UI.
• DefaultFocus: A CoolSelectable component representing the default button that will be selected when the UI is activated.

Methods:

• Activate(): Activates the UI, showing it on the screen.
• Deactivate(): Deactivates the UI, hiding it from the screen.
• OnEntryPct(float pct): Called during the UI's entrance animation, allowing for customization based on the animation progress.
• OnEntryComplete(): Called once the entrance animation is finished.
• OnExitPct(float pct): Called during the UI's exit animation, allowing for customization based on the animation progress.
• OnExitComplete(): Called once the exit animation is finished.
• Shake(float amt, float len): Triggers a shaking animation effect for the UI.
• Select(MoveDirection entryDir = MoveDirection.None): Selects the UI element.
• IsAnimating(): Checks if the UI is currently performing an animation.

InGameMissionUI: A Specific UI for Game Missions

The InGameMissionUI class extends OverlayUI and is specifically designed for creating a mission UI in a game. It builds upon the foundation provided by OverlayUI and adds functionalities specific to displaying mission information and controls.

Attributes and Properties:

• LocPrompt: An array of Localize components for displaying mission prompts.
• ParamsPrompt: An array of LocalizationParamsManager components for configuring parameters for the prompt text.
• WrapperInfoCol: A RectTransform component for wrapping mission prompt columns.
• WrapperInfo: An array of RectTransform components for wrapping individual mission prompt rows.
• TgtPreview: An array of MissionTgtPreview components for displaying previews of mission targets.
• WrapperEnviroCol: A RectTransform component for wrapping environment information columns.
• WrapperEnviro: An array of RectTransform components for wrapping individual environment information rows.
• EnviroItems: An array of MissionEnviroItem components for displaying details of environment information.
• BtnBegin: A CoolButton component for starting the mission.

Methods:

• Activate(): Overrides the base class method, adding specific mission UI initialization logic.
• OnBeginClicked(): Called when the 'Begin' button is clicked, handling the start of the mission.
• OnExitComplete(): Overrides the base class method, adding mission UI exit specific logic.

Extending OverlayUI: Creating Custom UI Elements

To create your own custom UI elements using OverlayUI as a foundation, follow these steps:

1. Create a new class: Create a new C# class in your Unity project and make it inherit from OverlayUI.
2. Add attributes and properties: Define the necessary attributes and properties for your specific UI element. For example, if you're creating an inventory UI, you might add properties for an Inventory object and components to display inventory slots.
3. Override methods: If needed, override the methods of the base class to customize the behavior and appearance of your UI element. For example, you might override OnEntryPct() or OnExitPct() to implement custom animation effects.
4. Implement functionality: Add the required methods and logic to handle user interactions and functionality specific to your UI element. For example, if you're creating an inventory UI, you might implement methods to move items between slots or equip items.
5. Activate the UI: In your game logic, call the Activate() method on your custom UI class instance to display the UI.

Example: Creating a Character Menu UI

Let's create a basic example of a character menu UI that uses OverlayUI as a base:

using System;
using UnityEngine;
using UnityEngine.UI;

public class CharacterMenuUI : OverlayUI
{
    // Attribute to hold the character data
    public CharacterData characterData;

    // References to UI elements
    public Text nameText;
    public Image portraitImage;
    public Image healthBarImage;

    // Override the Activate method to initialize the UI
    public override void Activate()
    {
        base.Activate(); // Call the base class method

        // Set UI elements based on character data
        nameText.text = characterData.name;
        portraitImage.sprite = characterData.portraitSprite;
        healthBarImage.fillAmount = characterData.health / characterData.maxHealth;
    }

    // Implement functionality for updating the health bar
    public void UpdateHealth(float newHealth)
    {
        characterData.health = newHealth;
        healthBarImage.fillAmount = characterData.health / characterData.maxHealth;
    }
}

In this example, we create a CharacterMenuUI class that inherits from OverlayUI. We add a characterData attribute to store character information, references to UI elements, override the Activate() method to initialize the UI, and implement a UpdateHealth() method to update the health bar based on character data. Now, you can easily create and display a character menu UI in your game.

This example demonstrates the fundamental principles of extending OverlayUI to create custom UI elements. By understanding the structure and functionalities of these classes, you can create engaging and user-friendly interfaces for your Unity games.