Phaser3 + TypeScript + Capacitorでスマホゲームアプリ開発を試す
Makoto IshidaPhaser3チュートリアル
Phaser3 + TypeScriptのテンプレート
上のテンプレートをクローンすると、
npm start
とするだけでブラウザで http://localhost:1234 を開いて確認可能。
ただこれだとローカルPCからしか開けないので、 package.jsonを
"start": "parcel src/index.html --host 0.0.0.0 -p 8000",
のように変更しておくと同一LAN内のスマホ・タブレットのブラウザからも
http://[PCのIPアドレス]:8000
で確認可能になるので便利。
スマホ・タブレットのブラウザで実行したときにBGM・効果音が上手く再生されない問題
-
PC上のブラウザ（Chrome/Safari）
→ 問題なし -
Android上のChromeブラウザ
→ 再生はされるがアプリを閉じてもBGMが止まらない。 -
iOS上のChrome/Safariブラウザ
→ 「Error: Audio key "bgm_title" missing from cache」というエラーでアプリが起動しない。
iOSの問題については下の記事あたりにヒントがありそうなので深堀りすれば直せそう（？）
https://stackoverflow.com/questions/63864590/no-sound-in-phaser-3-app-when-using-capacitor-to-build-for-ios
https://phaser.discourse.group/t/audio-works-on-web-but-not-ios/3677
ただし今回は下記の通りCapacitor (https://capacitorjs.com/)でネイティブアプリ化するので、Capacitorの「Native Sound Plugin」を使って対応してみる。
スマホネイティブアプリ化
Capacitorを使ってPhaserアプリをネイティブ化する
Native Soundプラグイン
このプラグインを使えばサウンドの問題は簡単に解決するかと思ったが、一発では上手く行かずいろいろと試行錯誤が必要だった。
Native Soundプラグインのテスト
まずはPhaser無しでCapacitor ＋ Native Soundプラグインのみで意図した通りに動くかのテスト。
テストのために作ったソースコードはこちら。
iOS対応のメモ
- サウンドファイルの保存先は「/ios/App/App/sounds」にする。
もしくは「/ios/App/App/public/sounds」など/ios/App/App/の配下であれば任意のフォルダに保存可能。（もちろん load するときに保存先のパスを正しく指定する必要がある。）
ただ、読み込み時のパス指定をAndroidと揃えるために/ios/App/App/直下のsoundsフォルダにしておくのが無難そう。
- サウンドファイルのフォーマットはBGMも効果音も全て「mp3」にすること。
Android対応のメモ
- サウンドファイルの保存先は「/android/app/src/main/assets/sounds」（固定）にすること。
/android/app/src/main/assets/public/sounds のようにassets直下ではない所にsoundsフォルダを配置するとどうも上手く読み込まれない模様。
-
サウンドファイルのフォーマットは、BGMは「ogg」、効果音は「wav」とする。
最初全てoggで試したが、音声ファイルのサイズが関係しているのか、ogg形式への自分の変換の仕方が悪かったのか、BGMの音楽（サイズ1MB以上、長さ3分程度）は問題なく再生されるのに効果音（10〜40KB、1秒〜7秒程度）が再生されないという現象が起きた。首を傾げながら試しに効果音だけwav形式に変えてみたら問題なく再生されるようになった。 -
BGMをループ再生したい場合は、一旦
NativeAudio.playを実行してから直後にNativeAudio.loopを実行する必要がある。（Androidのみ）
if (isAndroid()) {
// Androidの場合だけなぜかloopより先にplayを一旦呼ばないとループ再生されない。
NativeAudio.play({ assetId: key, time: 0 });
}
NativeAudio.loop({ assetId: key });