無料DAW「LMMS」を使ったBGM・SE制作と組み込み【CFW P2P心理戦ゲーム開発記】 #19

はじめに
今回は少し趣を変え、音声周り（DAWでの作曲や効果音作成）を進めていこうと思います。プログラム側では、第17回で実装した通り AudioMixer を使い、「音声キー」（レジストリに登録した音声ファイル名）を指定してBGMとSEを再生できる環境がすでに整っています。

1. lmmsで作曲

LMMSはwindowsおよびlinux,macで使える無料DAWです。無料で使える＋有料のDAWもいいのですが機能が多すぎて私には手に余るので、LMMSがシンプルで気に入っています。

LMMSの導入について インストールや基本的な使い方はこちらの記事で紹介しています。
【無料DTM】LMMSのインストールから作曲まで：初心者でも「きらきら星」が作れる基本ガイド

2. メインBGM（仮）の打ち込み

メインBGM(仮）の打ち込み

作曲については、コード理論などを聞きかじった程度のアマチュアなのであまり専門的なことは語れないのですが……。今回のゲームBGMを作るにあたり、「シンプルさ」と「データ転送しているような通信感」を出したいと考えました。

こだわりポイントとしては、シンプルなシンセサイザーの音をベースにしつつ、LMMSにデフォルトで入っているプラグイン「BitInvader」（インベーダーゲームのようなレトロな音が出せる音源）を一定間隔で鳴らすことで、昔のモデムのダイアリング風のアクセントを加えています。

音声サンプル(あくまでサンプルで後でちゃんと作ります。）

本実装では、Kraftwerk（クラフトワーク）の名曲『Pocket Calculator』のような、レトロフューチャーでシステムチックな雰囲気を作れたら面白いなと思っています。

3. SEを作る

SEも、上記のメインテーマ（仮）の世界観に合わせたものを作っていきます。そのため、できるだけ使用する楽器数は少なくし、基本はシンプルなシンセで構成。そこにアクセントとして少しサンプリングした音源を混ぜていこうかなと考えています。

SEはUIのアニメーションとタイミングを合わせる必要があるため、現段階では一旦「仮」として作成しています。

simple SE

SE音声サンプル(あくまでサンプルで後でちゃんと作ります。）

プログラム側からの呼び出し

単一のソフトウェアとして起動するPCゲームやスマホアプリなら、ゲームを起動した時点からBGMを鳴らし始めることができます。しかし、今回のゲームのようなWEBベース（ブラウザ動作）だと、ユーザーのアクション（画面のクリックやタップ）がないと音声を再生してはいけないという厳しい規則（Autoplay Policy）が存在します。

(WEBゲームとかで、”クリックして開始“みたいな表記を見たことがある人も多いのではないでしょうか？これは、このAutoplay Policy対策だったりします。)

そのため、無音の状態でゲーム画面をロードさせた後、「マッチング開始」や「ゲームスタート」などのユーザーが自発的にクリックするボタンをトリガーにして、AudioMixer のロックを解除し、BGMの再生を開始するような作りにしています。

音声のレジストリ登録

#17にて実装した音声アセットに音声(.wav)を配置し、登録JSを自動生成。ゲーム側はこれを参照して音声を随時ロードすることで音声をid管理(ファイル名)管理できるようにしています。
アイテム管理のデータ駆動化と音声ID自動生成【CFW P2P心理戦ゲーム開発記】 #17

// 音声の実体ファイルの配置
assets/audio/bgm/logical-hlh-sample-001.wav
assets/audio/se/logical-hlh-se-001.wav

// デプロイ前に
// register.ts とかで[Audioファイルのリスト]を作る。
// 実行時は[Audioファイルのリスト]を参照して音声を呼び出す。

ゲーム側はこれを参照してロードすることで、音声をファイル名（ID）で安全かつ動的に管理できるようにしています。

音声の呼び出し

音声の呼び出しはID指定で行います。デプロイする前にリスト登録のスクリプトを走らせる手間はありますが、この仕組みのおかげで、ゲームのメインプログラム側は音声の物理的な配置パスなどを一切気にせず、シンプルに呼び出せるようになっています。

また、Webブラウザでは「ユーザーのアクション（クリック等）がないと音声を再生してはいけない」という自動再生ポリシーがあります。そのため、以下のようにユーザーが自発的に押すボタン（マッチング開始ボタンなど）のクリックイベント内に再生処理をフックすることで、この制約をクリアしつつUXを損なわない設計にしています。

AudioMixer.init(); // 初期化

// ==========================================
// タイトル画面のボタン
// ==========================================
document.getElementById('btn-mode-rate').addEventListener('click', () => {
    // 略 ui更新とか

    AudioMixer.playBGM('logical-hlh-sample-001'); // ここで再生
});

音声再生を実装したゲーム待機画面

まとめ

今回はBGMとSEを仮作成し、音声エンジンを通してブラウザ上で意図通りに鳴らせることを確認しました。

音声やアニメーションは、こだわり出すと本当にキリがありません。「いきなり完璧なものを作るのは不可能で、作ろうとするだけ完成が遠のく」というのはよくある罠なので、ある程度のクオリティでまずは仮組みし、後からだんだん解像度を上げていくことが重要だと実感しています（とりあえず作って動かすことが大事！）。

関連記事
【第９回】ゲームデザインとアイテム実装
ゲームルールを考える：ハイアンドローモックアップ【CFW P2P心理戦ゲーム開発記】 #9
【第13回】ゲームルールの策定v1
Logic High and Low v1ルール策定とゲーム本体実装【CFW P2P心理戦ゲーム開発記】 #13
【第14回】ゲームUIのコンセプト決定
コンセプトとゲームUIに着手【CFW P2P心理戦ゲーム開発記】 #14