KIRIN からだウォーズ GAME1 - Behind the scenes

KIRIN からだウォーズ GAME1 は、免疫軍 vs ウイルス軍の音ゲー形式対戦ゲームとして、Nuxt + Three.js で実装されたリアルタイム対戦型インスタレーション作品です。

イベント概要（からだウォーズ）

からだウォーズは、キリンホールディングス株式会社が主催する、感染症や免疫について遊びながら楽しく学べる体験型イベントです。からだの中で繰り広げられる「免疫の戦い」をテーマに、参加者は「免疫細胞軍」と「ウイルス連合軍」に分かれ、ゲーム体験やパネル展示を通じて、免疫の働きを体感しながら学ぶことができます。

  • 主催: キリンホールディングス株式会社
  • 会期: 2025年11月26日（水）〜 2026年1月25日（日）
  • 会場: 日本科学未来館 1階 企画展示ゾーンa
  • 開催時間: 10:00〜17:00（最終入場 16:30）
  • 休館日: 毎週火曜日（1月6日は開館）、12月28日〜1月1日
  • 料金: 無料（入館料も不要）
  • 後援: 公益財団法人 日本ヘルスケア協会
  • 監修: 北村 義浩氏（日本医科大学 教授）

本ページで紹介する GAME1 は、体験展示のひとつである「体内対戦リズムゲーム」に相当します。

日本科学未来館：からだウォーズ（イベント詳細）

📹 本番映像

プロジェクト全体の技術的特徴を実演した本番映像です。エントリー・チュートリアル・プレイ・リザルトの全フェーズ、判定システム、スコア計算、コンボシステム、2 画面同期、マルチチャンネルオーディオアウトなどを確認できます。

免疫軍vsウイルス軍の音ゲー対戦ゲームシステム

基本仕様

  • 総プレイ時間: 100 秒（エントリー 10 秒 + チュートリアル 20 秒 + プレイ 82 秒 + リザルト 10 秒）
  • 同時プレイ: 最大 8 人（各チーム 4 人）
  • 解像度: 1920×1080（FullHD）
  • スクリーンサイズ: w3250 × h1830mm
  • 描画エンジン: Three.js による高速 2D 描画
  • 音声制御: Max/MSP との OSC 通信による統合制御

技術的特徴

  • 判定システム: EXCELLENT（±50ms以内、+100点）、GOOD（±150ms以内、+50点）、MISS（-10点）
  • 正誤判定: 免疫軍（押す/押さない）、ウイルス軍（⭕/❌）
  • コンボシステム: 3コンボ以上でコンボ数表示、10コンボ以上で+10%ボーナス
  • スコア計算: チームスコア = 全プレイヤーのスコア合計
  • 勝敗判定: 免疫軍スコア vs ウイルス軍スコア
  • CPU自動補完機能: 参加者が少ない場合はCPUが自動参加
  • 音と譜面の同期: Web Audio APIによるミリ秒単位の高精度同期
  • マルチチャンネルオーディオアウト: 各チームの音源を独立したチャンネルにルーティング（ch1, ch2: 免疫軍 / ch3, ch4: ウイルス軍）

本プロジェクトの 2 つの技術的特徴

1. マルチチャンネルオーディオアウト（4ch）を WebSocket と OSC で Max/MSP 制御

Web アプリケーションから、WebSocket（Socket.IO）経由で OSC メッセージを送信し、Max/MSP で 4 チャンネルのマルチチャンネルオーディオアウトを実現。各チームの音源を独立したチャンネルにルーティングすることで、空間的な音響体験を実現しました。

実装アーキテクチャ

Webアプリケーション（Nuxt4）
    ↓
Socket.IO（WebSocket）
    ↓
Node.js Server（node-osc）
    ↓
OSCメッセージ（UDP）
    ↓
Max/MSP（KaradaWars_AudioPlayer.maxpat）
    ↓
TeamChannelRouter.maxpat
    ↓
4チャンネルオーディオアウト（dac~ 1 2 3 4）

チャンネルルーティング仕様

  • Immune（免疫軍）: ch1 (L), ch2 (R) - BGM, Target SE
  • Virus（ウイルス軍）: ch3 (L), ch4 (R) - BGM, Target SE
  • Global（全体）: ch1, ch2, ch3, ch4 - Entry BGM, Tutorial BGM, Judgment SE, Result SE

技術的ポイント

  • Socket.IO 経由の OSC 送信: HTTP POST リクエスト（10-50ms）から Socket.IO イベント（1-5ms）に変更し、レイテンシーを大幅に削減
  • グローバル Socket.IO 接続: 全インスタンスで 1 つの接続を共有し、接続の重複を回避
  • フォールバック機能: Socket.IO 接続が確立されていない場合は POST リクエストに自動フォールバック
  • Max/MSP 側のルーティング: TeamChannelRouter.maxpatで、チーム情報に基づいて自動的にチャンネルを振り分け

