見出し画像

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

ねこの

前回の記事の冒頭に追記した通り、html5=trueは非推奨となったため記事を書き直しました。

ティラノスクリプトV5（ティラノビルダーV2.xx）にて、playbgmなどで音楽ファイルを再生した際に遅延が気になるという場合の対処方法と注意点を改めて紹介します。

BGMの再生に時間がかかる

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

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

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

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

なぜ遅延が発生するのか？

まずはなぜティラノスクリプトV5から音楽ファイル再生で遅延が発生するかを説明します。

ティラノスクリプトV5からはhowler.jsというオーディオライブラリを使用して音楽ファイルを再生しています。

こちらのhowler.jsは、通常だとファイルを全て読み込み再生する仕様になっています。また、再生の際にデコードと呼ばれる処理も実行するため、マシンスペックの低いデバイスほど遅延が発生します。

遅延の少なかった以前（ティラノスクリプトV4）と同じように再生する方法とその注意点

ティラノスクリプトV4（ティラノビルダーV1.xx）では、音楽ファイルの再生にHTML5Audioという機能で再生されていました。

こちらはストリーミング再生（ファイルを読み込みながら再生する方式）となっていたため、PC環境での遅延はほぼ発生していませんでした。

ティラノスクリプトV5でも、このストリーミング再生を行うためのオプションが用意されています。

キャプチャ

スクリプトはこんな感じになります。

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

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

html5=trueを使用することにより、ストリーミング再生が可能となります。
これはplaybgmだけでなく、playseタグなどでも使用可能です。

ただし、こちらに関しては公式から使用に関して非推奨とアナウンスされています。

iOS環境ではhtml5=trueを使用した際に、直前にクリックを挟まないとゲーム進行が停止するようです。

この仕様を理解して使用するには問題ありませんが、そうでない場合は使用しない方が良いでしょう。

また、html5=trueを使用した際は、iPhoneでfadeinbgmやbgmoptを使用した音量関係の操作が利かなくなります。（Androidは大丈夫です）
コンフィグ画面のボリューム調整もhtml5=trueを使用するとiPhoneでは機能しません。この辺りの仕様はティラノスクリプトV4と同様となります。

preloadタグの使用とその注意点

html5=trueの扱いが難しい場合はこちらの方法を使用してください。

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

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

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

preload（プリロード）タグは、そのファイルを予め読み込む機能となっています。

前回の記事で「preloadタグ使用時には必ずパスの先頭は"./"から記述しましょう」という旨を説明しましたが、ティラノスクリプトVer510d以降であればその必要がなくなりました。(逆に言うとVer510c以前ではパスの先頭に"./"をつけないとpreloadが正常に動作しません。お使いのバージョンが分からない場合は"./"を付けておきましょう。つけて損はありません。例えばサンプルスクリプトの場合では[preload storage="./data/bgm/bgm01.ogg"]となります)
また、特定条件で音楽ファイルのプリロードを2回以上行うとゲームが停止する現象も修正されていますので、こちらが気になっていた場合はVer510d以降のアップデートを推奨します。

サンプルコードでは、「さて、ゲーム～」の直前からファイルの読み込みを行っているので、「来てみたものの」の後の[p]タグをクリックする前までにファイルの読み込みが完了していれば次のplaybgmでは遅延なく再生されます。

ただし、音楽ファイルは画像ファイルと比べるとサイズも大きいので、スマートフォンなどの無線環境ではプリロードにある程度の時間がかかることを考慮しておきましょう。
サンプルコードではplaybgmの少し前に行っていますが、ゲーム開始前にローディング画面を作成し、プリロードを行うのも良いでしょう。ただしファイルサイズが大きいので（略

注意点として低スペックなデバイスの場合、多数のファイルをプリロードするとブラウザクラッシュをしてしまう恐れがあります。（iPhone6以前などの古いデバイス）
環境やほかのファイルの読み込み状況によりけりですが、目安として約20MB以上（128kbpsでエンコードした場合、約20分）のプリロードを行うと一部低スペック環境にてブラウザクラッシュが発生し、強制的にブラウザのリロードが行われたり、エラー画面が発生する恐れがあります。
これは一度に大量のファイルをプリロードした場合だけではなく、ゲームを通してシーン毎にプリロードを行った際でも十数曲目をプリロードしたタイミングでブラウザのリロードが突然行われる、といった現象に見舞われます。「スマホ環境でゲーム中に突然リロードが走った……」という現象が出た際にpreloadタグがその前後にある場合はプリロード過多を疑ってみてください。

補足：ゲーム開始時に数十曲の音楽ファイルをプリロードを行った場合、低スペック環境では前述の通り強制的にリロードやブラウザクラッシュが発生し、ゲームそのものが起動できないといった状況にもなるので注意しましょう。
また、一度プリロードが完了していれば、以降preloadタグを使用する必要はありませんが、同様のファイルであればプリロードを行ってもクラッシュはしません。

その為、ブラウザ環境でのゲームリリースを考慮した場合、preloadタグを利用するBGMは演出上、どうしても遅延を発生させたくない場合に絞って利用することをお勧めします。

なおPC環境に限定してリリースする際はブラウザクラッシュに関して余程大量のプリロードを行わない限り大丈夫ですので気にせず行って大丈夫です。

まとめ

A案：iOS環境での動作を理解した上でhtml5=trueオプションを利用する（公式非推奨）

B案：preloadタグを利用し、予めファイルを読み込んでおく（ただし低スペック環境を考慮した場合、大量の読み込みには注意）

以上となります。
前回の記事ではＡ案を推していましたが、状況が変わりましたので基本的にはＢ案をお勧めします。

ゲームを楽しんで貰えたり、記事やプラグインがお役に立てましたらサポート（投げ銭）を頂けると幸いです！