User Manual

Animations & Effects

Overview

Universal Outline System supports two types of dynamic animation effects: width pulsing and gradient scrolling. These can be combined to create eye-catching visual feedback for selected objects, power-ups, or interactive elements.

Pulse Width Animation

What it does

Animates the outline width using a sine wave, creating a breathing or pulsing effect.

How to enable

  1. In the Inspector, check “Pulse Width” under the ANIMATION section
  2. Adjust “Pulse Speed” to control how fast the pulse occurs

Technical details

  • Uses Time.time to create a smooth oscillation
  • The width varies from the base width to 1.5x the base width
  • Formula: baseWidth + (sin(time * speed) + 1) * 0.5 * (baseWidth * 0.5)

Use cases

  • Indicating a selected object
  • Highlighting interactive items
  • Power-up or collectible effects
  • Quest objectives

Gradient Scroll Animation

What it does

Scrolls the gradient colors vertically, creating a moving energy or rainbow effect.

How to enable

  1. Enable “Use Gradient” in the COLOR STYLE section
  2. Set “Color Top” and “Color Bottom” to different colors
  3. Check “Scroll Gradient” under the ANIMATION section
  4. Adjust “Scroll Speed” to control the scrolling speed

Technical details

  • Animates the shader’s _GradientSpeed property
  • The shader uses Time in shader code to offset UV coordinates
  • The effect is direction-sensitive (top to bottom)

Use cases

  • Energy shields or force fields
  • Magical effects
  • High-tech UI elements
  • Portal effects

Combining Effects

You can enable both pulse width and gradient scroll simultaneously for maximum visual impact.

Example configuration

  • Use Gradient: true
  • Color Top: Cyan (0, 1, 1, 1)
  • Color Bottom: Blue (0, 0, 1, 1)
  • Pulse Width: true
  • Pulse Speed: 3
  • Scroll Gradient: true
  • Scroll Speed: 1

This creates a pulsing, scrolling cyan-to-blue outline perfect for sci-fi or futuristic games.

Performance Notes

Both animation effects are GPU-friendly:

  • The pulse width calculation happens once per frame on the CPU
  • The gradient scrolling is calculated entirely in the shader
  • Neither effect causes additional draw calls
  • Safe to use on multiple objects simultaneously

Scripting Control

You can control animations at runtime:

// Enable pulsing
outlineComponent.SetPulse(true);

// Enable gradient scrolling
outlineComponent.SetGradientScroll(true);

// Disable both
outlineComponent.SetPulse(false);
outlineComponent.SetGradientScroll(false);

Tips & Tricks

  1. For subtle effects, use low pulse speeds (0.5 - 1.5) and narrow widths
  2. For dramatic effects, combine fast pulsing with bright, contrasting colors
  3. Gradient scrolling looks best with complementary colors (blue/purple, yellow/orange, etc.)
  4. Use solid colors without gradient for clean, professional outlines in UI or strategy games