253 lines
24 KiB
HTML
253 lines
24 KiB
HTML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
|
|
<!-- generated by to_html.pl from Trans.xml -->
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
<title>トランジションを使おう</title>
|
|
<meta name="author" content="W.Dee" />
|
|
<meta http-equiv="Content-Style-Type" content="text/css" />
|
|
<meta http-equiv="Content-Script-Type" content="text/javascript" />
|
|
<link href="browser.css" type="text/css" rel="stylesheet" title="吉里吉里関連リファレンス用標準スタイル" />
|
|
<link href="mailto:[email protected]" rev="Made" />
|
|
<link href="index.html" target="_top" rel="Start" title="トップページ" />
|
|
</head>
|
|
<body>
|
|
<h1><a id="id286" name="id286">その前に</a>
|
|
</h1><div class="para"><div>
|
|
フェードインやフェードアウト、ブラインドなど、時間をかけて画面を切り替える効果を<a id="id287" name="id287" class="targanchor"><dfn>トランジション</dfn></a>(移り変わり)と呼びます。<br />
|
|
吉里吉里/KAGでは、クロスフェードトランジション、ユニバーサルトランジション、スクロールトランジションの、３つの種類のトランジションを使用することができます。<br />
|
|
また、拡張トランジションプラグイン ( extrans.dll ) を用いると、いくつかのトランジションをさらに使うことができるようになります ( 吉里吉里 SDK ヘルプの「トランジションについて」を参照してください )。<br />
|
|
</div></div>
|
|
<h1><a id="id288" name="id288">クロスフェードトランジション</a>
|
|
</h1><div class="para"><div>
|
|
クロスフェードトランジションは、単純な画面切り替え効果です。<br />
|
|
トランジション(移り変わり)ですから、トランジション前の画像と、トランジション後の画像が必要になります。KAG の場合、トランジション前の画像は表ページのレイヤで、トランジション後の画像は裏ページのレイヤになります。つまり、裏ページのレイヤの画像が表ページにくるわけです。<br />
|
|
トランジションの開始とともに、時間をかけて表ページの画像が裏ページの画像に置き換わり、最終的に裏ページの画像が表ページの画像になります。<br />
|
|
<br />
|
|
<br /><div class="note"><div class="notehead"><span class="noteheadspan">Note</span></div>
|
|
KAG には<a id="id289" name="id289" class="targanchor"><dfn>フェードアウト</dfn></a>、<a id="id290" name="id290" class="targanchor"><dfn>フェードイン</dfn></a>という概念がありません。黒にフェードアウトさせたい場合は裏ページを真っ黒な状態にしてからクロスフェードトランジションをかけます。</div><br />
|
|
</div></div>
|
|
<h1><a id="id291" name="id291">ユニバーサルトランジション</a>
|
|
</h1><div class="para"><div>
|
|
ユニバーサルトランジションというのは、ユニバーサル(汎用的な) トランジション(移り変わり)のことで、いわゆる「画面切り替え効果」を自由に作成することができるモノです。<br />
|
|
<br />
|
|
また、ユニバーサルトランジションには、<a id="id292" name="id292" class="targanchor"><dfn>ルール画像</dfn></a>と呼ばれる、グレースケールの画像が必要になります。ルール画像のサイズがトランジションを行いたいレイヤよりも小さい場合は、自動的にタイル状に敷き詰められて使用されます。この画像を「ルール」として、トランジションを進行させます。<br />
|
|
そして、ユニバーサルトランジションに必要な属性、<a id="id293" name="id293" class="targanchor"><dfn>time</dfn></a> (トランジションを行っている時間)と、<a id="id294" name="id294" class="targanchor"><dfn>vague</dfn></a> (<a id="id295" name="id295" class="targanchor"><dfn>あいまい領域値</dfn></a>) が必要になります。<br />
|
|
<br />
|
|
例を示します。<br />
|
|
<br />
|
|
以下の画像を見てください。<br />
|
|
<br /><div class="descimg"><img width="64" height="64" alt="univtrans_A.png" src="univtrans_A.png" /><img width="64" height="64" alt="univtrans_B.png" src="univtrans_B.png" /><img width="64" height="64" alt="univtrans_R.png" src="univtrans_R.png" /><br />トランジション前、トランジション後、ルール画像</div><br /><br />
|
|
このように、A と書いてある画像が、B と書いてある画像に移り変わるとします。また、ルール画像には、単純ですが 上から下へ、黒から白へのグラデーションの画像を使うとします。<br />
|
|
<br />
|
|
さて、まず <a id="id296" name="id296" class="targanchor"><dfn>vague</dfn></a> (あいまい領域値) を 1 にすると、以下のようにトランジションが進行します。左から右へと進行しています。便宜上、移り変わりを横に並べて示していますが、実際はこれが連続して同じ場所で表示されるのです。<br />
|
|
<br /><div class="descimg"><img width="320" height="64" alt="univtrans_V1.png" src="univtrans_V1.png" /><br />vague=1 のとき</div><br /><br />
|
|
つまり、ルール画像の黒いところから、白いところに向かって、だんだんと B の画像に置き換わっていっているのです。<br />
|
|
<br />
|
|
ここで vague=64 としてみましょう。<br />
|
|
<br /><div class="descimg"><img width="320" height="64" alt="univtrans_V64.png" src="univtrans_V64.png" /><br />vague=64 のとき</div><br /> こんどは、A の画像と B の画像の境界がぼやけていますね？ このように、vague の値を大きくすると、移り変わりの中で、A でも B でもない、あいまいな部分を大きくすることができます。vague には 1 以上の数値を指定できます。<br />
|
|
<br />
|
|
ルール画像には、このように単純なグラデーションだけではなく、いろいろな模様を指定することによって、それに従って自由にトランジションを行わせることができます。<br />
|
|
<br />
|
|
吉里吉里ダウンロードページ<a target="_top" class="jump" href="http://kikyou.info/tvp/">http://kikyou.info/tvp/</a> には、「<a id="id297" name="id297" class="targanchor"><dfn>トランジションライブラリ</dfn></a>」として、ユニバーサルトランジションのルール画像が 20 種類以上入ったものが公開されています。<br />
|
|
</div></div>
|
|
<h1><a id="id298" name="id298">スクロールトランジション</a>
|
|
</h1><div class="para"><div>
|
|
スクロールトランジションは、ユニバーサルトランジションとは違い、切り替え元 ( 裏画面 ) の画像が切り替え先 ( 表画面 ) の画像の領域内にスクロールして入ってくる感じの物です。<br />
|
|
切り替え元 ( 裏画面 ) の画像が入ってくる方向は、左、上、右、下の4方向から選べます。<br />
|
|
また、スクロールの仕方で3つの種類があります。<br />
|
|
<br />
|
|
まず、<a id="id299" name="id299" class="targanchor"><dfn>stay</dfn></a> 属性に "stayfore" を指定した場合のスクロールトランジションは、以下のようになります(下から入ってくる場合)。<br />
|
|
<br /><div class="descimg"><img width="320" height="64" alt="univtrans_Sstay.png" src="univtrans_Sstay.png" /><br />stay=stayfore のとき</div><br /> このように、stay 属性に "stayfore" を指定すると、表ページの画像がその場にとどまったまま、裏ページが外から移動して入ってくる感じになります。<br />
|
|
<br />
|
|
また、stay 属性に "stayback" を指定した場合のスクロールトランジションは以下のようになります。<br />
|
|
<br /><div class="descimg"><img width="320" height="64" alt="univtrans_Sstaysrc.png" src="univtrans_Sstaysrc.png" /><br />stay=stayback のとき</div><br /> この場合は、表ページのレイヤが移動して出ていく後ろから、裏ページのレイヤが見えてくる感じになります。<br />
|
|
<br />
|
|
stay 属性に "nostay" を指定すると以下のようになります。<br />
|
|
<br /><div class="descimg"><img width="320" height="64" alt="univtrans_Snostay.png" src="univtrans_Snostay.png" /><br />stay=nostay</div><br /> このように、入ってきた切り替え元の画像に押されるようにしてスクロール元の画像が出ていきます。A の画像と B の画像を横または縦に連続した物にすれば、大きな画面をスクロールさせているような効果を出すことができます。でも前景レイヤの切り替え効果にはあんまり向いていません<code class="inlinecode">(^^;;</code><br />
|
|
</div></div>
|
|
<h1><a id="id300" name="id300">表ページと裏ページ</a>
|
|
</h1><div class="para"><div>
|
|
トランジションを行ううえで非常に重要なのが<a id="id301" name="id301" class="targanchor"><dfn>表ページ</dfn></a>と<a id="id302" name="id302" class="targanchor"><dfn>裏ページ</dfn></a>という概念です。<br />
|
|
<a target="main" class="jump" href="DispBase.html">背景を表示しよう</a> でも紹介しましたが、KAG は、普段目に見える表ページと、目には見えない裏ページがあって、両方は見えるか見えないかだけが違うほかは、まったく同じ構成をしています。<br />
|
|
KAG のトランジションは常に、いま表示されている表ページの内容にかわって、裏ページの内容がだんだんと表示されてくるという方向で行われます。トランジションが終わると、表ページの内容は完全に裏ページの内容と同じになります。<br />
|
|
というわけで、トランジション前には裏ページを操作しなければなりません。<br />
|
|
<br />
|
|
例を示します。背景レイヤのみを入れ替える場合を考えます。<br />
|
|
まず、トランジション前、レイヤの状態が次のようであったとします ( 左が表、右が裏 )<br />
|
|
<br />
|
|
<br /><div class="descimg"><img width="240" height="180" alt="trans0f.jpg" src="trans0f.jpg" /><img width="240" height="180" alt="trans0b.jpg" src="trans0b.jpg" /><br />トランジション前</div><br /> この時点で表ページは背景レイヤに全景レイヤ、メッセージレイヤが表示されています。裏ページはどのような状態でもかまわないものとします。<br />
|
|
ここで [backlay] タグで裏ページを表ページと同じにします。<br />
|
|
<br /><div class="descimg"><img width="240" height="180" alt="trans0f.jpg" src="trans0f.jpg" /><img width="240" height="180" alt="trans0f.jpg" src="trans0f.jpg" /><br />backlay タグ実行後</div><br /> トランジションは裏ページの内容を表ページに移すものですので、トランジションを行う前に、裏ページをいじらないといけません。<br />
|
|
ここでは背景レイヤのみを入れ替えたいので、裏ページの背景レイヤに画像を読み込みます。<br />
|
|
<br /><div class="descimg"><img width="240" height="180" alt="trans0f.jpg" src="trans0f.jpg" /><img width="240" height="180" alt="trans2b.jpg" src="trans2b.jpg" /><br />裏ページの背景レイヤに画像を読み込んだ後</div><br /> ここでやっと trans タグでトランジションを行えます。くどいようですが、トランジションは裏ページの画像を表ページに持ってきます。<br />
|
|
トランジション中は以下のようになります ( トランジションの例 )。<br />
|
|
<br /><div class="descimg"><img width="240" height="180" alt="trans3f.jpg" src="trans3f.jpg" /><img width="240" height="180" alt="trans2b.jpg" src="trans2b.jpg" /><br />トランジション中</div><br /> トランジションは [wt] タグで待ちます。<br />
|
|
トランジションが終われば、以下のように、裏ページと表ページが同じになります。<br />
|
|
<br /><div class="descimg"><img width="240" height="180" alt="trans2b.jpg" src="trans2b.jpg" /><img width="240" height="180" alt="trans2b.jpg" src="trans2b.jpg" /><br />トランジション後</div><br /></div></div>
|
|
<h1><a id="id303" name="id303">背景レイヤを切り替えてみよう</a>
|
|
</h1><div class="para"><div>
|
|
トランジションを行うには <a id="id304" name="id304" class="targanchor"><dfn>trans</dfn></a> タグを使います。<br />
|
|
基本的にトランジションは、裏ページに [<a id="id305" name="id305" class="targanchor"><dfn>backlay</dfn></a>] タグにてすべての表ページのレイヤ情報を裏ページにコピーして、裏ページで変化させたい部分を image タグなどでいじり、そして trans タグでトランジションを実行します。すると、裏ページに適用した変化が、現在の表ページと入れ替わるように、表ページに適用されます。<br />
|
|
<br />
|
|
まずは、背景レイヤをクロスフェードトランジションで切り替えてみましょう。<br />
|
|
<br />
|
|
|
|
<br />
|
|
<code class="bq">[image storage="bg0" page=fore layer=base]<br />
|
|
[wait time=200]<br />
|
|
*start|スタート<br />
|
|
[cm]<br />
|
|
こんにちは。背景レイヤを切り替えます。[l][r]<br />
|
|
<em>[backlay]</em><br />
|
|
[image storage="bg1" layer=base <em>page=back</em>]<br />
|
|
<em>[trans method=crossfade time=1500]</em><br />
|
|
<em>[wt]</em><br />
|
|
切り替わりましたか？<br />
|
|
</code>
|
|
<br />
|
|
|
|
まず、[backlay] タグで表ページのレイヤの情報を裏ページにコピーしています。<br />
|
|
そして、裏ページの背景レイヤに、次に表示すべき画像を読み込んでいます。<br />
|
|
この時点で、裏ページが表ページと違うのは背景画像だけです。<br />
|
|
次に trans タグでトランジションを実行しています。このように、trans の属性で <code class="inlinecode">method=crossfade</code> と指定するとユニバーサルトランジションとなります。この例では時間は 1.5 秒と指定しています。時間はミリ秒単位で指定するので <code class="inlinecode">time=1500</code> と指定します。<br />
|
|
<br /><div class="note"><div class="notehead"><span class="noteheadspan">Note</span></div>
|
|
ミリ秒単位で指定をしますが、精度がミリ秒単位ほどあるというわけではありません。</div><br />
|
|
<br />
|
|
その後、<a id="id306" name="id306" class="targanchor"><dfn>wt</dfn></a> タグでトランジションの終了を待っています。<em>KAG は wt タグを書かないとトランジションを待たずに次にいってしまいます</em>ので、wt タグを忘れないようにしてください。<br />
|
|
<br /><div class="note"><div class="notehead"><span class="noteheadspan">Note</span></div>
|
|
トランジションに限らず、KAG の「時間をかけて何かを処理するもの」のほとんどのタグはそれ自体では終了を待たずに、終了を待つためのタグが別にあります。これにより、トランジションしながらBGM のフェードアウト、というようなことができます。<br />
|
|
また、<em>対応する「待つ」タグは必ず書いてください</em>。異種類の物でまとうとする場合 ( トランジションの終了を wait タグで待つなど ) でも、正しく対応する「待つ」タグは一応書いておく必要があります。<br />
|
|
</div><br />
|
|
<br />
|
|
<br />
|
|
また、ユニバーサルトランジションを使ってみると以下のようになります。<br />
|
|
|
|
<br />
|
|
<code class="bq">[image storage="bg0" page=fore layer=base]<br />
|
|
[wait time=200]<br />
|
|
*start|スタート<br />
|
|
[cm]<br />
|
|
こんにちは。背景レイヤを切り替えます。[l][r]<br />
|
|
<em>[backlay]</em><br />
|
|
[image storage="bg1" layer=base <em>page=back</em>]<br />
|
|
<em>[trans method=universal rule="rule1" vague=1 time=1500]</em><br />
|
|
<em>[wt]</em><br />
|
|
切り替わりましたか？<br />
|
|
</code>
|
|
<br />
|
|
|
|
<br />
|
|
この例でも trans タグでトランジションを実行しています。このように、trans の属性で <code class="inlinecode">method=universal</code> と指定するとユニバーサルトランジションとなります ( method タグを省略しても universal であると見なされます )。この例では、ルール画像として "rule1" 、時間は 1.5 秒、あいまい領域値は 1 という設定です。<br />
|
|
<br />
|
|
また、これをスクロールトランジション、右から、居座りなしでトランジションを行うとすると・・・<br />
|
|
<br />
|
|
|
|
<br />
|
|
<code class="bq">[image storage="bg0" page=fore layer=base]<br />
|
|
[wait time=200]<br />
|
|
*start|スタート<br />
|
|
[cm]<br />
|
|
こんにちは。背景レイヤを切り替えます。[l][r]<br />
|
|
[backlay]<br />
|
|
[image storage="bg1" layer=base <em>page=back</em>]<br />
|
|
[trans <em>method=scroll from=right stay=nostay children=false</em> time=1500]<br />
|
|
[wt]<br />
|
|
切り替わりましたか？<br />
|
|
</code>
|
|
<br />
|
|
|
|
となります。ここでは <code class="inlinecode">children=false</code> と指定しているのは、このように指定しないと「<a id="id307" name="id307" class="targanchor"><dfn>子レイヤ</dfn></a>」も一緒に移動してしまうからです。KAG では、背景レイヤが親、前景レイヤとメッセージレイヤは背景レイヤの子にあたります。<br />
|
|
子レイヤも一緒にスクロールしていいのであれば <code class="inlinecode">children=true</code> にしてもかまいません。<br />
|
|
</div></div>
|
|
<h1><a id="id308" name="id308">前景レイヤを切り替えてみよう</a>
|
|
</h1><div class="para"><div>
|
|
前景レイヤを切り替えるにも trans タグを使います。<br />
|
|
<br />
|
|
|
|
<br />
|
|
<code class="bq">[image storage="bg0" page=fore layer=base]<br />
|
|
[wait time=200]<br />
|
|
*start|スタート<br />
|
|
[cm]<br />
|
|
こんにちは。前景レイヤをトランジションを使って表示させます。[l][r]<br />
|
|
[backlay]<br />
|
|
[image layer=0 page=back storage="fg0" visible=true]<br />
|
|
; この時点で、表ページの前景レイヤ 0 は(デフォルトのままなので)不可視、<br />
|
|
; この時点で、裏ページの前景レイヤ 0 は可視で画像を保持していて、<br />
|
|
; 他の裏ページのレイヤは backlay タグの効果で、すべて表ページと同じ<br />
|
|
[trans method=crossfade time=1500][wt]<br />
|
|
つぎは、前景レイヤを入れ替えます。[l][r]<br />
|
|
[backlay]<br />
|
|
[image layer=0 page=back storage="fg1" visible=true]<br />
|
|
; この時点で、裏ページの前景レイヤ 0 は fg1 という画像、<br />
|
|
; 他の裏ページのレイヤは backlay タグの効果で、すべて表ページと同じ<br />
|
|
[trans method=crossfade time=1500][wt]<br />
|
|
そうしたら、前景レイヤを消します。[l][r]<br />
|
|
[backlay]<br />
|
|
[layopt layer=0 page=back visible=false]<br />
|
|
; この時点で、裏ページの前景レイヤ 0 は不可視、<br />
|
|
; 他の裏ページのレイヤは backlay タグの効果で、すべて表ページと同じ<br />
|
|
[trans method=crossfade time=1500][wt]<br />
|
|
</code>
|
|
<br />
|
|
|
|
上の例は、前景レイヤを表示させ、それを別の画像に入れ替え、そして消しています。<br />
|
|
まず、表示させる所ですが、まず、backlay タグを使って、表ページの情報をすべて裏ページにコピーしています。そのあと、変更したい部分、ここでは前景レイヤに前景を表示させたいわけですから、裏ページの前景レイヤに画像を読み込んでいます。<br />
|
|
そのあと、trans タグを使用しています。<br />
|
|
<br />
|
|
つぎに前景レイヤを入れ替えていますが、これも、backlay で裏ページにコピーした後、変更したい部分を操作し、trans タグでトランジションを行わせています。<br />
|
|
<br />
|
|
最後に前景レイヤを消していますが、backlay で裏ページにコピーした後、該当する前景レイヤを非表示にしています。非表示になっているということは、つまり表示されてないということで(あたりまえか) 、トランジションを行わせると消えます。<br />
|
|
<br />
|
|
なお、このなかで、裏ページにあるレイヤに対して visible=true としているので、表示されてしまうのか、と心配かもしれませんが、裏ページ ( 背景レイヤとその子レイヤ ) はもともと非表示にしかならないので、visible=true と指定しても表示される心配はありません。<br />
|
|
<br />
|
|
<br /><div class="note"><div class="notehead"><span class="noteheadspan">Note</span></div>
|
|
上記の例のように、trans タグの layer 属性を省略すると base ( 背景レイヤ ) が指定されたとみなされ、children 属性を省略すると true が指定された ( 子レイヤも含めて一緒にトランジション ) をするという意味になります。<br />
|
|
前景レイヤをトランジションを使って表示したいとき、入れ替えたいとき、消したいときなどや、その他の諸々のトランジションは、背景レイヤに対して、子レイヤも含めて一緒にトランジションさせるというのがミソです。layer=0 などとして前景レイヤやメッセージレイヤに対して個別にトランジションをかけることもできますが、通常は使いません。<br />
|
|
</div><br />
|
|
</div></div>
|
|
<h1><a id="id309" name="id309">メッセージレイヤを切り替えてみよう</a>
|
|
</h1><div class="para"><div>
|
|
メッセージレイヤも同様の方法で切り替えることが出来ます。<br />
|
|
メッセージレイヤの場合、表示・非表示は layopt タグで操作できるので同様の動作を行うことができます。<br />
|
|
<br />
|
|
たとえば、メッセージレイヤを非表示のまま描画し、描画し終わってからトランジションで画面に表示するには以下のようにします。また、そのあと、メッセージレイヤをトランジションを使って非表示にしています。<br />
|
|
<br />
|
|
|
|
<br />
|
|
<code class="bq">[layopt layer=message page=fore visible=false]<br />
|
|
; ↑最初は表ページメッセージレイヤを非表示に<br />
|
|
[layopt layer=message page=back visible=true]<br />
|
|
; ↑裏ページのメッセージレイヤを表示状態に<br />
|
|
[wait time=200]<br />
|
|
*start|スタート<br />
|
|
[cm]<br />
|
|
[current page=back]<br />
|
|
; ↑操作対象のメッセージレイヤを裏ページに<br />
|
|
[delay speed=nowait]<br />
|
|
; ↑文字描画速度をノーウェイトに<br />
|
|
このようにトランジションを使いながらメッセージレイヤを表示させることができます。[r]<br />
|
|
[delay speed=user]<br />
|
|
; ↑文字描画速度を元に戻す<br />
|
|
[trans method=universal rule="trans1" vague=1 time=1500][wt]<br />
|
|
; ↑ユニバーサルトランジション<br />
|
|
[current page=fore]<br />
|
|
; ↑念のために操作対象のメッセージレイヤを表ページの物に<br />
|
|
[l]<br />
|
|
; ↑クリック待ち<br />
|
|
[layopt layer=message page=back visible=false]<br />
|
|
; ↑裏ページのメッセージレイヤを非表示に<br />
|
|
[trans method=universal rule="trans1" vague=1 time=1500][wt]<br />
|
|
; ↑トランジション<br />
|
|
</code>
|
|
<br />
|
|
|
|
</div></div>
|
|
<script type="text/javascript" charset="UTF-8" src="documentid.js" ></script>
|
|
<script type="text/javascript" charset="UTF-8" src="postcontent.js" ></script>
|
|
</body>
|
|
</html>
|