【ティラノスクリプト】[filter]をゆっくり変化させる

レイヤーモードやらフィルターやら、最近は画像の演出関係の機能が充実して嬉しい限りですね！すごーい！ティラノスクリプトは演出効果の高いゲームをつくれるフレンズなんだね！（使い方あってる？）

で、レイヤーモードは画像を重ねているのでゆっくり時間をかけて合成したりできるんですが、フィルターは画像に直接効果をかけている関係でそのままでは一瞬で切り替わる仕様になっています。

f:id:onigirimgmg:20170225034854g:plain

こいつをどーにかしてゆっくり変化させられないかな？と思って、色々試してみたというお話です。自分向け＆ちょっと？？？なところがあるので、興味のある方は自己責任でお試しください。

背景だけの変更なら[trans]を利用すればできます。

[backlay layer=base]
[bg storage="room.jpg" time=0]
[filter sepia=100 layer=base page=back]
[trans layer=base time=1000]
[wt]

青字の部分は変化させたい背景と同じ画像を指定します。その後フィルターをかけるのですが、ここで裏画面（page=back）を指定するのがポイントです。これで見えない裏画面の方にセピアのフィルターがかかった状態になります。

それから[trans]で裏画面を徐々に表に表示すると、ゆっくりセピア色に切り替わっているように見えます。

f:id:onigirimgmg:20170225034746g:plain

キャラクター（前景レイヤ）はどうも一度透明になってから切り替わる仕様（詳細は以下の記事）なので、この方法で変化させると違和感が出てしまいます。

【ティラノスクリプト】トランジションの仕様について - memo

f:id:onigirimgmg:20170225035414g:plain

なにかいいアイディアはありませんかね。（丸投げ）

さて、ここで本体の改造をバリバリやっちゃう系のクレイジーなティラノマニアの方のために、タグを直接いじることでゆっくり効果をかける方法を紹介しよう。もちろん自己責任です。アップデートで仕様が変わる可能性もあるので気を付けようネ。

kag.tag_ext.js

tyrano.plugin.kag.tag.filter = {
vital: ["layer"],
pm: {
（中略）
blur: "", //カンマ忘れない
time: "1000" //追加
},
start: function(pm) {
（中略）
j_obj.css({
"-webkit-filter": filter_str,
"-ms-filter": filter_str,
"-moz-filter": filter_str, //カンマ忘れない
//追加ここから
"-webkit-transition": pm.time +"ms -webkit-filter linear",
"-ms-transition": pm.time +"ms -ms-filter linear",
"-moz-transition": pm.time +"ms -moz-filter linear"
//追加ここまで
});
j_obj.addClass("tyrano_filter_effect");
this.kag.ftag.nextOrder()
}
};

使うときはこんな感じ。

[filter sepia=100 layer=base time=1000]
[filter sepia=100 layer=0 name=akane time=1000]

これだと背景とキャラクターに同時に効果がかかります。wait（終了を待つ）パラメーターは追加していないので、終了待ちしたいときは[wait]で時間を指定してください。（超アナログ）

[filter sepia=100 layer=base time=1000]
[wait time=1000]
[filter sepia=100 layer=0 name=akane time=1000]

こんな感じですね。

このままだと[free_filter]を使って効果を削除するときに、[filter]で指定した時間がそのままかかります。（例の場合は1000ミリ秒かけて効果を削除します）

消す時間も指定したいよな～って思ったので、気になる方は[free_filter]の方も改造してください。同じことやってます。

tyrano.plugin.kag.tag.free_filter = {
vital: [],
pm: {
layer: "",
page: "fore",
name: "", //カンマ忘れない
time: "1000" //追加
},
start: function(pm) {
（中略）
j_obj.css({
"-webkit-filter": "",
"-ms-filter": "",
"-moz-filter": "", //カンマ忘れない
//追加ここから
"-webkit-transition": pm.time +"ms -webkit-filter linear",
"-ms-transition": pm.time +"ms -ms-filter linear",
"-moz-transition": pm.time +"ms -moz-filter linear"
//追加ここまで
});
j_obj.removeClass("tyrano_filter_effect");
this.kag.ftag.nextOrder()
}
};