TACS講座#1-3 ちらつかない背景の画像切り替え方法について


ここではユーザーが自由に作成できるユーザー関数について説明します。

何度も実行する一連の動作をまとめておけば、そのまとめたものを命令するだけで一連の動作を行ってくれるようになります。
このまとめたものを、TACSではユーザー関数とよびます。
それでは、その使用方法を説明致しましょう。



■STEP1.ちらつかない画像表示の基本
左図は当サイトにて公開しているAVGサンプル「消えたドーナッツ」の
タイトル画面表示時のレイヤーの重ね合わせ順を図解したものです。
上の方が画面手前、下の方が画面奥として表示されます。

ちなみに各レイヤーに読み込んだデータの詳細は以下の通り。
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番レイヤーに透明なレイヤーを読み込んで、また上記と同じように動作されば、
ずっと同じような表示できますね。



■まとめ
具体的にはシナリオファイルを以下のように記述すれば、ちらつかない画像表示が可能となります。
PIC 6,data/blank.swf
FRAME_CHANGE2 5,6
PIC 5,data/cg02.jpg
これは5番フレームと6番フレームを使用する場合の表記方法です。他のフレームを利用する場合は、番号を適当に変更して下さい。
動作の前提として、当サイトのライブラリにある、blank.swfが必要となります。
PIC 5,data/cg02.jpg 命令が実際に好きえる画像データのファイル名です。ここのみを書き換えればよいわけですね。


応用として、マスク付きで画像表示する方法はこのように表記する事で可能となります。
PIC 6,data/blank.swf
FRAME_CHANGE2 5,6
PIC 5,data/cg03.jpg,0
MASK 5,1
これは5、6番フレームを使用する場合の表記方法です。他のフレームを利用する場合は、番号を適当に変更して下さい。
動作の前提として、当サイトのライブラリにある、blank.swfが必要となります。
PIC 5,data/cg03.jpg,0 というふうに語尾に ,0 とつけたことによって、透明状態で読み込んでいます。
続く命令の MASK 5,1 で、5番レイヤーに表示完了した画像の透明状態を自動的に解除してマスク効果で表示させています。
PIC 5,data/cg03.jpg,0 命令が実際に好きえる画像データのファイル名です。ここのみを書き換えればよいわけですね。


画面表示の動作サンプルとしては下記リンクの、選択肢「画像を表示してみる」のサンプルがわかり易いと思います。

TACS for Flash 動作確認用シナリオ(※ポップアップします)