Lesson10 画面切り替えの効果編

背景の表示の応用

さて、以前のLessonで使用した下のソースがあります。

[image storage="road.jpg" layer="base"] ああ、なんだか背景を変えたい気分だ。[p] [image storage="hogehoge.jpg" layer="base"] [er] そう、今日はこの背景が気分だ。

このソースは背景が突然変化してしまうものでした。これはBGMのときの不自然さに似たものがありますね。 その時、私達はBGMをフェードイン、フェードアウトさせることで問題を解決しました。 実は画面の切り替えにも同じような機能があります。それはトランジションと呼ばれるもので、 このサイトでは"画面切り替えの効果"と別名で呼んでいます。これはBGMのフェードに比べ、 様々な効果が存在します。その一部にはルール画像を利用します。ルール画像とは吉里吉里本体をダウンロードしたときに 合わせて入手することをお勧めしたトランジションライブラリに入っています。

画面切り替えの効果

画面切り替えの効果には多くの種類がありますが、KAG3の標準状態では３種類の画面切り替え効果を行うことができます。 それには、ルール画像という画像に従って切り替えアニメーションを行うユニバーサルトランジション、 指定された時間をかけて、レイヤーの裏を表に表示させるクロスフェードトランジション、 レイヤーをスライドさせてレイヤーの裏を表に表示させるスクロールトランジションがあります。
さて、裏と表とは何なのでしょうか？これは以前に少しだけ話を出したことがあります。KAG3のレイヤーには全て表と裏のページがあり、 私達が目にしているのは表側のページです。それに対して裏のページとは裏方に使用するユーザーの目に見えない場所 なのです。

画面切り替えの効果を実行するにはページの表と裏を意識する必要があります。 画面切り替えの効果は、表に表示させたい画像を裏のページへ事前に準備して、その画像を表側に移す時に行われます。 ためしに、一番容易なクロスフェードトランジションを行ってみましょう。下のソースを見てください。

[image storage="hogehoge.jpg" layer="base" page="back"] [trans layer="base" method="crossfade" time="1000"]

はじめにimageで画像を読み込みます。しかし今までと違うのはpage="back"の部分です。 また、transタグは画面切り替えの効果をおこなうタグで、 methodで画面切り替え効果の種類を、timeでかける時間を指定しています。page="back"とは 裏のページに読み込みなさい。という命令なので上のソースはこのような意味になります。

画像について命令します。(image)hogehoge.jpgを読み込みなさい(storage="hogehoge.jpg")。 読み込む場所は背景レイヤーの(layer="base")裏側にしなさい。(page="back") 画面切り替えの効果を使用しなさい(trans)。 場所は背景レイヤーで(layer="base")、クロスフェードトランジションを(method="crossfade")一秒かけて行いなさい(time="1000")。

このとき、画面切り替えの効果の指定方法により必要な追加記述が変わってくるので注意が必要です。詳しくはtransタグ を見るといいと思いますが、ここでは記述の例と補足の説明を行いたいと思います。

ユニバーサルトランジション

[image storage="hogehoge.jpg" layer="base" page="back"] [trans layer="base" method="universal" time="1000" rule="こすり(左から右へ).png"]

ruleで指定されているのがルール画像です。ルール画像とは、画面切り替え効果を行うときにどこが画面切り替えの境界線か？ を示す画像で、ルール画像中の色が濃い部分から薄い部分へと境界線が移っていきます。使用したルール画像と、実行結果を照らし合わせたほうが、 文字で説明されるよりも分かりやすいと思います。
ちなみに、ルール画像により決定された画面切り替えの境界線の周辺をどのあたりまで曖昧にしてしまうかを設定することができます。 この数字が大きいほど滑らかな効果が得られますが、大きすぎるのもお勧めしません。設定は以下のように行います。

[image storage="hogehoge.jpg" layer="base" page="back"] [trans layer="base" method="universal" time="1000" vague="300" rule="こすり(左から右へ).png"]

vagueがその設定の部分となります。上に掲載した画像と比べると、画面に変化が起きている領域が広くなっている事が 確認できると思います。この追加記述の標準の値は64なので、上のソースでは境界線の幅が前のソースに比べ大きく広がっているのです。 ちなみに数値を小さなものにすると、ルール画像で決められた画面切り替えの境界線がくっきりと現われてきます。

スクロールトランジション

[image storage="kyoushitu.jpg" layer="base" page="back"] [trans layer="base" method="scroll" from="left" time="1000"]

fromで画像がどこからスクロールされてくるかを指定することができます。また、スクロールしたときの ２つの画像の動きをstayで変更することもできます。

[次へ進む]

Back to the Lesson([top]＞[Lesson]＞[Lesson10 画面切り替えの効果編])