見出し画像

事前プリロードとテキスト配置でローディングバーを作る話/ティラノビルダー備忘録

弐藤(ニトー)

※自分用の備忘録のため内容が初歩的な場合があります※

-----------------------------------
>>>12/10追記
この記事の“プリロードの範囲”と“プリロードのタイミング”について、補足のクソ長い記事を書きましたのでもしよろしければ後で覗いてみてくだされ…！

-----------------------------------




プリロードの範囲


通常ならばティラノビルダーが自動生成でシナリオのド頭にひっそりと仕込んでくれる[preload]タグ。シナリオをド頭から再生すればそのシナリオで使用する背景画像や立ち絵が勝手にプリロードされます。
(仕込まれた[preload]タグはビルダー編集画面では見れないので、エディタソフトを使ってシナリオファイルを開いて見る)

でもシナリオをド頭から使わない場合(ジャンプでシナリオ途中のラベルに飛んできた場合や、コールでシナリオ途中だけ通ってリターンする場合など)、[preload]タグの部分が飛ばされてしまうので使う画像がプリロードされません。

それに加えて自動生成のプリロードでは画像ボタンに使う画像は拾われないっぽいです。

そうなると急ぎで表示したい画像があるのに読み込まれるまでゲームが止まるとか、画像ボタンを一気に並べたいのに読み込まれた順に並んでいくとか、特に通信回線依存のブラウザゲームで公開している場合はそのようなことが顕著に表れます……

それは困るゥ！！

ということで今までずっと自動生成のプリロードに頼っていたのですが、プリロード漏れする画像たちを集めてゲーム開始時の「事前プリロード」へ挑戦することにしました。

とにかく「すべての素材」ではなく「漏れた素材」だけ！

でないと一度に大きすぎるプリロードを行うとスマホでは動かなくなったりすることがあるそう。(六夏様のFANBOX：３、データをプリロードして良かったこと悪かったこと　より)

なおBGMの音楽ファイルのプリロードはティラノビルダーもV5(ver.2.0)から可能になりましたが、プレイヤー様のパソコンのスペックによっては数曲でクラッシュする可能性など注意点が諸々あるのでねこの様のnoteをお読みになることをおススメします……！！

そして何よりティラノビルダー生みの親であるシケモク様が

とおっしゃっているので、やはり漏れた分だけを事前プリロードすれば十分かと思います。


プリロードのタイミング


ところで以前は「ゲーム起動時に事前プリロードを行う」のが割とフツーな様子だったのですが、読み込みが長くてゲーム起動に失敗したと勘違いされウインドウを閉じられちゃったり、閉じられないようにローディング中の画面を作るのが初心者にはちょっと難しかったりしました。

またノベルゲームコレクションも進化しスマホ対応を進めています。
プレイヤー様のネット環境がwi-fiではなく「出先のスマホ回線」である可能性も増えていきます……！

プレイヤー様も出先でブラウザゲームをする以上、通信量を使うことはご承知とは思うのですが、プランによっては通信料が嵩まないか心配！！(※特に私はwi-fi生活なので通信費が使った分だけプラン)

思えばあらゆるソシャゲは「アップデートのデータをダウンロードしますか？wi-fi環境下でのダウンロードをおすすめします」って聞いてくれます。それだけデータが大きいからでもあるのですが。

ただ、ゲーム起動時に謎の時間をかけて事前プリロードを行うより、ゲームのスタートボタンを押したら「これからゲームデータをダウンロードするよ」というお知らせを挟んで、それから事前プリロードを行った方が良いのでは……？と思うのでした。

作ってみた(わかりにくくなってしまった！)
でも冒頭で述べた通りプレイ途中もビルダーの自動生成のプリロードが入るので、通信発生するのは最初だけじゃないよってことも書かないとですねえ。

長くなってしまいましたが、次からやっと事前プリロードの部分を作ります……！！



プリロードの記述を教わる


ではゲーム開始部分に置く事前プリロードのコードを作っていきたいのですが

まず自動生成のプリロードをエディタソフトで覗きます

