Construction Kit for Screen Transitions

1. Introduction

Transition Toolkit makes building exciting screen transitions in Unity simple. Instead of choosing from a fixed list of fades and wipes, you pick a base pattern, and then layer on secondary features like sparks, organic filaments, and domain warp to create something unique.

From creeping lava fronts to flowing aurora curtains — everything is configured in the Inspector, no shader coding required.

• 11 base patterns — FBM Noise, FBM Noise Sharp, Voronoi Cells, Grid Cells (square or hex), Sine Wave, Ridged Noise, Ripple, Spiral, Curtain, Warp Grid, and Fabric
• 5 stackable secondary features — Sparks, Blobs, Filaments (with directional bias), Warp, and Flow
• Full sweep control — direction, linearity (pure sweep to pure pattern), edge width, decay rate, easing curve, and HDR color
• 21 ready-to-use presets — Aurora, Bloodmoon, Frostbite, Grid, Havoc, Honeycomb, Interference, Lightning, Magma, Meltdown, Overgrowth, Plasma, Radar, Rust, Sandstorm, Shatter, Swimming, Tempest, Transistor, Venom, and Wildfire
• Play Mode editing — tweak values at runtime and automatically save changes back to your prefabs
• URP + Built-in support — the transition shader works in both render pipelines automatically
• Event-driven architecture — trigger transitions by name from anywhere in your code

2. Quick Start

Installation

1. Import the Transition Toolkit package into your Unity project. The files are installed under Assets/R2RGames/TransitionToolkit/.
2. The transition shader supports both URP and Built-in render pipelines. For URP projects, the demo scene materials will need a one-time conversion (see Demo Scene below).

Your First Transition

1. Create a Canvas in your scene (GameObject > UI > Canvas). Set the Canvas Render Mode to Screen Space - Overlay.
2. Drag one of the preset prefabs (e.g., TK_Magma.prefab) from Assets/R2RGames/TransitionToolkit/Prefabs/Presets/ into the Canvas. There is also a base TransitionToolkit.prefab in the top level of the Prefabs directory — a clean starting point you can customize.
3. From any script, trigger the transition:

   using r2rgames.Transitions;
   
   TransitionEvents.TriggerTransitionOut("Magma", 1.5f);

4. You should see the Magma effect sweep across the screen over 1.5 seconds. To reveal the screen again:

   TransitionEvents.TriggerTransitionIn("Magma", 1.0f);

Demo Scene

Open the demo scene at Assets/R2RGames/TransitionToolkit/Demo/Transitions.unity and press Play. Use the left/right arrow keys to switch between Transition presets.

For the URP pipeline, you will need to open the Demo scene and convert the included materials by navigating to Window > Rendering > Render Pipeline Converter, check the Material Upgrade box, then click the Initialize & Convert button.

3. Inspector Reference

The TransitionToolkit component is the heart of the toolkit. Every transition is configured here — no code needed. Select any preset prefab to see its settings in the Inspector.

Core Settings

These settings control the overall look and motion of the transition.

Base Patterns

The Base Pattern determines the fundamental shape of your transition — the underlying texture that drives how pixels activate during the sweep. There are 11 patterns to choose from.

Secondary Features

Secondary features are stackable — you can enable any combination to build complex, layered effects. Each feature adds a visual dimension on top of the base pattern. Toggle them on in the Inspector and their settings appear below.

Sparks

Flickering bright spots that appear in the filled area, like hot embers glowing in ash or digital noise artifacts.

Blobs

Glowing blobs that appear ahead of the sweep front, as if the effect is reaching forward. Creates anticipation and a sense of energy building before the main wave arrives.

Filaments

Ridged noise filaments that thread through the filled area. At low Bias, they create an isotropic marble-vein pattern. At high Bias, they stretch into vertical tendril-like strands — great for overgrowth or root systems.

Warp

Distorts the base pattern's coordinates for a more organic, warped appearance — as if the pattern is being bent through heat haze or flowing water.

Flow

