【ティラノスクリプト】ティラノスクリプトV5から音楽ファイルの再生までに遅延が発生する場合の対処方法

こちらはティラノスタジオ及びティラノビルダーVer2.xx向けの記事です。

playbgmなどでBGMを再生すると、妙に間が開くことはありませんか？
この記事ではそれらの問題に対する解決策や注意点などをまとめています。

※注意（2021年8月13日追記）
公式より下記ツイートの情報が入ったため、この記事は後日大幅に書き直す予定です。
※2021年8月17日：記事を書き直しました。

先日、ティラノV5とビルダー2.0以降、BGM再生で一瞬の読込が気になる場合

[playbgm html5=true ]　をつけると即再生できるというツイートをしましたがこれは隠しパラメータなので利用は避けてください。
iOSで直前にクリックを入れないとゲームが止まる現象が発生します。

代替え案として→

— シケモクMK (@shikemokumk) August 12, 2021

先程アップしたV510d を適応し
[preload storage="data/bgm/music.ogg"]
のようにプリロードしておくと即再生できます。

html5=trueの場合も、直前にクリックが入っていれば利用できます。

iphone などのiOSブラウザからプレイの場合。PC版は関係ありません。

— シケモクMK (@shikemokumk) August 12, 2021

BGMの再生に時間がかかる

例えばこんな感じのスクリプトを組んだとします。

さて、ゲームが簡単に作れるというから、来てみたものの[p]
[playbgm storage=bgm01.ogg]

誰もいねぇじゃねぇか。[p]
……[p]
帰るか。。。[p]

「来てみたものの」の[p]タグの後、BGMの再生をワンテンポ待ってから「誰もいねぇじゃねぇか」が流れると思います。

これは、ティラノスクリプトV5からplaybgmやplayseなどで音楽ファイルを再生する際に、ファイルすべてを読み込んでから再生する仕様となっている為です。

すべて読み込むまで再生を待つので、ファイルが大きければ大きいほど遅延が発生しますし、特にブラウザ環境では回線の影響も受けてファイルの大きさによっては4～5秒待たされるといった事態が起こります。

ちなみにこの問題はブラウザ版だけでなく、DL版にゲームパッケージングしたものでも、スペックの低いPCでは大きな音楽ファイルだと再生までに1秒近く遅延が発生するケースもあります。

では、どうすればこの問題を解決できるでしょうか？

preloadの使用に関する注意点

真っ先に思い付くことは、preload（先読み）しておくことだと思います。

公式でもティラノスクリプトV5からは音楽ファイルのプリロードが可能とアナウンスされています。

公式ページより引用

例えば次のタグで先ほどのファイルをプリロード可能です。

[preload storage="data/bgm/bgm01.ogg"]

これでpreloadできました。

…と言いたいところですが、実は落とし穴があります。

この記述ではプリロードが正常に動作しません。

正しく動作させるには下記のようにスクリプトを記述する必要があります。

;音楽ファイルをプリロードする場合は、"./"から指定しないと正常に動作しない
[preload storage="./data/bgm/bgm01.ogg"]

注釈の通りです。storageの指定では必ず先頭に"./"を記述しましょう。

ただし、大きなデータのプリロード自体に問題があり、特にスマホ環境では大量の音楽データのプリロードを行おうとするとブラウザがクラッシュしてゲームが立ち上がらない…なんてことも起こり得ます。

技術的なお話になりますが、ティラノスクリプトV5は音楽再生に「howler.js」というオーディオライブラリを使用しています。
画像ファイルなどのプリロードと違い、このhowler.jsでのプリロードはブラウザの更新などでキャッシュが削除される為、必ず再読み込みが発生し、クラッシュを繰り返す…なんてこともザラです。

つまり、結論を言うとBGMで使用するような音楽ファイルのプリロードを大量に行う記述はお勧めしません。

※大量のファイルってどこからが大量なの？　に関しては、環境によりけりなのですが、1～2分の曲であれば5曲くらいであれば大丈夫な印象です。
参考までに10曲くらいになると私の手元にあるiPhone6ではブラウザクラッシュしました。

じゃあどうすればいいの？

playbgm及びplayseには、タグリファレンスにはありませんが「html5=true」というオプションが設定できます。

※追記　この記事を作成した後にリファレンスに追記されていました。

さて、ゲームが簡単に作れるというから、来てみたものの[p]
[playbgm storage=bgm01.ogg html5=true]

誰もいねぇじゃねぇか。[p]
……[p]
帰るか。。。[p]

最初のスクリプトにhtml5=trueを追記した状態です。
この状態でゲームを再生してみましょう。

恐らく理想通りの動きとなったのではないでしょうか？

ティラノライダーやティラノビルダーなどのティラノスクリプトV4系を触ったことがある方ならわかると思いますが、V4とほぼ同じ動作になるかと思います。

html5=trueを入れることにより、ファイルを全て読み込んでから再生する動作から、ストリーミング再生（ファイルを読み込みながら再生する方式）に変更することが可能です。

また、howler.jsとしても大きなファイルを扱う場合は、html5=trueを使用を想定しているみたいです。

html5=trueを使用した際の注意点

注意点としては、iPhoneではfadeinbgmやbgmoptを使用した音量関係の操作が利かなくなります。（Androidは大丈夫です）
また、コンフィグ画面のボリューム調整もhtml5=trueを使用するとiPhoneでは機能しないことを留意しておきましょう。
こちらに関してはティラノスクリプトV4の時と同じ仕様となります。

まとめ

まとめると次の通りです。

・先読みしたい音楽ファイルが多い場合はプリロードは使わない
・その代わりにplaybgmにはhtml5=trueを指定する

シンプルですね。

一応注意点などを理解した上でプリロードを行ってアレコレすることも可能ですが、基本的にはhtml5=trueを指定する方法がトラブルの起こりづらい解決策のひとつとして使えますので、もし音楽再生の遅延が気になっていた場合は試してみてください。