Interactive

Overview

Interactive is an extended version of Unity's Selectable that adds rich interaction states, built in ripple and trail effects, audio styling, and fully customizable CanvasGroup based visual transitions. It is the core class behind Evo UI buttons and other selectable components.

The component manages state transitions (Normal, Highlighted, Pressed, Selected, Disabled), handles pointer and submit events, supports audio styling via Styler, and plays animated foreground and background transitions using CanvasGroups.

Usage

Transitions

Interactive includes two different state based transition systems you can use.

Canvas Group

You can create objects such as Normal, Highlighted, and/or others, add a CanvasGroup component to them, and assign them under the References tab. After that, you can add your custom UI objects, which will be animated smoothly.

• Disabled: Displays when component state is set to disabled
• Normal: Default appearance
• Highlighted: Shown when pointer is hovered or selected with a controller
• Pressed: Shown when pointer is pressed or controller submit button is pressed
• Selected: Sets the visual state and makes the Interactive object non-interactable until set to other state

Styler Object

Interactive supports state based transitions through the Styler Object system. This includes color changes on hover, click, and other interactions. For more information, see the Styler page.

Properties

Settings

Ripple Effect

Trail Effect

Sound Effects

References

Events

External Callback

Public Methods

Code Example

using UnityEngine;
using Evo.UI;

public class InteractiveExample : MonoBehaviour
{
    public Interactive interactive;

    void Start()
    {
        // Enable ripple and trail effects
        interactive.enableRipple = true;
        interactive.enableTrail = true;

        // Assign presets
        interactive.ripplePreset = new Ripple.Preset
        {
            shape = someSprite,
            color = new Color(1f, 1f, 1f, 0.5f),
            duration = 0.4f,
            size = 6f,
            centered = false
        };

        interactive.trailPreset = new PointerTrail.Preset
        {
            shape = someSprite,
            color = new Color(1f, 1f, 1f, 0.8f),
            scale = 1.1f,
            offset = new Vector2(5f, -5f),
            fadeDuration = 0.15f
        };

        // Configure transition
        interactive.transitionDuration = 0.15f;

        // Register onClick event
        interactive.onClick.AddListener(() =>
        {
            Debug.Log("Interactive element clicked");
        });

        // Listen for state changes
        interactive.OnStateChanged += state =>
        {
            Debug.Log("New state: " + state);
        };
    }
}