[preload]タグのwaitパラメータが効くようにしてついでに動画ファイルもプリロードできるようにする【ティラノスクリプト】

2021/07/26追記：ティラノスクリプト公式の方で修正が入りました。

ティラノスクリプトをアップデートしました。
V507c。主にバグ修正です。
[glyph fix=false]のときに画像が反映されない現象の修正。[preload wait=false]が効かない現象の修正と動画のpreload対応。[link]タグ時メッセージ非表示を抑制。

よろしくお願いいたします。https://t.co/RPpseHSAsR

— ティラノ（公式）@ノベルゲーム開発ツール (@tyranobase) July 26, 2021

タイトルが長い！！！！！！！！！！

[preload]タグのwaitパラメータがリファレンス通り動いていない問題

先日公開したこちらの記事

に、このようなコメントをいただきました。

んで、検証してみたら確かに「wait=false」を指定しているのに、指定した全ファイル読み込んでから次のタグに進んでいました。

;システム画像系プリロード
[iscript]
tf.preload = [
   "data/fgimage/circleicon.png",
   "data/video/title.mp4",
   "data/image/title/bg.png",
   "data/image/title/btn_config_01.png",
   "data/image/title/btn_exit_01.png",
   "data/image/title/btn_extra_01.png",
   "data/image/title/btn_load_01.png",
   "data/image/title/btn_start_01.png",
   "data/image/title/gradation.png",
   "data/image/title/itk.png",
   "data/image/title/syokusyu.png",
   "data/image/backlog/bg_log.png",
   "data/image/config/bg_config.png",
   "data/image/extra/bg.png",
   "data/image/cg/bg.png",
   "data/image/save_load/bg_save.png",
   "data/image/save_load/bg_load.png",
   "data/image/voice_favorite/bg_voice.png",
]
[endscript]
[preload storage="&tf.preload" wait="false"]

↑のスクリプトを実行してみると…

このように、全ファイル読み込むまで次のタグに進んでいません。

というわけで、今回はこれをタグリファレンス通りの「wait=falseを指定時は非同期でファイルをプリロードする」動きに変更していきます。

あとついでに、[preload]タグでは画像ファイル、音声ファイルがプリロードできるわけですが、動画ファイルは対応していませんので、こいつも対応してやります。

例によってティラノスクリプト本体に手を加えているので、ご利用は自己責任でお願いします。

非同期でプリロードできるようにする

//画像ファイルの事前読み込み
tyrano.plugin.kag.tag.preload = {
   vital : ["storage"],
   pm : {
       storage : "",
       wait : "false"
   },
   start : function(pm) {
       var that = this;
       if (pm.wait == "true") {
           this.kag.layer.hideEventLayer();
       }
       var storage = pm.storage;
       //配列で指定された場合
       if ( typeof storage == "object" && storage.length > 0) {
           var sum = 0;
           for (var i = 0; i < storage.length; i++) {
               that.kag.preload(storage[i], function() {
                   sum++;
                   if (storage.length == sum) {
                       //すべてのプリロードが完了
                       if (pm.wait == "true") {
                           that.kag.layer.showEventLayer();
                           that.kag.ftag.nextOrder();
                       }
                   }
               });
           }
           if (pm.wait == "false") {
               that.kag.layer.showEventLayer();
               that.kag.ftag.nextOrder();
           }
       } else {
           this.kag.preload(pm.storage, function() {
               if (pm.wait == "true") {
                   that.kag.layer.showEventLayer();
                   that.kag.ftag.nextOrder();
               }
           });
           if (pm.wait == "false") {
               that.kag.layer.showEventLayer();
               that.kag.ftag.nextOrder();
           }
       }
   }
}
TYRANO.kag.ftag.master_tag.preload = TYRANO.kag.tag.preload
TYRANO.kag.ftag.master_tag.preload.kag = TYRANO.kag

はい、こんな感じに変更しました。
[preload]タグの改造です。

んでもう一度実行してみると、

このように非同期でプリロードされていますね。

動画ファイルもプリロードできるようにする

こちらはこんな感じに変更します。
なお、こちらの変更は[preload]タグではなく、[preload]タグから呼び出しているティラノスクリプトのメソッドの変更です。

tyrano.plugin.kag.preload = function (src, callbk) {
   var that = this,
   ext = $.getExt(src);
   if ("mp3" == ext || "ogg" == ext || "m4a" == ext) {
       let obj = new Howl({
           src: src,
           preload: !0
       });
       obj.on("load", (function () {
           callbk && callbk()
       }));
       obj.on("loaderror", (function () {
           that.kag.error("オーディオファイル「" + src + "」が見つかりません。場所はフルパスで指定されていますか？ (例)data/bgm/music.ogg");
           callbk && callbk()
       }))
   }else if("mp4" == ext || "ogv" == ext || "webm" == ext){
       //動画ファイルプリロード
       $("<video />").attr("src", src).on("loadeddata", (function (e) {
           callbk && callbk()
       })).on("error", (function (e) {
           that.kag.error("動画ファイル「" + src + "」が見つかりません。場所はフルパスで指定されていますか？ (例)data/video/file.mp4");
           callbk && callbk()
       }))
   }else{
       $("<img />").attr("src", src).on("load", (function (e) {
           callbk && callbk()
       })).on("error", (function (e) {
           that.kag.error("画像ファイル「" + src + "」が見つかりません。場所はフルパスで指定されていますか？ (例)data/fgimage/file.png");
           callbk && callbk()
       }))
   }
}
TYRANO.kag.preload = tyrano.plugin.kag.preload

実際に変更を自分のプロジェクトでも適用する際は、コード部分（黒背景部分）のjavascriptを適当な名前で保存してfirst.ksとかで[loadjs]してください。

waitパラメータ対応、動画ファイル対応、両方とも同じファイルにまとめても大丈夫です。