Transition Effects

When changing background and character appearances with @back and @char or performing scene transition with @trans command, 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
@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 transColor = Tex2DClip01(transitionTex, transitionUV, CLIP_COLOR);

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

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

    // When no transition keywords enabled default to crossfade.
    return lerp(mainColor, transColor, 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.

Animation Easing

Many commands, that apply changes over time, have optional easing parameter which controls how modified parameter changes over time. Below is the list of supported options:

Linear
SmoothStep
Spring
EaseInQuad
EaseOutQuad
EaseInOutQuad
EaseInCubic
EaseOutCubic
EaseInOutCubic
EaseInQuart
EaseOutQuart
EaseInOutQuart
EaseInQuint
EaseOutQuint
EaseInOutQuint
EaseInSine
EaseOutSine
EaseInOutSine
EaseInExpo
EaseOutExpo
EaseInOutExpo
EaseInCirc
EaseOutCirc
EaseInOutCirc
EaseInBounce
EaseOutBounce
EaseInOutBounce
EaseInBack
EaseOutBack
EaseInOutBack
EaseInElastic
EaseOutElastic
EaseInOutElastic