Naninovel

# Transition Effects

When changing background and character appearances with @back and @char or performing scene transition with @startTrans and @finishTrans commands, you can additionally specify which transition effect to use. For example, following command will transition to "River" background using "DropFade" transition effect:

@back River.DropFade

When no transition effect is specified a cross-fade is used by default.

You can also specify duration of the transition (in seconds) with the time parameter:

@back River.DropFade time:1.5

The above statement will transition to "River" background using "DropFade" transition over 1.5 seconds. Default time for all transitions is 0.35 seconds.

In case you wish to skip to the next command immediately after executing the transition (and not wait for the duration of the effect), you can set wait parameter to false. E.g.:

@back River.Ripple time:1.5 wait:false
@bgm PianoTheme

— "PianoTheme" background music will start playing right away and won't be delayed for 1.5 seconds, while the transition is in progress.

Some of the transition effects also support additional parameters, which you can control with params parameter:

@back River.Ripple params:10,5,0.02

— will set frequency of the ripple effect to 10, speed to 5 and amplitude to 0.02. When no params is specified, default parameters will be used.

If you wish to modify selected parameters, you can skip others and they'll have their default values:

@back River.Ripple params:,,0.02

All the transition parameters are of decimal type.

The above examples work for characters as well, just provide the transition via a standalone transition parameter:

@char CharID.Appearance transition:TransitionType params:...

You can find available transition effects with their parameters and default values in the docs below.

# BandedSwirl

Parameters

Name Default
Twist amount 5
Frequency 10

Examples

; Apply the transition with default parameters
@back Appearance.BandedSwirl

; Apply the transition with defeault twist amount, but low frequency 
@back Appearance.BandedSwirl params:,2.5

# Blinds

Parameters

Name Default
Count 6

Examples

; Apply the transition with default parameters
@back Appearance.Blinds

; Apply the transition using 30 blinds instead of default 6
@back Appearance.Blinds params:30

# CircleReveal

Parameters

Name Default
Fuzzy amount 0.25

Examples

; Apply the transition with default parameters
@back Appearance.CircleReveal

; Apply the transition with a high fuzzy amount
@back Appearance.CircleReveal params:3.33

# CircleStretch

Examples

; Apply the transition with default parameters
@back Appearance.CircleStretch

# CloudReveal

Examples

; Apply the transition with default parameters
@back Appearance.CloudReveal

# Crossfade

Examples

; Apply the transition with default parameters
@back Appearance.Crossfade

# Crumble

Examples

; Apply the transition with default parameters
@back Appearance.Crumble

# Dissolve

Parameters

Name Default
Step 99999

Examples

; Apply the transition with default parameters
@back Appearance.Dissolve

; Apply the transition with a low step
@back Appearance.Dissolve params:100

# DropFade

Examples

; Apply the transition with default parameters
@back Appearance.DropFade

# LineReveal

Parameters

Name Default
Fuzzy amount 0.25
Line Normal X 0.5
Line Normal Y 0.5
Reverse 0

Examples

; Apply the transition with default parameters
@back Appearance.LineReveal

; Apply the transition with a vertical line slide
@back Appearance.LineReveal params:,0,1

; Apply the transition in reverse (right to left)
@back Appearance.LineReveal params:,,,1

# Pixelate

Examples

; Apply the transition with default parameters
@back Appearance.Pixelate

# RadialBlur

Examples

; Apply the transition with default parameters
@back Appearance.RadialBlur

# RadialWiggle

Examples

; Apply the transition with default parameters
@back Appearance.RadialWiggle

# RandomCircleReveal

Examples

; Apply the transition with default parameters
@back Appearance.RandomCircleReveal

# Ripple

Parameters

Name Default
Frequency 20
Speed 10
Amplitude 0.5

Examples

; Apply the transition with default parameters
@back Appearance.Ripple

; Apply the transition with a high frequency and amplitude
@back Appearance.Ripple params:45,,1.1

# RotateCrumble

Examples

; Apply the transition with default parameters
@back Appearance.RotateCrumble

# Saturate

Examples

; Apply the transition with default parameters
@back Appearance.Saturate

# Shrink

Parameters

Name Default
Speed 200

Examples

; Apply the transition with default parameters
@back Appearance.Shrink

; Apply the transition with a low speed
@back Appearance.Shrink params:50

# SlideIn

Parameters

Name Default
Slide amount 1

Examples

