画面遷移時にブラインド効果をつける

８０年代風のゲームを作る上で困ったのが、画面遷移時の効果です。

ティラノビルダーで用意されている効果は、どれも表示画面がゆがんだり伸びたりするもので、それでは古いゲームの雰囲気が出せませんでした。

そこで、以下の素材を用意して無理矢理ブラインド効果をつけてみました。

・フェードイン、フェードアウト用の透過gif

・黒画面

フェードイン・フェードアウトは、段階的にブラインドが上がっていくor下がっていく透過gif画像を作成します。

透過gif画像作成には以下のサイトを使わせていただきました。

アニメーションGIFを作ろう!（https://ao-system.net/gifanima/）

次に、gif画像を表示するためのマクロを作成します。

ただ単にgif画像を表示するならば、png画像等と同じようにimageタグを使えば良いのですが、これには１つ難点があります。

１回目に表示するときは問題ないのですが、２回目以降表示する際はgif画像の続きから再生されてしまうのです。

例えば５秒のgif画像を３秒間表示させて消した後、再びgif画像を表示させると４秒目から再生される、といった感じです。

正確に秒数を指定して表示させようとしましたが、どうしても誤差が生じてしまいました。

これではブラインドが開く途中から始まってしまう事象が起きてしまいます。

そこで、以下のようなgif画像表示用マクロを作成します。

[macro name="image_gif"]
[iscript]
tf.storage = mp.storage + '?' + new Date().getTime();
[endscript]
[image * storage="&tf.storage"]
[endmacro]

一行目でマクロ名を"image_gif"という名前に設定します。

２行目はjavascriptを記述するためのタグです。

３行目はjavascriptで、gif画像が最初に戻るような記述をしています。

５行目では、imageタグで表示する画像を３行目で指定した設定で再生するようにしています。

このマクロはdata/scenario/systemフォルダのbuilder.ksの一番下あたりに記述しました。

最後にティラノビルダー側でスクリプトを記述します。

以下のスクリプトを、背景を変更する場所に記述します。

[image_gif layer="1" x="0" y="0" storage="default/fadeout.GIF" time="0"]
[wait time="900"]
[image layer="2" x="0" y="0" storage="default/black.png" time=0]
[wait time="100"]
[bg time="0" storage="haikei/ship.png"]
[freeimage layer="1" time="0"]
[wait time="100"]
[image_gif layer="1" x="0" y="0" storage="default/fadein.GIF" time="0"]
[wait time="100"]
[freeimage layer="2" time="0"]
[wait time="700"]
[freeimage layer="1" time="0"]

背景より前のイメージレイヤーにフェードアウト・フェードインのgif画像を重ねることでブラインド効果を実現しています。

１行目ではイメージレイヤーの１層目にフェードアウト画像を表示させます。

２行目で完全にフェードアウトするのを待ちます。

３行目でイメージレイヤーの２層目に黒画面を表示するのですが、なぜかこれがないと次の行の背景変更時に一瞬背景が映ってしまう現象が起こったので追加しました。

５行目では普通に背景変更しています。

６行目ではフェードアウト画像を消去し、８行目でフェードイン画像を表示します。

１０行目で黒画面を消し、フェードインが行われます。

合間合間にwaitタグが入るのは、画像切り替えを行うたびに後ろの背景が映ってしまうのを防ぐためです。

かなり無理矢理ではありますが、以上の作業をすることで背景画像を動かさずにブラインドをすることができました。

ただし、動作確認できたのはwindows出力の場合のみで、ブラウザ版では反映されませんでした。。。

今後もっと簡単な方法が見つかれば追記したいと思います。