音量・演出軽減・データ初期化を実装した話Implementing Volume, Reduced Effects, and Data Reset

開発ログ / アクセシビリティ / UI設計Development Log / Accessibility / UI Design

敵とボスのコンテンツ拡張、クレジット経済とHANGARの整備が一段落したあと、後回しになっていた地味だが大事な機能に着手しました。それが OPTION 画面です。VOID STRIKERはBGM・SFXの音量を個別に調整でき、被弾やボム時の画面揺れ・フラッシュを弱める「SCREEN FX」設定、そして進行データを完全にリセットする「WIPE DATA」の3系統の機能を、シンプルな縦リストのメニューにまとめています。

Once the enemy and boss content expansion and the credit economy and HANGAR were in place, I turned to an understated but important feature that had been deferred: the OPTION screen. VOID STRIKER combines three groups of settings in a simple vertical menu: separate BGM and SFX volume controls, a SCREEN FX setting that reduces screen shake and flashes from damage and bombs, and WIPE DATA, which completely resets progression data.

音量ミキシングを3段構成にするA Three-Stage Volume-Mixing Structure

音まわりはすでに G.Audio モジュールがWebAudioでSFXとBGMをその場で合成する仕組みを持っていましたが、そこに「ミュート」と「音量調整」という2つの独立した操作を両立させる必要がありました。設計としては、マスターゲイン（ミュートのON/OFFのみを担当し、0か既定値かを切り替える）の下に、SFX専用のゲインノードとBGM専用のゲインノードを子として接続する3段構成にしています。こうすることで「ミュート中でも音量設定は保持される」「音量を0%にしてもミュートボタンの状態には影響しない」という、2つの操作が互いに干渉しない挙動を実現できました。BGM再生中に音量スライダーを動かしても、次の音符からではなくその場で即座に反映されるようにしたのも、操作の手応えを重視したポイントです。

The existing G.Audio module already synthesized SFX and BGM on demand with Web Audio, but it needed to support two independent controls: muting and volume adjustment. The design uses a three-stage structure. A master gain responsible only for mute toggles between zero and its default value, with dedicated SFX and BGM gain nodes connected beneath it. This produces independent behavior: volume settings remain stored while muted, and setting volume to 0% does not affect the mute button state. Moving the volume slider during BGM playback also applies immediately rather than waiting for the next note, giving clear feedback to the control.

「演出を弱める」という選択肢Providing an Option to Reduce Effects

VOID STRIKERは被弾やボム発動時の画面揺れ・フラッシュを派手めに演出しているのですが、これは光や動きに敏感なプレイヤーにとっては負担になり得ます。そこで SCREEN FX 設定に FULL/REDUCED の2択を用意し、REDUCED を選ぶと画面揺れ・フラッシュの強度を約25%まで一律で弱めるようにしました。実装上のポイントは、揺れやフラッシュの呼び出し元（被弾処理・ボム処理・ボスのフェーズ移行など）を一切変更せずに済むよう、G.Particles モジュール側に setReducedFx(reduced) という切り替えフラグを1つ追加するだけにしたことです。呼び出し側は今まで通り shake(power)/flash(color, strength) を呼ぶだけで、実際の演出強度を弱めるかどうかはパーティクルモジュール内部で完結させています。機能を追加するときに、なるべく既存のAPIを変えずに済む場所に手を入れる、という判断はコード全体の見通しを保つうえで意識している点です。

VOID STRIKER uses pronounced screen shake and flashes when the player takes damage or activates a bomb, which can burden players sensitive to light or motion. The SCREEN FX setting therefore offers FULL/REDUCED choices. Selecting REDUCED uniformly lowers the strength of screen shake and flashes to about 25%. The implementation avoids changing any call sites for shake or flashes, including damage handling, bomb handling, and boss phase transitions. Instead, the G.Particles module gained a single setReducedFx(reduced) flag. Callers continue to use shake(power)/flash(color, strength) as before, while the particle module decides internally whether to reduce the effect. When adding features, I try to make changes where existing APIs can remain stable, helping keep the overall code easier to follow.

「うっかり消去」を防ぐ二段階確認Two-Step Confirmation to Prevent Accidental Erasure

WIPE DATA は進行データ（クレジット・所持スキン/テーマ・紹介コードの使用履歴など）をすべて消去する、取り消しのきかない操作です。誤操作で全データが消えてしまうのは避けたいものの、確認ダイアログを出すために alert/confirm を使うことはVOID STRIKERのルール上禁止されています（外部UIに依存せず、すべてcanvas内で完結させる方針のため）。そこで、1回目の決定操作では実際には何も消さずに「もう一度押すと消去します」という警告表示だけを行い、3秒以内に再度決定操作をした場合にのみ実際の消去処理を実行する、という二段階の自前確認フローを実装しました。3秒経過すると警告は自動的に解除され、通常の状態に戻ります。ブラウザ標準のダイアログが使えない制約の中でも、シンプルなタイマー変数ひとつで実用的な誤操作防止を作れたのは、小さな成功体験でした。

WIPE DATA irreversibly deletes all progression data, including credits, owned skins and themes, and referral-code usage history. Accidental deletion needed to be prevented, but VOID STRIKER's rules prohibit using alert/confirm for confirmation because all UI must remain inside the canvas without depending on external UI. On the first confirm input, the game deletes nothing and only displays a warning that pressing again will erase the data. Actual deletion occurs only if the player confirms again within three seconds. After three seconds, the warning clears automatically and the menu returns to its normal state. Within the constraint of avoiding standard browser dialogs, a single timer variable was enough to create practical protection against accidental input.

設定の永続化とゲーム本体との分離Persisting Settings Separately from Game Data

音量やSCREEN FXの設定は、クレジットなどのゲーム内経済データ（voidstriker_meta）とは別の voidstriker_settings というlocalStorageキーに保存しています。経済データと表示・音響設定は性質がまったく異なるため、意図的にストレージのキーを分け、それぞれ読み書きを try/catch で保護することで、片方の読み込みに失敗してももう片方には影響しないようにしています。こうした小さな分離の積み重ねが、機能を追加するたびに壊れやすくなっていくのを防いでいると感じます。

Volume and SCREEN FX settings are stored under the voidstriker_settings localStorage key, separate from in-game economy data such as credits in voidstriker_meta. Economy data and display or audio settings have fundamentally different purposes, so their storage keys are intentionally separate. Each read and write is protected with try/catch, ensuring that a failure to load one does not affect the other. These small separations help keep the game from becoming increasingly fragile as features are added.