追記：記事ではATOMを使っていますがサポート終了に伴い現在はVSCodeを使っています！エディタソフトは下記の「編集ソフトについて」からどぞ


プロジェクトファイル→data→scenario→シナリオ(ここではmap.ks)

スクリーンショット (264)

シナリオのド頭で呼び出しがかかっています。
それはどこにあるのかというと

プロジェクトファイル→data→scenario→system→_シナリオ(ここでは_map.ks)

スクリーンショット (265)

ここに生成された[preload]タグがあります。
この部分が呼び出されたらプリロードが実行されるわけですね。

しかしこの記述方法、行数が増えれば増えるほど効率が悪いようで……

もう常にねこの先生にはお世話になりっぱなしです！！

データサイズの大小ではなく件数で嵩んでいくという読み込み時間。
私も事前プリロードする素材数を数えたら意外と多かったので、パターン３を慎んで使わせて頂くことにいたしました。

では早速コードを作りましょお！

エディタソフトで「ド頭の処理が飛ばされてプリロード漏れしてしまうシナリオの_シナリオ.ks」を開いて「コードをコピーして集める」
↓
コピーして集めたコードの""の間を下の見本のコードの""の間に突っ込む

[iscript]
tf.preload_file = [
"./data/fgimage/default/aaa.png",
"./data/fgimage/default/bbb.png",
"./data/fgimage/default/ccc.png"
];
[endscript]
[preload storage="&tf.preload_file" wait=true]

これでプリロード漏れしていた画像たちの事前プリロードが完成！


※プリロードの自動生成対象外の画像ボタンも必要に応じてパス指定(これはコピペ元がないので自分で打つ)

[iscript]
tf.preload_file = [
"./data/image/button1.png",
"./data/image/button2.png",
"./data/image/button3.png"
];
[endscript]
[preload storage="&tf.preload_file" wait=true]

これで画像ボタンも事前プリロードが完成！


ローディングバーを作る


やっと事前プリロードのコードが出来上がったので、次は読み込みでお待たせしている間にゲームがフリーズしたと間違えられないよう、ローディングバーを作ります！

しかしローディングバーって作るの難しいんでしょ？と様々なブログを拝見して感じていたのですが、ふと簡単な方法を思いつきました。

それがテキスト配置だけで作る「原始人ローディングバー」

です。(？)

※このツイートではまだプリロードのコードが古いままなので注意


テキスト配置コンポーネントで

0%■■■■■100%

と、プリロードの合間に■を一文字ずつ置くだけ！

正直最初は■の文字化けを恐れていたのですが、スマホで見たらフォントの都合か行間が詰まって逆にバーらしくなっていて笑いました。

ではビルダーの編集画面です↓

スクリーンショット (261)

プリロード行数でだいたい４つに分けて事前プリロードのコードを作成し、■と■の間に置きます。0%と100%は最初に表示し、■は隣接するように一文字ずつ配置……

プリロードはwait="true"になっているので、プリロードが完了したら一文字ずつ■が表示され、ローディングバーのようになる、という感じです。

スクリーンショット (262)

シンプルイズベスト感。(？？？)

多分ハートや三角だとスマホで文字化けまたは絵文字に変換されて変なことになると思うのでご注意ください！


ちなみに、本当にプリロードされたのか確認する方法を探してみたのですが

スクリーンショット (199)_LI

おそらく虫さんマーク(デバッグ)を押した時に出てくるウインドウのタブを「Network」に切り替えたら出てくるリストがそれっぽいです！たぶん！間違ってたらすみません！


※使用ソフト：ティラノビルダーv202



余談


実はこのプリロードの実装中、夫の都合で引っ越しがありネット本開通するまでレンタルwi-fiで暮らしていたのですが、

回線速度が死ぬほど遅くて

プリロード漏れした画像のプリロードだけでこの時間がかかりました！！

ツイートの通り、ここに背景やBGMが加わったら恐ろしいほど時間がかかることに……プレイヤー様のネット環境はここまで酷くないと願いたいのですが、やはり事前プリロードは厳選しないとですねと身を以て体験しました。