Scrolls the base pattern over time, creating flowing or bubbling motion. The pattern moves continuously while the transition plays, adding life and energy to the effect.

Autosave Changes

At the bottom of the Inspector, you'll find the Autosave Changes toggle. When enabled, any changes you make to the transition during Play Mode are automatically preserved when you exit Play Mode.

This is especially useful for creative tweaking — you can adjust colors, scales, and features in real time, see the results immediately, and keep your changes without having to write them down and re-enter them.

4. Presets Guide

Included Presets

Transition Toolkit ships with 21 ready-to-use presets plus a base prefab. Each preset demonstrates a different combination of base pattern and secondary features — use them as-is or as starting points for your own creations.

The base prefab (TransitionToolkit.prefab) uses the Ripple pattern with no secondary features — a clean radar-pulse sweep that serves as a good starting point for customization.

5. Creating Your Own

The fastest way to create a new transition is to start from an existing preset:

1. Find a preset prefab in Assets/R2RGames/TransitionToolkit/Prefabs/Presets/.
2. Duplicate it (Ctrl+D / Cmd+D).
3. Rename it to something meaningful (e.g., TK_IceShatter.prefab).
4. Select the new prefab and change the Transition ID in the Inspector to match (e.g., "IceShatter").
5. Adjust the base pattern, secondary features, colors, and scales to your liking.

To use your new preset in a scene, drag it into a Canvas as a child. Make sure the Canvas is set to Screen Space - Overlay. The prefab's RawImage component should stretch to fill the screen (the default anchors handle this).

Every preset prefab must have:

• RectTransform with stretch anchors — (0,0) to (1,1)
• CanvasRenderer
• RawImage with ToolkitTransition.mat assigned
• TransitionToolkit component with a unique, non-empty Transition ID

6. Scripting API

Transition Toolkit uses a lightweight, event-driven system. You trigger transitions by name — the matching preset responds automatically.

Triggering Transitions

Add using r2rgames.Transitions; at the top of your script, then call:

// Cover the screen (transition out)
TransitionEvents.TriggerTransitionOut("Magma", 1.5f);

// Reveal the screen (transition in)
TransitionEvents.TriggerTransitionIn("Magma", 1.0f);

The first parameter is the Transition ID string — it must match the value set on the TransitionToolkit component exactly (case-sensitive). The second parameter is the duration in seconds.

When a transition event fires, every active TransitionToolkit instance in the scene checks whether its Transition ID matches. The matching preset plays the effect; all others immediately clear to a transparent state. This means you can have multiple presets in the same scene — only the targeted one will play.

Listening for Events

You can subscribe to transition events to respond when transitions are triggered elsewhere in your code. Always store the delegate so you can unsubscribe later and avoid memory leaks:

private System.Action<string, float> _onOut;

void OnEnable()
{
    _onOut = (effectName, duration) =>
        Debug.Log($"Transition out: {effectName} over {duration}s");
    TransitionEvents.OnTransitionOut += _onOut;
}

void OnDisable()
{
    TransitionEvents.OnTransitionOut -= _onOut;
}

Direct Control

If you have a direct reference to a TransitionToolkit component, you can control it without the event system:

TransitionToolkit transition = GetComponent<TransitionToolkit>();
transition.TransitionOut(1.5f);  // Cover the screen
transition.TransitionIn(1.0f);   // Reveal the screen
transition.ClearEffect();        // Immediately clear to transparent

Scene Loading Pattern

A common use case is covering the screen during a scene load:

IEnumerator LoadScene()
{
    TransitionEvents.TriggerTransitionOut("Magma", 1.0f);
    yield return new WaitForSeconds(1.0f);
    yield return SceneManager.LoadSceneAsync("NextScene");
    TransitionEvents.TriggerTransitionIn("Magma", 1.0f);
}

7. Tips & Recipes

Fire / Lava Front

Start with FBM Noise. Enable Sparks + Blobs + Filaments + Warp. Set the Effect Color to a bright orange (HDR intensity around 2–3). Enable Flow for flowing lava. See the TK_Magma preset.

