【ティラノスクリプト】ローディング画面をつくる（プログレスバー付き）

これをつくります（説明投げた）。

プリロードやらなにやらのやり方は以下を参照してください。

［preload］画像ファイルの事前読み込み
【ティラノスクリプト】画像のプリロードをする（＆ファイル名一括取得の方法） - memo
【ティラノスクリプト】画像ファイルを一括で取得するバッチファイル（Windows専用） - memo

※色んなやり方があります。参考程度で。
※タグを改造しています。自己責任でお願いします。

first.ks

まずはテキストとプログレスバーを表示します。

[layopt layer="0" visible="true"]
[ptext layer="0" text="Now   loading..." x="0" y="200" width="960" align="center"]
[ptext layer="0" name="loading_text" text="0%" x="0" y="250" width="960" align="center"]
[image layer="0" name="loading_bar" storage="base.png" left="330" top="300" width="0" height="10"]
[iscript]
$(".loading_bar").css({
	"background-image": "linear-gradient(-45deg, #fbfdfd 25%, #a5d6e1 25%, #a5d6e1 50%, #fbfdfd 50%, #fbfdfd 75%, #a5d6e1 75%, #a5d6e1)",
	"background-size": "20px 20px",
});
[endscript]

base.pngは透明な1px×1pxの画像です。これを引き延ばしてバー画像にしています。背景は今回はCSSグラデーションを使ってボーダー柄にしていますが、単色でも画像でもなんでも良いです。

画像のプリロードをします。必ず配列を渡してまとめてロードしてください。

[iscript]
f.preload_images = [

"data/bgimage/room.jpg", 
"data/bgimage/rouka.jpg", 
//（中略）
"tyrano/images/system/saveslot2.png", 
"tyrano/images/system/thumbnail_save.png", 

];
[endscript]

[preload storage="&f.preload_images" wait="true"]

プリロードが終わったらテキストとプログレスバーを消去してタイトル画面に移動します。

[wait time="1000"]
[freeimage layer="0"]
[jump storage="title.ks"]

ここまでは通常のプリロードですね。
次はタグを改造して、プリロードの進行度に合わせてテキストとプログレスバーの長さが変化するようにしてみます。

kag.tag_system.js

tyrano.plugin.kag.tag.preload

  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++;
        /* 追加ここから */
        var loading_text = Math.round(sum * (100 / storage.length));
        $(".loading_text").html(loading_text + "％");
        var loading_bar_width = Math.round(sum * (100 / storage.length) * 3);
        $(".loading_bar").css("width", loading_bar_width + "px");
        /* 追加ここまで */
        if (storage.length == sum) {
          if (pm.wait == "true") 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()
    })
  }

画像をプリロードする度にテキストとプログレスバーの長さを増やしています。プログレスバーは最終的な横幅が300pxになるので、計算した値を3倍しています。
Math.roundを使ったりしていますが、まあ正確な数値である必要はないので整数になるならなんでも良いかと……。最終的にきちんと「100％」「300px」になればオッケーです。

今回は画像の数が124程度（サイズは22MBくらい）でテストしたのですが、もっと多くなるとプリロードにもそれなりの時間がかかってしまします。最初に全部読み込んでしまうか、必要な分だけ少しずつ読み込んでいくか……悩みますねー。