2. Web ベース管理画面による制作ワークフローの確立

当初 openFrameworks（oF）などでの実装を検討していましたが、譜面制作を音制作チームに依頼するため、管理画面を全て Web ベースで先に作成。譜面を CSV データ、ゲーム用コンフィグ類を JSON として保持する仕組みを構築した結果、そのままアプリ側も Web ベースで制作することになりました。

Web ベース管理画面の構成

  1. Beatmap ステップシーケンサー
    • DAW（Digital Audio Workstation）風のステップシーケンサー形式
    • 8 レーン表示（免疫 4 + ウイルス 4）
    • BPM 同期機能によるグリッド間隔自動調整
    • リアルタイム再生（BGM + SE）による即座の確認
    • レーン別ミュート機能による譜面確認の効率化
    • 出力形式: CSV
  2. タイムライン管理システム
    • プレイ中の 82 秒を柔軟に管理
    • モード別の時間配分（NORMAL/CHANCE1/CHANCE2/CLIMAX）
    • スコア倍率の設定
    • 出力形式: JSON
  3. アセット管理画面
    • ターゲット画像・音声・BGM を一括管理
    • 画像・音声ファイルのアップロード
    • 出力形式: JSON + ファイルアップロード
  4. 設定編集画面
    • ゲームパラメータとキーボード設定を編集
    • 出力形式: JSON

技術的ポイント

  • CSV 形式の採用: 音制作チームが慣れ親しんだ形式で、エクセルやテキストエディタでも編集可能
  • JSON 形式の採用: 構造化されたデータで、管理画面から直接編集可能
  • Web ベースの利点: ブラウザからアクセス可能で、環境構築不要。音制作チームがプログラマーに依存せずに作業可能
  • データ駆動型設計: コード変更なしで、コンテンツを柔軟に調整可能
  • BPM同期機能: BPMを設定すると、自動的に適切なグリッド間隔を計算（例：BPM 120 → 0.5秒グリッド）
  • 仮音生成機能: 実際の音声ファイルがない場合、自動的にシンセサイザー音を生成（免疫軍：高めの周波数、ウイルス軍：低めの周波数）により、音声ファイルがなくても即座にプロトタイピングが可能
  • リアルタイム再生: 50msごとに更新し、各ノートのtimeと比較（±25ms以内）で音声再生。BGM + SEのリアルタイム再生による即座の確認が可能
  • レーン別ミュート機能: 各レーンのON/OFF切り替え、全レーン一括ON/OFFにより、譜面確認の効率化を実現

📹 関連映像

Beatmap ステップシーケンサー - DAW 風エディタによる譜面制作

Beatmap ステップシーケンサーの実際の操作デモ。8 レーン表示、BPM 同期機能、リアルタイム再生、レーン別ミュート機能などの機能を実演。

Beatmap Step Sequencer - Rhythm Game Score Creation via Music Production Software-Style Editor

ボタンデバイステストプレイ - Lab環境での実機接続テスト

Lab環境でボタンデバイスをPCと接続し、ディスプレイで実際にプレイしながら動作確認を行うテスト映像です。

音ゲー対戦システム 実機テスト - ボタンデバイス接続によるLab環境でのテストプレイ

技術スタック

  • フロントエンド: Nuxt4 + TypeScript + Vue3 + Pinia
  • 3D 描画: Three.js (WebGL2, GLSL3)
  • 状態管理: Pinia
  • スタイリング: TailwindCSS
  • アニメーション: GSAP
  • バックエンド: Nuxt Server API
  • 通信: Socket.IO + OSC (node-osc)
  • 音声: Web Audio API
  • 外部連携: Max/MSP (OSC 経由)

まとめ

KIRIN からだウォーズ GAME1 は、Web 技術を活用した音ゲーとして、以下の 2 つの技術的特徴が特に重要でした：

  1. マルチチャンネルオーディオアウト（4ch）を WebSocket と OSC で Max/MSP 制御
    Web アプリケーションから、WebSocket（Socket.IO）経由で OSC メッセージを送信し、Max/MSP で 4 チャンネルのマルチチャンネルオーディオアウトを実現。各チームの音源を独立したチャンネルにルーティングすることで、空間的な音響体験を実現しました。
  2. Web ベース管理画面による制作ワークフローの確立
    当初 openFrameworks（oF）などでの実装を検討していましたが、譜面制作を音制作チームに依頼するため、管理画面を全て Web ベースで先に作成。譜面を CSV データ、ゲーム用コンフィグ類を JSON として保持する仕組みを構築した結果、そのままアプリ側も Web ベースで制作することになりました。

これらの技術的な挑戦と実現により、制作ワークフローの効率化と音響システムとの統合制御を両立し、IE3 ならではの価値を創出しています。

Back