Organic Growth

Start with FBM Noise. Enable Filaments and set Bias to 1 for vertical tendrils. Enable Warp. Use a green or earthy Effect Color. Set Linearity around 0.4–0.6 so the growth spreads organically. See TK_Overgrowth.

Sci-Fi Grid Reveal

Start with Grid Cells and choose Hex grid type. Keep secondary features off for a clean look. Set a cyan or electric blue Effect Color with high HDR intensity. Low Edge Width (around 0.03–0.05) keeps it crisp. See TK_Honeycomb.

Flowing Energy

Start with Sine Wave or Curtain. Enable Flow to add a second layer of motion on top of the built-in animation. Higher Linearity values let the wave pattern dominate the sweep. See TK_Plasma or TK_Aurora.

Corrosion / Decay

Start with FBM Noise Sharp. Enable Blobs for spreading corrosion spots. Use a warm orange or brown Effect Color. Higher Pattern Scale (12–20) creates finer detail. See TK_Rust.

Melting / Distortion

Start with any geometric pattern like Grid Cells or Voronoi Cells. Enable Warp with a high strength (0.5–0.8) to distort the clean edges into organic, melted shapes. See TK_Meltdown.

Chaotic Energy

Start with FBM Noise Sharp or Ridged Noise. Enable all five features at once — Sparks, Blobs, Filaments, Warp, and Flow. Push vibrant HDR colors. See TK_Havoc or TK_Venom.

General Tips

• Linearity is the single most impactful setting after the base pattern. Low values (0–0.2) give a clean directional sweep. High values (0.7–1.0) let the pattern completely define the shape.
• HDR Effect Color intensity matters — values above 1.0 create glow and bloom (if you have post-processing enabled). Keep it at 1.0 for flat color, push to 2–4 for dramatic glow.
• Combine Warp with almost any base pattern for instant organic variation. Even Grid Cells look interesting when slightly warped.
• Use the Ease Curve to control pacing. A curve that starts slow and finishes fast creates a dramatic rush at the end.
• Filament Bias is a powerful slider — at 0 it creates marble-like veins, at 1 it creates vertical tendrils. Sweep different Bias values to find the right organic texture for your effect.

8. Demo Scene

The demo scene is located at Assets/R2RGames/TransitionToolkit/Demo/Transitions.unity.

It contains a TransitionCarousel component that automatically cycles through all preset transitions. Each cycle plays a transition out (covering the screen), pauses briefly, then transitions back in (revealing the screen).

Controls:

• Right Arrow — skip to the next preset
• Left Arrow — go back to the previous preset

The current preset name is displayed on screen. The carousel uses the same TransitionEvents system described in the Scripting API section, targeting each preset by its Transition ID.

The demo is a good way to see all the presets in action and understand the timing of the in/out cycle. You can also enable Autosave Changes on any preset and tweak values during Play Mode to experiment.

9. Troubleshooting

Transition doesn't play

Cause: The preset prefab isn't set up correctly in the scene.

Solution:

1. Ensure the preset prefab is a child of a Canvas in your scene.
2. Set the Canvas Render Mode to Screen Space - Overlay.
3. Verify the RawImage component has the ToolkitTransition material assigned.
4. Check that the Transition ID you're triggering in code exactly matches the one on the component (case-sensitive).

Screen stays black after transition

Cause: A transition out was triggered but no transition in followed.

Solution: After calling TriggerTransitionOut, call TriggerTransitionIn with the same Transition ID once you're ready to reveal the screen. Alternatively, call ClearEffect() on the component for an immediate reveal.

Wrong preset plays

Cause: Multiple presets have the same Transition ID, or the ID string doesn't match what you're triggering.

Solution: Check that each preset in your scene has a unique Transition ID. The comparison is case-sensitive — "magma" and "Magma" are different.

Transition looks flat / no glow

Cause: The Effect Color intensity is at 1.0 and there's no bloom post-processing.

