# トランジションエフェクト

@back@char で背景やキャラクターの外観を変更する時、または @startTrans@finishTrans コマンドでシーンをトランジションする時、トランジションエフェクトを追加で指定できます。たとえば次のコマンドは、"DropFade" トランジション効果を使用して "River" の背景にトランジションします:

@back River.DropFade

トランジション効果が指定されていない場合、デフォルトでクロスフェードが使用されます。

また time パラメータで、トランジションの継続時間(秒単位)を指定することもできます。

@back River.DropFade time:1.5

上記は "DropFade" トランジション効果を使用して、 "River" の背景に1.5秒かけてトランジションします。全てのトランジションのデフォルトの time は0.35秒です。

トランジションを実行した直後に次のコマンドにスキップしたい場合(エフェクトの継続時間を待たない場合)は、 wait パラメーターを false に設定できます。 例えば:

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

— "PianoTheme" のバックグラウンドミュージックはすぐに再生を開始し、トランジションが進行する1.5秒間待つことはありません。

一部のトランジションエフェクトは、 params パラメーターで制御できる追加のパラメーターもサポートします:

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

— これはリップルエフェクトの周波数を10、速度を5、振幅を0.02に設定します。params が指定されていない場合、デフォルトのパラメータが使用されます。

選択したパラメーターを変更する場合は、他のパラメーターをスキップできます。これらのパラメーターにはデフォルト値があります:

@back River.Ripple params:,,0.02

すべてのトランジションパラメーターは10進数です。

上記の例はキャラクターでも機能します。スタンドアロンの transition パラメータを介してトランジションを指定するだけです:

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

以降のドキュメントでは、使用可能なトランジションエフェクトとそのパラメーターおよびデフォルト値を参照することができます。

# BandedSwirl

Parameters

名前 デフォルト
Twist amount 5
Frequency 10

使用例

; デフォルトのパラメーターでトランジションを適用。
@back Appearance.BandedSwirl

; デフォルトのツイスト量、ただし周波数を低めにトランジションを適用。
@back Appearance.BandedSwirl params:,2.5

# Blinds

Parameters

名前 デフォルト
Count 6

使用例

; デフォルトのパラメーターでトランジションを適用。
@back Appearance.Blinds

; デフォルトの6ではなく、30のブラインドを使用してトランジションを適用。
@back Appearance.Blinds params:30

# CircleReveal

Parameters

名前 | デフォルト

--- | --- Fuzzy amount | 0.25

使用例

; デフォルトのパラメーターでトランジションを適用。
@back Appearance.CircleReveal

; ファジー量の多いトランジションを適用。
@back Appearance.CircleReveal params:3.33

# CircleStretch

使用例

; デフォルトのパラメーターでトランジションを適用。
@back Appearance.CircleStretch

# CloudReveal

使用例

; デフォルトのパラメーターでトランジションを適用。
@back Appearance.CloudReveal

# Crossfade

使用例

; デフォルトのパラメーターでトランジションを適用。
@back Appearance.Crossfade

# Crumble

使用例

; デフォルトのパラメーターでトランジションを適用。
@back Appearance.Crumble

# Dissolve

Parameters

名前 デフォルト
Step 99999

使用例

; デフォルトのパラメーターでトランジションを適用。
@back Appearance.Dissolve

; 低いステップでトランジションを適用。
@back Appearance.Dissolve params:100

# DropFade

使用例

; デフォルトのパラメーターでトランジションを適用。
@back Appearance.DropFade

# LineReveal

Parameters

名前 デフォルト
Fuzzy amount 0.25
Line Normal X 0.5
Line Normal Y 0.5

使用例

; デフォルトのパラメーターでトランジションを適用。
@back Appearance.LineReveal

; ラインを垂直線にスライドするトランジションを適用。
@back Appearance.LineReveal params:,0,1

# Pixelate

使用例

; デフォルトのパラメーターでトランジションを適用。
@back Appearance.Pixelate

# RadialBlur

使用例

; デフォルトのパラメーターでトランジションを適用。
@back Appearance.RadialBlur

# RadialWiggle

使用例

; デフォルトのパラメーターでトランジションを適用。
@back Appearance.RadialWiggle

# RandomCircleReveal

使用例

; デフォルトのパラメーターでトランジションを適用。
@back Appearance.RandomCircleReveal

# Ripple

Parameters

名前 デフォルト
Frequency 20
Speed 10
Amplitude 0.5

使用例

; デフォルトのパラメーターでトランジションを適用。
@back Appearance.Ripple

; 高い周波数と振幅でトランジションを適用。
@back Appearance.Ripple params:45,,1.1

# RotateCrumble

使用例

; デフォルトのパラメーターでトランジションを適用。
@back Appearance.RotateCrumble

# Saturate

使用例

