トップページへ戻る


背景レイヤーのトランジション
 
「今のままだと、背景画像がパッと変わっちゃって面白くないだろ? そこで、画面切り替えがカッコよくなるトランジション効果を入れてみよう」

「やったー」

「KAGにはユニバーサルトランジションとスクロールトランジションという二種類のトランジション方法があるけど、ここでは汎用性の高いユニバーサルトランジションを使おう」

「どうやって?」

「その前にKAGのトランジションの原理を説明しておこうか。デフォルト設定のKAGが、1枚の背景レイヤー ( base ) と三枚の前景レイヤー ( 0、1、2 ) を持っていることは、前回話しただろ?」

「うん」

「そして、それぞれのレイヤーには、見えるフォアグラウンド ( fore ) と見えないバックグラウンド ( back ) があることも、話したよな」

「うん」

「KAGでトランジションを行う場合は、トランジションによって表示させたい画像をレイヤーのバックグラウンドに読み込む。そして、ruleフォルダに入れておいたトランジションパターン用のPNGファイルを指定して、そのパターンに従ってバックグラウンドからフォアグラウンドに表示させるんだ」

「よくわかんない」

「じゃあ、実際に書いてみよう。トランジションに使うタグは [trans] だ。これに続く属性にはいろいろあるけど、ここで大切なのは、time、method、rule、vague の四つだ」

「いっぱいあってやんなっちゃうなー」

「簡単だよ。それぞれがどんな効果を生み出すかは、これを見てくれ」

timeトランジションの速度を指定する。数値で指定し、単位はミリ秒。
methodトランジションの種類を指定する。
scroll と universal があるが、ここでは universal を指定。
ruleトランジションパターンのPNGファイルを指定する。
vague境界のあいまい値を指定する。この値が小さいと
トランジションはくっきりと行われ、大きいとぼんやりと行われる。

「上の表を見て、タグを書いてごらん」

「んーと……[trans time=2000 method=universal rule……」

「ルール画像はまだ準備していないから、吉里吉里についてきた紹介用デモサンプルから借りよう」

「どこにあんのかなー?」

「吉里吉里を展開して出てきた syoukai フォルダの下にある、rule フォルダだ。四枚のPNGファイルがあるから、これを練習用の template フォルダの下の rule フォルダにコピー」

「できたよー」

「どれでも好きなルールファイルを指定してごらん。それと、最後の vague には適当な数字を入れる」

「……[trans time=2000 method=universal rule="trans1" vague=100]……これでいい?」

「いいよ。それじゃ、それをスクリプトの中に書き入れよう。画像をロードした直後の行に」

「んー」

[title name="タイトル"]\
[wc time=20]\
*start|スタート
[image storage="test01" page=fore layer=base]\
[trans time=2000 method=universal rule="trans1" vague=100]\
 時々、日常生活の全てのしがらみを振り切って、ふっと旅に出たくなることがある。[l]
 その日のあたしは、ちょうどそんな気持ちだった。[l]
 出勤中、いつものように新宿駅西口に到着したあたしは、気がつくと江ノ島行きの特急券を買い、私鉄の特急に乗っていた。[l]
 どんよりとした薄曇の日だった。[p]
[ct]\
[image storage="test02" page=fore layer=base]\
[trans time=2000 method=universal rule="trans1" vague=100]\
 江ノ島は、あたしにとって初めての場所ではない。[l]
 まだ十代だった頃、若さに任せて遊び回り、ずいぶん危ない橋を渡るような真似もした、言うならば思い出の地である。[p]

「それじゃー、実行ー!」

「待て待て待て。それだと、せっかくトランジションを指定したのに、その前の行で画像をフォアグラウンドに読み込んで、いきなり見せちゃってるだろ?」

「わかった! トランジションの一行前の画像読み込みの行で、page=fore を page=back に直せばいいんだもん!」

「その通り。そうすれば、最初は見えないバックグラウンドに画像が読み込まれて、それが次の行でトランジションルールに従ってフォアグラウンドに表示されてくる」

[title name="タイトル"]\
[wc time=20]\
*start|スタート
[image storage="test01" page=back layer=base]\
[trans time=2000 method=universal rule="trans1" vague=100]\
 時々、日常生活の全てのしがらみを振り切って、ふっと旅に出たくなることがある。[l]
 その日のあたしは、ちょうどそんな気持ちだった。[l]
 出勤中、いつものように新宿駅西口に到着したあたしは、気がつくと江ノ島行きの特急券を買い、私鉄の特急に乗っていた。[l]
 どんよりとした薄曇の日だった。[p]
[ct]\
[image storage="test02" page=back layer=base]\
[trans time=2000 method=universal rule="trans1" vague=100]\
 江ノ島は、あたしにとって初めての場所ではない。[l]
 まだ十代だった頃、若さに任せて遊び回り、ずいぶん危ない橋を渡るような真似もした、言うならば思い出の地である。[p]

「これで完璧だもんねー!」

「それじゃ、実行させてごらん」

「んー。何か変だなー」

「変な理由はこうじゃないか? トランジションによる画像の切り替えが完了しないうちに文字が表示されちゃっている。一部の文字は、あろうことかトランジションの影響をまともに食らって消えてしまったりして」

「そーなのそーなのそーすなの!」

「うまい焼きそばソースなの! ……って、おい、何を言わせるんだ」

「いーから早く説明してよもー」

「前回、効果音の終了を待たせるタグを使ったこと、覚えているかい?」

「んーと、[ws] だったっけかなー?」

「そう。効果の終了を待たせるタグはWで始まるものが多いけど、トランジションにもそれが用意されている。[wt] っていうタグだ」

「んじゃー、早速直すもん。トランジションを待つタグだから、トランジションの次に書けばいいんだもんね」

[title name="タイトル"]\
[wc time=20]\
*start|スタート
[image storage="test01" page=back layer=base]\
[trans time=2000 method=universal rule="trans1" vague=100]\
[wt]\
 時々、日常生活の全てのしがらみを振り切って、ふっと旅に出たくなることがある。[l]
 その日のあたしは、ちょうどそんな気持ちだった。[l]
 出勤中、いつものように新宿駅西口に到着したあたしは、気がつくと江ノ島行きの特急券を買い、私鉄の特急に乗っていた。[l]
 どんよりとした薄曇の日だった。[p]
[ct]\
[image storage="test02" page=back layer=base]\
[trans time=2000 method=universal rule="trans1" vague=100]\
[wt]\
 江ノ島は、あたしにとって初めての場所ではない。[l]
 まだ十代だった頃、若さに任せて遊び回り、ずいぶん危ない橋を渡るような真似もした、言うならば思い出の地である。[p]

「それじゃ実行ー! うわー! カッコいいー!」

「だろ?」

練習日記 2日目 次へ


トップページへ戻る