■STEP1.ちらつかない画像表示の基本
左図は当サイトにて公開しているサンプルゲーム日向探偵事務所日記 11時8分の タイトル画面表示時のレイヤーの重ね合わせ順を図解したものです。 上の方が画面手前、下の方が画面奥として表示されます。 ちなみに各レイヤーに読み込んだデータの詳細は以下の通り。 30番 … ログ閲覧ボタン 0番 … 選択肢ウインドウ 1番 … メッセージウインドウ 5番 … 背景画像 |
|
さて上記の状態のから、新たに背景画像を読み込もうとします。 新しい背景画像を5番レイヤーに読み込もうとすると、 まず古い画像が消え、その後新しい画像の読み込み完了までは5番レイヤーが透明になってしまいます。 そうなると、5番レイヤーの後ろが、透けてみえてしまうという、ちょっとかっこわるい状況になってしまいますね。 これを防ぐ方法は、 5番に読み込むという事はせずに、5番レイヤーより上のレイヤー番号に新しい画像を読み込めば良い訳です。 左図では、4番に読み込んでいますね。 これで読込み中に背景画像の後ろが透けてみえちゃうという事が防げました。 |
|
ですが、
この方法には弱点が一つあります。 この調子で、次の背景画像読込み時にも、後ろが透けないように読み込んでいこうと考えると、 左図のように、3番レイヤーに次の画像を読み込む事になります。 この方法では、レイヤーがいつかは足りなくなる訳です・・・ |
■何度でも使用できる書き方
さてそれでは、上記のような事にならない方法を考えてみましょう。 では再び最初の状態の図から説明致します。 |
|
まず、現在背景画像が表示されている5番レイヤーのより奥のレイヤーに透明なレイヤーを読み込みます。 当サイトのライブラリにある、blank.swfなどお勧めですね。 非常に軽いデータなので、 一瞬で読み込んだレイヤーを透明にしてくれるでしょう。 左図の例では6番レイヤーに透明なレイヤーを読み込んでいます。 |
|
次に背景画像のレイヤーと、透明なレイヤーを入れ替えます。 左図の例では5番と6番のレイヤーを入れ替えていますから、TACS命令の表記は、 FRAME_CHANGE 5,6 ですね。 |
|
そうすると、このようにレイヤーが入れ替わります。 …もうこの先は予想ついてきたでしょうか。 |
|
これで背景画像の上に透明のレイヤーが確保できました。 あとはこの透明レイヤーに画像を読み込めば、 後ろの背景画像が透けないで新しい画像が読み込めちゃいます! 次に新しい画像を読み込む時には、今度は5番に透明なレイヤーを読み込んで、 また上記と同じようにレイヤーを入れ替えれば良いわけです 。 これで何度でも新しい画像データを読み込めますね。 |
|
ですが、
この方法にも問題があります。 それは 一回画像データを読み込む毎に、5番と6番の上下関係が逆になるという事です。 シナリオ製作者は、5番と6番がどちらが上かを常に注意しておく必要があるわけです… |
■利便性を追求した書き方(Ver16より追加された機能について)
さて、
上記の方法で表示自体の問題は解決したのですが このままではシナリオ製作者に負担をかけてしまうという難がのこる仕様となっております…ね。 それではその負担も解消する方法を考えてみましょう。 では再び最初の状態の図から説明致します。 |
|
まず、6番レイヤーに透明なレイヤーを読み込みます。 ここまでは先程と一緒ですね。 |
|
次に背景画像のレイヤーと、透明なレイヤーを入れ替えます。 ここでver16から追加された命令、FRAME_CHANGE2 を 使用します。 左図の例では5番と6番のレイヤーを入れ替えていますから、TACS命令の表記は、 FRAME_CHANGE2 5,6 ですね。 |
|
FRAME_CHANGE2 を使った場合のレイヤ構成は左図のようになります。 5番と6番のレイヤーの内容は入れ替わりましたが、番号自体はいれかわってませんね。 これで5番に画像データを読み込めば、目的達成ですね! |
|
以降の画像変更時は、 6番レイヤーに透明なレイヤーを読み込んで、また上記と同じように動作されば、 ずっと同じような表示できますね。 |
- ■まとめ
- 具体的にはシナリオファイルを以下のように記述すれば、ちらつかない画像表示が可能となります。
これは5番フレームと6番フレームを使用する場合の表記方法です。他のフレームを利用する場合は、番号を適当に変更して下さい。PIC 6,library/blank.swf
FRAME_CHANGE2 5,6
PIC 5,data/cg02.jpg
動作の前提として、当サイトのライブラリにある、blank.swfが必要となります。
PIC 5,data/cg02.jpg 命令が実際に好きえる画像データのファイル名です。ここのみを書き換えればよいわけですね。
応用として、マスク付きで画像表示する方法はこのように表記する事で可能となります。
PIC 7,library/mask640-480-01.swf
PIC 6,library/blank.swf
FRAME_CHANGE2 5,6
PIC 5,data/cg03.jpg
FRAME_MASK 5,7
動作の前提として、当サイトのライブラリにある、blank.swfとmask640-480-01.swf必要となります。
PIC 7,library/mask640-480-01.swf 命令でマスクファイルを読み込んでいます。これを任意のファイル名に変更すれば、好きなマスクを使用できます。
PIC 5,data/cg03.jpg 命令が実際に好きえる画像データのファイル名です。ここのみを書き換えればよいわけですね。
さらに、動作サンプルを用意しました。下記リンクよりご確認頂けると、わかり易いと思います。
ちらつかない画像表示サンプル(※ポップアップします)