Solution: Increase the Effect Color HDR intensity above 1.0 (try 2–4). For the glow to be visible, you need bloom enabled in your post-processing volume (URP) or post-processing stack (Built-in).

Transition appears over UI elements

Cause: The transition Canvas renders on top of everything.

Solution: Adjust the Canvas Sort Order to control layering. A higher sort order renders on top. Place the transition Canvas above your game content but below any UI you want to remain visible (like a loading indicator).

Play Mode changes not saved

Cause: The Autosave Changes toggle is not enabled on the preset you're editing.

Solution: Select the preset in the scene (not the prefab asset) and enable Autosave Changes at the bottom of the TransitionToolkit Inspector before entering Play Mode.

10. FAQ

Does this work with URP and Built-in render pipelines?

Yes. The shader contains both a URP SubShader and a Built-in SubShader. Unity selects the correct one automatically based on your project's render pipeline — you don't need to configure anything.

Can I use multiple transitions in the same scene?

Yes. Place multiple preset prefabs under your Canvas. When you trigger a transition by Transition ID, only the matching preset plays — all others clear to transparent. You can have as many presets available as you like.

How do I use transitions for scene loading?

Trigger transition out, load the new scene asynchronously, then trigger transition in once the scene is ready. Since the transition Canvas uses Screen Space - Overlay, it persists across scene loads if you call DontDestroyOnLoad on the Canvas GameObject. See the Scene Loading Pattern in the Scripting API section for a code example.

Can I change transition settings at runtime?

Yes. The TransitionToolkit component reads its settings every frame, so you can modify any serialized property at runtime via script and see the change immediately. You can also adjust values in the Inspector during Play Mode — with Autosave Changes enabled, your tweaks are preserved.

How do I create a transition that doesn't sweep in a direction?

Set Linearity to 1.0. This makes the transition entirely pattern-driven — pixels activate based on the noise or cell pattern alone, with no directional bias.

What's the difference between Filaments at Bias 0 and Bias 1?

At Bias 0, filaments use isotropic ridged noise — they look like marble veins or lava channels, branching in all directions. At Bias 1, they stretch into vertical tendril-like strands, giving an organic overgrowth or root system look. Values in between blend the two styles.

Can I use this without a Canvas?

The TransitionToolkit component is designed to work with Unity's UI system (Canvas + RawImage). It needs a RawImage to render the transition effect. The Canvas should be set to Screen Space - Overlay for full-screen transitions.

Is the Transition Toolkit compatible with Stage Manager?

Yes. If you also own the Stage Manager package, Transition Toolkit presets work as transition effects within Stage Manager graphs. Both packages share a common event interface (ITransitionEffect and TransitionEvents), so transitions triggered by Stage Manager automatically activate the matching Transition Toolkit preset.

11. Version History

1.0 — Initial Release

• Construction kit for screen transitions with sweep+decay effects
• 11 base patterns: FBM Noise, FBM Noise Sharp, Voronoi Cells, Grid Cells, Sine Wave, Ridged Noise, Ripple, Spiral, Curtain, Warp Grid, Fabric
• 5 stackable secondary features: Sparks, Blobs, Filaments, Warp, Flow
• 21 ready-to-use presets
• Adjustable sweep direction, edge width, linearity, decay rate, and effect color
• Animation curve for custom easing
• Grid Cells pattern supports square and hexagonal layouts
• Filament bias slider blends between isotropic and directional strands
• Dual render pipeline support (URP + Built-in) in a single shader
• All patterns generated procedurally (zero texture dependencies)
• Event-driven API via static TransitionEvents class
• Direct control API: TransitionIn(), TransitionOut(), ClearEffect()
• Demo scene with keyboard-driven preset carousel
• Play Mode autosave option preserves Inspector tweaks across sessions
• Custom Inspector with conditional UI for pattern and feature settings
• Unity 2022.3 LTS and newer (including Unity 6)
• URP and Built-in render pipelines