さて、以前のLessonで使用した下のソースがあります。
[image storage="road.jpg" layer="base"] |
画面切り替えの効果には多くの種類がありますが、KAG3の標準状態では3種類の画面切り替え効果を行うことができます。
それには、ルール画像という画像に従って切り替えアニメーションを行うユニバーサルトランジション、
指定された時間をかけて、レイヤーの裏を表に表示させるクロスフェードトランジション、
レイヤーをスライドさせてレイヤーの裏を表に表示させるスクロールトランジションがあります。
さて、裏と表とは何なのでしょうか?これは以前に少しだけ話を出したことがあります。KAG3のレイヤーには全て表と裏のページがあり、
私達が目にしているのは表側のページです。それに対して裏のページとは裏方に使用するユーザーの目に見えない場所
なのです。
画面切り替えの効果を実行するにはページの表と裏を意識する必要があります。 画面切り替えの効果は、表に表示させたい画像を裏のページへ事前に準備して、その画像を表側に移す時に行われます。 ためしに、一番容易なクロスフェードトランジションを行ってみましょう。下のソースを見てください。
[image storage="hogehoge.jpg" layer="base" page="back"] |
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")。 |
Tip上のソースでは切り替え前の画面が真っ暗な状態でしたが、当然他の画像が表示されている画面からでも 同じ方法で画面切り替えの効果を使用することができます。 |
[image storage="hogehoge.jpg" layer="base" page="back"] |
rule
で指定されているのがルール画像です。ルール画像とは、画面切り替え効果を行うときにどこが画面切り替えの境界線か?
を示す画像で、ルール画像中の色が濃い部分から薄い部分へと境界線が移っていきます。使用したルール画像と、実行結果を照らし合わせたほうが、
文字で説明されるよりも分かりやすいと思います。
ちなみに、ルール画像により決定された画面切り替えの境界線の周辺をどのあたりまで曖昧にしてしまうかを設定することができます。
この数字が大きいほど滑らかな効果が得られますが、大きすぎるのもお勧めしません。設定は以下のように行います。
[image storage="hogehoge.jpg" layer="base" page="back"] |
vague
がその設定の部分となります。上に掲載した画像と比べると、画面に変化が起きている領域が広くなっている事が
確認できると思います。この追加記述の標準の値は64なので、上のソースでは境界線の幅が前のソースに比べ大きく広がっているのです。
ちなみに数値を小さなものにすると、ルール画像で決められた画面切り替えの境界線がくっきりと現われてきます。
Tip今回ルール画像の名前には全角の文字が含まれていました。しかし、実際に使用するときはルール画像名には 半角文字で名前を付け替えることが推奨されています。これは不具合が発生することを防止するためです。 |
[image storage="kyoushitu.jpg" layer="base" page="back"] |
from
で画像がどこからスクロールされてくるかを指定することができます。また、スクロールしたときの
2つの画像の動きをstay
で変更することもできます。
Tip
画面切り替え効果は普通、前景レイヤーや、メッセージレイヤーまでもを巻き込んで効果を行います。これを指定したレイヤーのみで
行いたい場合は |
[次へ進む]
Back to the Lesson([top]>[Lesson]>[Lesson10 画面切り替えの効果編])