見出し画像

【技術解説】PoseNet&DrumsRNNによるリズムアクションゲーム『BodyDrum』

デザイニウム

こんにちは！デザイニウムのBBOY/エンジニアの平澤（@eatora22）です。今回は体を使って操作するドラムリズムアクションゲーム「BodyDrum」のご紹介をしようと思います。

はじめに

まずは以下のデモ動画をご覧ください。


BodyDrumはWebブラウザ上で動作し単眼カメラのみで遊ぶことができます。また、AIがお手本となるドラム演奏を自動生成する機能も搭載しています。体を動かしながら音楽を奏でる楽しさを体験してもらうというコンセプトのもと2019年末に制作されました。

技術紹介

体を使ったドラム操作にはPoseNetというGoogleが提供している骨格検出用の機械学習用モデルを使用しています。単眼カメラから取得した映像のみで17個の部位の座標情報（nose, leftEye, rightEye, leftEar, rightEar, leftShoulder, rightShoulder, leftElbow, rightElbow, leftWrist, rightWrist, leftHip, rightHip, leftKnee, rightKnee, leftAnkle, rightAnkle）が検出できます。

PoseNetを扱うにあたって以下のようなBodyDrumのプロトタイプも制作しました。これは各部位の上下or左右の移動変位をトリガーとして使うことでドラムSEを鳴らす仕組みとなっています。ただ、最終的にはよりシンプルな操作性を優先させ打面を模したサークルをタッチする仕組みとなりました。

骨格検出用モデルについてはtf-pose-estimationの紹介記事もありますのでそちらも是非ご覧ください。

お手本となるドラム演奏の自動生成機能には、DrumsRNNというこちらも機械学習モデルを使用しました。こちらはGoogle Magentaという機械学習を用いたアートや音楽の創造プロセスに関する研究プロジェクトにより提供されているものです。

上記リポジトリはPythonによるものですが、TensorFlow.jsで扱えるモデルも提供されています。

DrumsRNNはLSTM（Long short-term memory）という時系列データの予測などによく使われるモデルがベースとなっています（名前についているRNNはLSTMのさらに元となっている再帰型ニューラルネットワークと呼ばれるものです）。DrumsRNNにおける時系列データとはドラムパターンを指しており、非常にざっくり書くと「ドン、タン、ドン、タン」という入力があればそれに続く「ドン、ドン、ドン、タン」というパターンを予測して返してくれるようなイメージです（本当にざっくりです笑）。そのため、0から何かを生成してくれるわけではなくseedとなるドラムパターンを用意してあげる必要があります。ブログのアクセス推移をLSTMで予測してみるという記事も以前個人的に書いたので興味ある方はそちらもご覧ください。

ただ、使用するにあたってドラムセットの構成やMIDIに関する知識も必要になるのでなかなか取っつきにくい印象です（私も制作してから日数が経ってしまい使い方を忘れかけております笑）。TensorFlow.jsベースでの使い方については以下の記事やその中で紹介されている「Deep Drum & Deep Arp」のソースコードを参考にするのが良いと思われます。

ただ、DrumsRNNが返してくれるのは各ドラムキットにおける音（note）のピッチや開始&終了時間に関するデータです。実際に音を鳴らすにはもうひと手間が必要です。そのために今回はTone.jsというライブラリを利用します。これにより1つのシークエンス中のどのタイミングでこの音を鳴らすというようなことがブラウザ上で制御できるようになります。鳴らす各ドラム音は別途用意したmp3ファイルを使っているのですが、DrumsRNNが返したピッチに対応するドラム音のマッピング表を作成してあげることで「このタイミングでスネア音を鳴らす」みたいなことができるようになります。

最後に、ビジュアル部分の作成にはp5.jsというライブラリを使用しました。これはProcessingというビジュアルプログラミングのようなアーティスト向けに用意されていた開発環境をJavaScript用に移植したものです。JSに縁のなかった私がTensorFlow.jsのようなライブラリを扱うようになったのもp5.jsのおかげです（感謝）。


ゲームシステム解説

ここではBodyDrumのゲームシステムを解説します（ほぼデモ動画で説明済みなのですが）。

スクリーンショット 2020-05-22 22.32.12

プレイ方法なのですが、基本的にブロックが上がってくるタイミングに合わせてドラムの打面となるサークルをタッチするだけです。まずはお手本となるドラムパターンのブロックが流れてくるのでじっくり観察しましょう。

スクリーンショット 2020-05-22 22.33.48

お手本パターンが終わったら次に上がってくる水色のブロックをタイミングよく叩いていきます。上手く叩けた場合は左にあるゲージが溜まっていき、すべてのブロックを叩くことができれば新しいドラムパターンが流れてきます。

AIモードではクリアするたびDrumsRNNにより新しいドラムパターンが生成されていくので、ゲームを中断しないかぎり無限に遊び続けることができます。たまにブロックが横一列に並んでいるような難易度の高いドラムパターンが生成される場合がありますが、打面上に腕をスライドさせるなどして頑張れば一応全て叩くことができます笑。人が思いつかないようなドラム演奏を楽しむのもAIならではの良さなのではないかと思います。

さいごに

以上、ドラムリズムアクションゲーム「BodyDrum」の解説をしました。最後にこのゲームのインスピレーション元でもある「ウンジャマ・ラミー」をご紹介させていただきます。「パラッパラッパー」はラップを扱った音ゲーとして非常に有名かと思いますが、続編にあたるこちらはギター演奏がメインです。お手本が流れてから自分が演奏するというのもこのゲームのシステムを参考にさせていただきました。何よりゲーム内の楽曲が最高なんですよね……販売からだいぶ年数も経ってしまいましたが今でも新作を心待ちにしております。

編集後記

広報のマリコです！「BodyDrum」は、会津オフィスでテストしていたときに私もプレイさせて貰いました。仕事中に社員が交代でプレイしていたのですが、プレイする側はもちろんのこと、見る側も面白くてみんな仕事の手を止めて楽しんでいるほどでした。コンセプトにもあるように体を動かしながら音楽を奏でる楽しさに加えて、みんなで楽しめるという点もすごく良かったです！どれだけ楽しかったかはコチラの写真をご覧いただくとどれだけ楽しかったか伝わると思います。

The Designium.inc
・Interactive website
・Twitter
・Facebook

この記事が気に入ったらサポートをしてみませんか？