; デフォルトのパラメーターでトランジションを適用。
@back Appearance.Saturate

# Shrink

Parameters

名前 デフォルト
Speed 200

使用例

; デフォルトのパラメーターでトランジションを適用。
@back Appearance.Shrink

; スビードを低めにトランジションを適用。
@back Appearance.Shrink params:50

# SlideIn

Parameters

名前 デフォルト
Slide amount 1

使用例

; デフォルトのパラメーターでトランジションを適用。
@back Appearance.SlideIn

# SwirlGrid

Parameters

名前 デフォルト
Twist amount 15
Cell count 10

使用例

; デフォルトのパラメーターでトランジションを適用。
@back Appearance.SwirlGrid

; 捻りが強く、セル数が少ないトランジションを適用。
@back Appearance.SwirlGrid params:30,4

# Swirl

Parameters

名前 デフォルト
Twist amount 15

使用例

; デフォルトのパラメーターでトランジションを適用。
@back Appearance.Swirl

; 捻りを強めにトランジションを適用。
@back Appearance.Swirl params:25

# Water

使用例

; デフォルトのパラメーターでトランジションを適用。
@back Appearance.Water

# Waterfall

使用例

; デフォルトのパラメーターでトランジションを適用。
@back Appearance.Waterfall

# Wave

Parameters

名前 デフォルト
Magnitude 0.1
Phase 14
Frequency 20

使用例

; デフォルトのパラメーターでトランジションを適用。
@back Appearance.Wave

; 振幅が高く、周波が低いトランジションを適用。
@back Appearance.Wave params:0.75,,5

# カスタムトランジションエフェクト

# ディゾルブマスク

ディゾルブマスクテクスチャをベースにカスタムトランジションを作成できます。ディゾルブマスクはグレースケールテクスチャであり、ピクセルが目標テクスチャに遷移するタイミングを色で定義します。たとえば、次のスパイラルディゾルブマスクを考えてみます:

— 右上隅の黒い四角は、トランジションの対象がトランジション開始時にそこに表示されます。中央の真っ白な四角が最後にトランジションします。

カスタムトランジションを作成するには、 Custom トランジションモードを使用し、dissolve パラメーターでディゾルブマスクテクスチャへのパス(プロジェクトの "Resources" フォルダーからの相対パス)を指定します。例:

@back Appearance.Custom dissolve:Textures/Spiral

使用例は以下の動画をご覧ください。

# カスタムシェーダー

カスタムアクター シェーダー を介して、完全にカスタムされたトランジションエフェクトを追加することができます。

警告

このトピックには、Unityのグラフィックプログラミングスキルが必要です。カスタムシェーダーの作成に関するサポートやチュートリアルは提供していません。詳細は サポートページ をご覧ください。

新しいシェーダーを作成して、新しいカスタムトランジションエフェクトを適用したいアクターに割り当てます。カスタムアクターシェーダーを作成して割り当てる方法の詳細については、カスタムアクターシェーダー ガイドを参照してください。

スクリプトコマンドでトランジション名を指定すると、同じ名前の シェーダーキーワード(プリフィックスは NANINOVEL_TRANSITION_) が、アクターの素材で有効になります。

独自のトランジションをカスタムアクターシェーダーに追加するには、 multi_compile ディレクティブを使用します。例:

#pragma multi_compile _ NANINOVEL_TRANSITION_MYCUSTOM1 NANINOVEL_TRANSITION_MYCUSTOM2

— これは MyCustom1MyCustom2 トランジションを追加します。

次に、条件ディレクティブを使用して、有効にしたトランジションキーワードに基づいて特定のレンダリング方法を選択できます。組み込みのアクタシェーダーを再利用する場合、フラグメントハンドラーで使用される ApplyTransitionEffect メソッドを介してカスタムトランジションを実装することが可能です:

fixed4 ApplyTransitionEffect(in sampler2D mainTex, in float2 mainUV, in sampler2D transitionTex, in float2 transitionUV, in float progress, in float4 params, in float2 randomSeed, in sampler2D cloudsTex, in 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_MYCUSTOM1 // MyCustom1 トランジション。
    return transitionUV.x > progress ? mainColor : lerp(mainColor / progress * .1, transitionColor, progress);
    #endif

    #ifdef NANINOVEL_TRANSITION_MYCUSTOM2 // MyCustom2 トランジション。
    return lerp(mainColor * (1.0 - progress), transitionColor * progress, progress);
    #endif

    // 有効なトランジションキーワードがない場合、デフォルトでクロスフェードになります。
    return lerp(mainColor, transitionColor, progress);
}

その後、組み込みのトランジションと同じ方法で、追加したトランジションを呼び出すことができます。例:

@back Snow.MyCustom1
@back River.MyCustom2
最終更新 日: August 5, 2020