; Apply the transition with default parameters
@back Appearance.SlideIn

# SwirlGrid

Parameters

Name Default
Twist amount 15
Cell count 10

Examples

; Apply the transition with default parameters
@back Appearance.SwirlGrid

; Apply the transition with high twist and low cell count
@back Appearance.SwirlGrid params:30,4

# Swirl

Parameters

Name Default
Twist amount 15

Examples

; Apply the transition with default parameters
@back Appearance.Swirl

; Apply the transition with high twist
@back Appearance.Swirl params:25

# Water

Examples

; Apply the transition with default parameters
@back Appearance.Water

# Waterfall

Examples

; Apply the transition with default parameters
@back Appearance.Waterfall

# Wave

Parameters

Name Default
Magnitude 0.1
Phase 14
Frequency 20

Examples

; Apply the transition with default parameters
@back Appearance.Wave

; Apply the transition with a high magnitude and low frequency
@back Appearance.Wave params:0.75,,5

# Custom Transition Effects

# Dissolve Mask

You can make custom transitions based on a dissolve mask texture. Dissolve mask is a greyscale texture, where the color defines when the pixel will transition to the target texture. For example, consider following spiral dissolve mask:

— the black square in the top-right corner indicates that the transition target should be displayed there at the start of the transition and the pure-white square in the center will transition in the very end.

TIP

For optimal memory usage, set "Single Channel" and "Red" in the dissolve texture import settings. Also, make sure Non-Power of 2 and Generate Mip Maps options are disabled to prevent visual artifacts.

To make a custom transition, use Custom transition mode and specify path (relative to project "Resources" folder) to the dissolve mask texture via the dissolve parameter, eg:

@back Appearance.Custom dissolve:Textures/Spiral

To smooth (fuzz) borders of the transition, use first parameter in 0 (no smoothing) to 100 (max smoothing) range, eg:

@back Appearance.Custom dissolve:Textures/Spiral params:90

To invert the transition (brighter areas of the dissolve mask will be displayed first), set second parameter to 1, eg:

@back Appearance.Custom dissolve:Textures/Spiral params:,1

Check out the following video for the usage examples.

# Custom Shader

It's possible to add a completely custom transition effect via a custom actor shader.

WARNING

The topic requires graphic programming skills in Unity. We're not providing any support or tutorials on writing custom shaders; consult the support page for more information.

Create a new shader and assign it to Custom Texture Shader property of the actors, which are supposed to use the custom transition effects; see custom actor shader guide for more information on how to create and assign custom actor shaders.

When a transition name is specified in a script command, shader keyword with the same name (prefixed with NANINOVEL_TRANSITION_) is enabled in the material used by the actor.

To add your own transitions to a custom actor shader, use multi_compile directive, eg:

#pragma multi_compile_local _ NANINOVEL_TRANSITION_CUSTOM1 NANINOVEL_TRANSITION_CUSTOM2

— will add Custom1 and Custom2 transitions.

You can then use conditional directives to select a specific render method based on the enabled transition keyword. When re-using built-in actor shader, it's possible to implement custom transitions via ApplyTransitionEffect method, which is used in the fragment handler:

fixed4 ApplyTransitionEffect(sampler2D mainTex, float2 mainUV, sampler2D transitionTex, float2 transitionUV, 
    float progress, float4 params, float2 randomSeed, sampler2D cloudsTex, sampler2D customTex)
{
    const fixed4 CLIP_COLOR = fixed4(0, 0, 0, 0);
    fixed4 mainColor = Tex2DClip01(mainTex, mainUV, CLIP_COLOR);
    fixed4 transitionColor = Tex2DClip01(transitionTex, transitionUV, CLIP_COLOR);

    #ifdef NANINOVEL_TRANSITION_CUSTOM1 // Custom1 transition.
    return transitionUV.x > progress ? mainColor : lerp(mainColor / progress * .1, transitionColor, progress);
    #endif

    #ifdef NANINOVEL_TRANSITION_CUSTOM2 // Custom2 transition.
    return lerp(mainColor * (1.0 - progress), transitionColor * progress, progress);
    #endif

    // When no transition keywords enabled default to crossfade.
    return lerp(mainColor, transitionColor, progress);
}

You'll then be able to invoke the added transitions in the same way as the built-in ones, eg:

@back Snow.Custom1
@back River.Custom2

For the complete shader example see custom actor shader guide.

Last Updated: September 7, 2022

← Special Effects →