Background Transition Effects

When changing background appearance with @back action, you can additionally specify which transition effect to use. For example, following action 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 action 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. You can find available transition effects with their parameters and default values in the docs below.

BandedSwirl

Demo

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

Demo

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

Demo

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

Demo

Examples

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

CloudReveal

Demo

Examples

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

Crossfade

Demo

Examples

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

Crumble

Demo

Examples

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

Disolve

Demo

Parameters

Name Default
Step 99999

Examples

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

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

DropFade

Demo

Examples

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

LineReveal

Demo

Parameters

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

Examples

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

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

Pixelate

Demo

Examples

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

RadialBlur

Demo

Examples

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

RadialWiggle

Demo

Examples

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

RandomCircleReveal

Demo

Examples

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

Ripple

Demo

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

Demo

Examples

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

Saturate

Demo

Examples

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

Shrink

Demo

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

Demo

Parameters

Name Default
Slide amount 1

Examples

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

SwirlGrid

Demo

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

Demo

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

Demo

Examples

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

Waterfall

Demo

Examples

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

Wave

Demo

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

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.

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

Check out the following video for the usage examples: