フェードインやフェードアウト、ブラインドなど、時間をかけて画面を切り替える効果をトランジション(移り変わり)と呼びます。
　吉里吉里/KAGでは、クロスフェードトランジション、ユニバーサルトランジション、スクロールトランジションの、３つの種類のトランジションを使用することができます。
　また、拡張トランジションプラグイン ( extrans.dll ) を用いると、いくつかのトランジションをさらに使うことができるようになります ( 吉里吉里 SDK ヘルプの「トランジションについて」を参照してください )。

　クロスフェードトランジションは、単純な画面切り替え効果です。
　トランジション(移り変わり)ですから、トランジション前の画像と、トランジション後の画像が必要になります。KAG の場合、トランジション前の画像は表ページのレイヤで、トランジション後の画像は裏ページのレイヤになります。つまり、裏ページのレイヤの画像が表ページにくるわけです。
　トランジションの開始とともに、時間をかけて表ページの画像が裏ページの画像に置き換わり、最終的に裏ページの画像が表ページの画像になります。

　ユニバーサルトランジションというのは、ユニバーサル(汎用的な) トランジション(移り変わり)のことで、いわゆる「画面切り替え効果」を自由に作成することができるモノです。

　また、ユニバーサルトランジションには、ルール画像と呼ばれる、グレースケールの画像が必要になります。ルール画像のサイズがトランジションを行いたいレイヤよりも小さい場合は、自動的にタイル状に敷き詰められて使用されます。この画像を「ルール」として、トランジションを進行させます。
　そして、ユニバーサルトランジションに必要な属性、time (トランジションを行っている時間)と、vague (あいまい領域値) が必要になります。

　例を示します。

　以下の画像を見てください。



　このように、A と書いてある画像が、B と書いてある画像に移り変わるとします。また、ルール画像には、単純ですが 上から下へ、黒から白へのグラデーションの画像を使うとします。

　さて、まず vague (あいまい領域値) を 1 にすると、以下のようにトランジションが進行します。左から右へと進行しています。便宜上、移り変わりを横に並べて示していますが、実際はこれが連続して同じ場所で表示されるのです。



　つまり、ルール画像の黒いところから、白いところに向かって、だんだんと B の画像に置き換わっていっているのです。

　ここで vague=64 としてみましょう。


　こんどは、A の画像と B の画像の境界がぼやけていますね？ このように、vague の値を大きくすると、移り変わりの中で、A でも B でもない、あいまいな部分を大きくすることができます。vague には 1 以上の数値を指定できます。

　ルール画像には、このように単純なグラデーションだけではなく、いろいろな模様を指定することによって、それに従って自由にトランジションを行わせることができます。

　吉里吉里ダウンロードページhttp://kikyou.info/tvp/ には、「トランジションライブラリ」として、ユニバーサルトランジションのルール画像が 20 種類以上入ったものが公開されています。

　スクロールトランジションは、ユニバーサルトランジションとは違い、切り替え元 ( 裏画面 ) の画像が切り替え先 ( 表画面 ) の画像の領域内にスクロールして入ってくる感じの物です。
　切り替え元 ( 裏画面 ) の画像が入ってくる方向は、左、上、右、下の4方向から選べます。
　また、スクロールの仕方で3つの種類があります。

　まず、stay 属性に "stayfore" を指定した場合のスクロールトランジションは、以下のようになります(下から入ってくる場合)。


　このように、stay 属性に "stayfore" を指定すると、表ページの画像がその場にとどまったまま、裏ページが外から移動して入ってくる感じになります。

　また、stay 属性に "stayback" を指定した場合のスクロールトランジションは以下のようになります。


　この場合は、表ページのレイヤが移動して出ていく後ろから、裏ページのレイヤが見えてくる感じになります。

　stay 属性に "nostay" を指定すると以下のようになります。


　このように、入ってきた切り替え元の画像に押されるようにしてスクロール元の画像が出ていきます。A の画像と B の画像を横または縦に連続した物にすれば、大きな画面をスクロールさせているような効果を出すことができます。でも前景レイヤの切り替え効果にはあんまり向いていません(^^;;

　トランジションを行ううえで非常に重要なのが表ページと裏ページという概念です。
　背景を表示しよう でも紹介しましたが、KAG は、普段目に見える表ページと、目には見えない裏ページがあって、両方は見えるか見えないかだけが違うほかは、まったく同じ構成をしています。
　KAG のトランジションは常に、いま表示されている表ページの内容にかわって、裏ページの内容がだんだんと表示されてくるという方向で行われます。トランジションが終わると、表ページの内容は完全に裏ページの内容と同じになります。
　というわけで、トランジション前には裏ページを操作しなければなりません。

　例を示します。背景レイヤのみを入れ替える場合を考えます。
　まず、トランジション前、レイヤの状態が次のようであったとします ( 左が表、右が裏 )



　この時点で表ページは背景レイヤに全景レイヤ、メッセージレイヤが表示されています。裏ページはどのような状態でもかまわないものとします。
　ここで [backlay] タグで裏ページを表ページと同じにします。


　トランジションは裏ページの内容を表ページに移すものですので、トランジションを行う前に、裏ページをいじらないといけません。
　ここでは背景レイヤのみを入れ替えたいので、裏ページの背景レイヤに画像を読み込みます。


　ここでやっと trans タグでトランジションを行えます。くどいようですが、トランジションは裏ページの画像を表ページに持ってきます。
　トランジション中は以下のようになります ( トランジションの例 )。


　トランジションは [wt] タグで待ちます。
　トランジションが終われば、以下のように、裏ページと表ページが同じになります。

　トランジションを行うには trans タグを使います。
　基本的にトランジションは、裏ページに [backlay] タグにてすべての表ページのレイヤ情報を裏ページにコピーして、裏ページで変化させたい部分を image タグなどでいじり、そして trans タグでトランジションを実行します。すると、裏ページに適用した変化が、現在の表ページと入れ替わるように、表ページに適用されます。

　まずは、背景レイヤをクロスフェードトランジションで切り替えてみましょう。


[image storage="bg0" page=fore layer=base]
[wait time=200]
*start|スタート
[cm]
こんにちは。背景レイヤを切り替えます。[l][r]
[backlay]
[image storage="bg1" layer=base page=back]
[trans method=crossfade time=1500]
[wt]
切り替わりましたか？

　まず、[backlay] タグで表ページのレイヤの情報を裏ページにコピーしています。
　そして、裏ページの背景レイヤに、次に表示すべき画像を読み込んでいます。
　この時点で、裏ページが表ページと違うのは背景画像だけです。
　次に trans タグでトランジションを実行しています。このように、trans の属性で method=crossfade と指定するとユニバーサルトランジションとなります。この例では時間は 1.5 秒と指定しています。時間はミリ秒単位で指定するので time=1500 と指定します。



　その後、wt タグでトランジションの終了を待っています。KAG は wt タグを書かないとトランジションを待たずに次にいってしまいますので、wt タグを忘れないようにしてください。




　また、ユニバーサルトランジションを使ってみると以下のようになります。

[image storage="bg0" page=fore layer=base]
[wait time=200]
*start|スタート
[cm]
こんにちは。背景レイヤを切り替えます。[l][r]
[backlay]
[image storage="bg1" layer=base page=back]
[trans method=universal rule="rule1" vague=1 time=1500]
[wt]
切り替わりましたか？


　この例でも trans タグでトランジションを実行しています。このように、trans の属性で method=universal と指定するとユニバーサルトランジションとなります ( method タグを省略しても universal であると見なされます )。この例では、ルール画像として "rule1" 、時間は 1.5 秒、あいまい領域値は 1 という設定です。

　また、これをスクロールトランジション、右から、居座りなしでトランジションを行うとすると・・・


[image storage="bg0" page=fore layer=base]
[wait time=200]
*start|スタート
[cm]
こんにちは。背景レイヤを切り替えます。[l][r]
[backlay]
[image storage="bg1" layer=base page=back]
[trans method=scroll from=right stay=nostay children=false time=1500]
[wt]
切り替わりましたか？

　となります。ここでは children=false と指定しているのは、このように指定しないと「子レイヤ」も一緒に移動してしまうからです。KAG では、背景レイヤが親、前景レイヤとメッセージレイヤは背景レイヤの子にあたります。
　子レイヤも一緒にスクロールしていいのであれば children=true にしてもかまいません。

　前景レイヤを切り替えるにも trans タグを使います。


[image storage="bg0" page=fore layer=base]
[wait time=200]
*start|スタート
[cm]
こんにちは。前景レイヤをトランジションを使って表示させます。[l][r]
[backlay]
[image layer=0 page=back storage="fg0" visible=true]
; この時点で、表ページの前景レイヤ 0 は(デフォルトのままなので)不可視、
; この時点で、裏ページの前景レイヤ 0 は可視で画像を保持していて、
; 他の裏ページのレイヤは backlay タグの効果で、すべて表ページと同じ
[trans method=crossfade time=1500][wt]
つぎは、前景レイヤを入れ替えます。[l][r]
[backlay]
[image layer=0 page=back storage="fg1" visible=true]
; この時点で、裏ページの前景レイヤ 0 は fg1 という画像、
; 他の裏ページのレイヤは backlay タグの効果で、すべて表ページと同じ
[trans method=crossfade time=1500][wt]
そうしたら、前景レイヤを消します。[l][r]
[backlay]
[layopt layer=0 page=back visible=false]
; この時点で、裏ページの前景レイヤ 0 は不可視、
; 他の裏ページのレイヤは backlay タグの効果で、すべて表ページと同じ
[trans method=crossfade time=1500][wt]

　上の例は、前景レイヤを表示させ、それを別の画像に入れ替え、そして消しています。
　まず、表示させる所ですが、まず、backlay タグを使って、表ページの情報をすべて裏ページにコピーしています。そのあと、変更したい部分、ここでは前景レイヤに前景を表示させたいわけですから、裏ページの前景レイヤに画像を読み込んでいます。
　そのあと、trans タグを使用しています。

　つぎに前景レイヤを入れ替えていますが、これも、backlay で裏ページにコピーした後、変更したい部分を操作し、trans タグでトランジションを行わせています。

　最後に前景レイヤを消していますが、backlay で裏ページにコピーした後、該当する前景レイヤを非表示にしています。非表示になっているということは、つまり表示されてないということで(あたりまえか) 、トランジションを行わせると消えます。

　なお、このなかで、裏ページにあるレイヤに対して visible=true としているので、表示されてしまうのか、と心配かもしれませんが、裏ページ ( 背景レイヤとその子レイヤ ) はもともと非表示にしかならないので、visible=true と指定しても表示される心配はありません。

　メッセージレイヤも同様の方法で切り替えることが出来ます。
　メッセージレイヤの場合、表示・非表示は layopt タグで操作できるので同様の動作を行うことができます。

　たとえば、メッセージレイヤを非表示のまま描画し、描画し終わってからトランジションで画面に表示するには以下のようにします。また、そのあと、メッセージレイヤをトランジションを使って非表示にしています。


[layopt layer=message page=fore visible=false]
; ↑最初は表ページメッセージレイヤを非表示に
[layopt layer=message page=back visible=true]
; ↑裏ページのメッセージレイヤを表示状態に
[wait time=200]
*start|スタート
[cm]
[current page=back]
; ↑操作対象のメッセージレイヤを裏ページに
[delay speed=nowait]
; ↑文字描画速度をノーウェイトに
このようにトランジションを使いながらメッセージレイヤを表示させることができます。[r]
[delay speed=user]
; ↑文字描画速度を元に戻す
[trans method=universal rule="trans1" vague=1 time=1500][wt]
; ↑ユニバーサルトランジション
[current page=fore]
; ↑念のために操作対象のメッセージレイヤを表ページの物に
[l]
; ↑クリック待ち
[layopt layer=message page=back visible=false]
; ↑裏ページのメッセージレイヤを非表示に
[trans method=universal rule="trans1" vague=1 time=1500][wt]
; ↑トランジション