トランジションを使ってみよう


トランジションって？
直訳すると、「移り変わり」とか「変化」って意味なんだけど、その名の通り、画面を変化させるものだよ。
変化？
一番わかりやすいのは、フェードアウトかな。
ゲームの画面が表示されてる状態から、真っ黒な画面にフェードアウトするのは、画面の「変化」でしょ。
うん。
じゃあ、フェードアウトできるの？
そう。
今までの内容がちゃんと理解できてたら簡単だよ。
う・・・
あんまり自信ないな・・・
画面に表示されてるのは、何だった？
レイヤでしょ。
どんなレイヤ？
えーっと・・・
ベースレイヤと、前景レイヤと、メッセージレイヤ・・・かな。
うん、正解。
その中でも、表ページと裏ページがあって、画面に見えてるのは表ページだよね。
うん、そうだった。
トランジションは、表ページに表示されてる画像から、裏ページの状態に徐々に「変化」するためのタグなんだよ。
つまり、表ページに普通のゲーム画面が表示されてる状態で、裏ページを真っ黒にして、それからトランジションを実行すればフェードアウトの完成ってわけ。
なんだか、分かったような分からないような・・・
サンプルを見てみれば分かるよ。 
*start
[image storage="shikaku.png" layer=0 page=fore left=100 top=100 visible=true]
トランジションします[l]
[backlay]
[layopt layer=0 page=back visible=false]
[layopt layer=message0 page=back visible=false]
[trans method=crossfade time=3000]
[wt]
おお！
フェードアウトしたよ！
じゃあ、順番にソースを見ていこうか。
最初の3行は大丈夫だよね。
1行目はラベル。
2行目は、四角の画像をレイヤ0に読み込んで、表ページに表示するんだよね。
3行目は文字を書いて、クリック待ちしてるのかな。
はい、よくできました。
その次の[backlay]というのは、表ページの内容を裏ページにコピーするタグなの。今回のサンプルの場合はなくても特に問題ないけど、基本的にはトランジションの前にはこのbacklayタグは入れておいた方がいいよ。
でも、裏ページって見えないでしょ？
コピーして意味あるの？
あるんだなぁ〜、これが。
じゃあ、次のサンプルを動かしてみて。 
*start
[image storage="shikaku.png" layer=0 page=fore left=100 top=100 visible=true]
トランジションします[l]
[backlay]
[layopt layer=0 page=back visible=false]
[trans method=crossfade time=3000]
[wt]
四角だけが消えたよ。
じゃあ、今度は[backlay]を消してもう一度見てみて。
あ！
文字も消えた。
ね？
backlayタグを実行すると、表ページの四角と、文字の書かれたメッセージレイヤが裏ページにコピーされるでしょ。
その次にレイヤ0の裏ページだけ visible=false って指定してるから、裏ページの状態はどうなってる？
えーっと・・・
メッセージレイヤだけが表示されてるのかな？
うん、そういうこと。
それから、トランジションを実行すると、その裏ページの状態が表ページに徐々にコピーされるわけ。
なるほど・・・
このとき、backlayを実行していないと、裏ページには何も表示されていない状態だから、トランジションを実行すると全部消えちゃうんだよ。
あと、ゲームの途中だと、backlayを忘れると、変な画面が裏ページに残っていて、トランジションを実行したら変になるってこともあるよね。
トランジションの動作がおかしかったら backlay を忘れてるのが原因、ってことがありそうだね。
うん。あると思うよ。
transタグがトランジションの実行なんだよね。
中の属性はどういう意味？
method属性はトランジションの種類を指定してるの。
吉里吉里/KAGにはクロスフェード、ユニバーサル、スクロールの3種類のトランジションがあって、それをここで指定するんだよ。
クロスフェードは今見たやつだよね、スクロールはたぶんスクロールして画面を変化させるんだろうけど・・・ユニバーサルっていうのは？
少し難しいんだけど、ルール画像っていうグレースケールの画像を用意して、その画像を「ルール」としてトランジションさせるの。
よく分かんないなぁ。
言葉だと難しいね。 百聞は一見にしかず。下の図を見てみて。
　　
Aが表ページ、Bが裏ページ、右端の画像がルール画像だと思って。
このとき、transタグと、実際のトランジションの様子は下のような感じになるんだよ。 
[trans rule="univtrans_R.png" vague=1 time=1000]
mathod属性がないよ。
うん。mothod属性は規定値（デフォルト値）がuniversalになってるから、ユニバーサルトランジションの時は省略してもいいの。
じゃあ、vagueっていうのは？
これは「あいまいさ」の属性。
今は1だから「あいまいさ」はほとんどないけど、例えばこれを64にすると、下のようになるよ。 
[trans rule="univtrans_R.png" vague=64 time=1000]
ぼやっとしてる。
この数字が大きくなると、そのぼやっと具合が大きくなるわけ。
なんとなく分かったような気がするけど・・・
ルール画像の大きさって、画面の大きさと一緒じゃないとダメなの？
いい質問だねぇ。
大きさは一緒じゃなくても大丈夫だよ。もしルール画像が小さかったら自動的にタイル状に敷き詰めてくれるから。
サンプルで確認してみる？
下の画像をプロジェクトのフォルダに保存して。


ruleフォルダでいいの？
そうだね。 それから、下のサンプルを実行してみて。 
*start
[image storage="shikaku.png" layer=0 page=fore left=100 top=100 visible=true]
トランジションします[l]
[backlay]
[layopt layer=0 page=back visible=false]
[layopt layer=message0 page=back visible=false]
[trans rule="univtrans_R2.png" vague=1 time=3000]
[wt]
あ、なるほど〜。
トランジションをうまく使えば、凝った演出とかもできるから楽しいよ。
ふふふ・・・
またひとつ、技を覚えてしまった。


トランジションサンプル画像は吉里吉里/KAGに同梱のリファレンスよりお借りしました


前のページ | MENU | 次のページ



inserted by FC2 system