未来の運動会で作った『かげぴったん』をGitHubで公開しました
だいぶ時間が空いてしまいましたが、2019年3月16-17日に開催された【未来の福岡の運動会】にて制作した『かげぴったん』という種目のUnityプロジェクトとビルド済みパッケージをGitHubで公開しました。
導入方法や遊び方などの詳細は下記リポジトリを参照してください。
https://github.com/KzoNag/Kagepittan
『かげぴったん』の競技風景はコチラ
（犬飼さんのYoutubeより。素晴らしい動画ありがとうございます！）
未来の運動会については渋谷で開催されたときのこちらのページが分かりやすいです。
福岡大会では、1日目と2日目の午前中が種目を作るハッカソンで、2日目の午後に4チーム対抗の運動会が開催されました。
また、ハッカソンでの種目づくりに使用される（かもしれない）ツールを作るためのテックワークショップというのも事前に開催されました。
僕はテックワークショップから参加してベースとなるシルエットシステムを作り、ハッカソンではチームで考えた種目の内容をUnityで実現するところを担当しました。
せっかくなのでテックワークショップから運動会本番までの振り返りを書いておきます。
テックワークショップ
テックワークショップでは参加者みんなでツールのアイデアを出し合い、
面白そうなものに絞った中から各自選んでツールづくりを進めることになりました。
僕は自分で出した↓の案から作ることに。
ツール制作
作ったもの
普段Unityを使ってるので今回もUnityで作りました。
この段階で作ったのがこちら。
画像処理でカメラ画像からシルエット画像を生成し、お題のシルエット画像との差分を数値化してスコアを計算しています。
使ったアセット
画像処理にはOpenCV plus Unityというアセットを使いました。
UnityからOpenCVを使う方法はいくつかあって、日本人作者の方が出しているOpenCV for Unityというアセットが有名かなと思います。（普段は僕もこれを使っています。）
ただ、ちょうどこの時期にOpenCV plus Unityが無料で使えるようになりました。ハッカソンなど後々プロジェクトを公開することを考えると無料アセットを使ったほうが良さそうだなと思ったので、今回は"plus Unity"のほうを使ってみました。
実際、今回プロジェクト公開するにあたり外部アセットはリポジトリから除外していて各自でアセットストアからインポートしてもらう必要があるので、無料アセットを使用したのは良い選択でした。
処理の流れ
シルエット画像を作る方法は、今回はあまり時間が取れなかったので単純な背景差分を取る手法になっています。
以下のような流れです。
- 事前に背景画像を設定
- カメラ画像と背景画像の差分を取る
- グレースケール化
- 2値化して白黒画像に
- 膨張・収縮処理をかけてノイズ除去
アウトプットはこんなかんじ
- カメラ画像
- 背景画像
- シルエット画像
- 3, 5を重ねた結果
- お題の画像
右上の数字がスコアの計算結果です。
ここまでを1日でざっくり作り、テックワークショップのSlackで共有しました。
いくつかアドバイス頂いたのですが、対応する時間が取れなかったこともあり、現場での調整でなんとかする方針にして事前準備はここまでということに。
ただ、この単純な背景差分を取る方法だと、影の部分までシルエットに載ったり、服の色によっては背景として扱われたり、カメラの自動露出調整によってうまく背景が除去できなかったり、かなり不安要素が多い状態でハッカソンに臨むことになってしまいました。。。
運動会ハッカソン
初日の午前中にツール紹介～アイデア出し～チームビルド。
この段階で自作ツールが使われない可能性もあったのですが、運よく興味を持ってもらえてシルエットシステムを使った種目をチームで考えることに。
初日の段階で、お題との一致度を数字じゃなくてバーで表現、一致度が閾値を超えたらお題クリア、クリアしたら次のお題に切り替える、という機能を実装しました。
チームの方々にお題のシルエット画像をたくさん作ってもらい、実際に遊べるかをテストしたのですが、全然気持ちよくプレイできない。お題によって全然クリアできなかったり、一瞬でクリアしちゃったり。。（夜中に原因となるバグを発見！）
あと不安的中でカメラの自動露出調整によって背景除去がうまくいかない問題が多発してしまい困っていたのですが、なんとスタッフの犬飼さんが自動露出調整をオフにできるカメラをビックカメラまで買いに行ってくださるという神対応。これがなかったら種目として成立しなかったと思います。本当にありがとうございました。
そんなこんなで1日目終了の19時の時点ではかなり微妙な出来で、これはマズい、成立しないのでわ、、、と涙目状態でした。
帰宅してから判定処理の見直し、お題を切り替えるたびに判定が厳しくなっていくバグを発見して即刻修正。これでだいぶマシになったので、あとはパラメータ調整でプレイ感をできるだけ改善。そしてチームメンバーやスタッフの方々から頂いていたフィードバックをもとにUI等の見せ方の部分を大幅にいじりました。できるだけのことをやったので1日目は終了。
2日目の午前中にもう一度チームの方々と一緒にテストプレイをしてパラメータ調整、次のお題を表示するのを手動にする変更をギリギリで追加実装したり。最後に直前のリハーサルで、背景をできるだけ綺麗に取れるようにパネルを移動させるなどの対応を決めてハッカソンは終了。1日目と比べるとかなり良くはなっていたのですが、それでもやはり環境に左右される部分が大きいため、うまくいくか非常に不安なまま本番を迎えることになりました。
運動会本番
本当に本番直前までうまくいくか不安で冷や汗をかいていたのですが、いざ始まってみるとシステム的に大きなトラブルも発生せず、チームメンバーが状況に合わせて上手くプレイヤーを誘導してくださり、MCガッキーさんの進行とDJモンチさんの音楽で会場に一体感が生まれ、何より参加した皆さんがものすごく熱中して取り組んでくれて、冒頭の動画のようにクリアするたび歓声があがる大変盛り上がる結果となりました。
上手くいって本当にホッとしました。がんばった甲斐があった・・・！
感想＆反省点
種目としては皆さんのおかげで大いに盛り上がってエキサイティングな経験ができました！ありがとうございました！
が、担当したシステムの制作に関しては今回は反省点が多かったです。
まず、ベースの仕組みが環境に左右されやすすぎて、安定した状態を作るのが難しかったこと。今回は、特別な機材を用意しなくても使えるように普通のWebカメラだけで作る選択をしました。ある程度のところまではスムーズに作れても、信頼性を高めるためには画像処理の深い知識やノウハウが必要そうです。KinectやRealSenseを使ってデプス情報を組み合わせるなどしたほうが、より確信を持って進められたかなーと思います。
次に、スケジュール感と「ツール」を作る難しさ。今回テックワークショップに参加して事前にシルエットシステムを作ったわけですが、ちょっと作りが良くなかったと感じています。肝になるシルエット化とスコアリングの仕組みだけ作っておけば、あとは当日になんとかなるだろう、という普段のハッカソン感覚で臨んだものの、初日の夕方頃にある程度完成させるという全体スケジュールには全くハマりませんでいた。自分しか触れない作りだったので自分のプレッシャーも大きかったし、きっとチームメンバーの皆さんにも進捗が見えずヤキモキさせてしまったのではないかと思います。
もっとプリミティブで組み合わせ可能な形式でツールを用意し、ハッカソンではその組み合わせの部分に注力、できる限り追加実装はしない、みたいな感覚が良いのかもしれません。が、言うは易しでこれを実践するのはなかなか難しいのではないかなーとも思います。
スケジュールにハマらなかったことに付随しますが、自分の作業に一杯いっぱいでチームメンバーとすらあまりコミュニケーションが取れなかったのも良くなかったです。。。テックワークショップからハッカソンまで全体的に余裕が無く、ちょっと心がザワつく感があったので、次の機会にはもうちょっと余裕を持てるかんじで臨みたいなと思います。
あと最初テックワークショップに参加したときはARで何かやりたいなーと思ってたんですが、なかなか良い案がまとまらなかったので今度こそはそっち方面で考えたい。
最後に
苦しい部分もありましたが、ただ作って終わりではなく実際に一般の方、特に子どもたちと一緒に遊んでリアクションや楽しそうな顔を見られる機会はそうそうないので、とても為になったし、嬉しかったし、自分自身もすごく楽しめました。
システムが不安定な中で一緒に作り上げてくれたチームの皆さん、多くのアドバイスをくださった岩谷さん・犬飼さんをはじめとするスタッフの皆さん、熱いトークと音楽で盛り上げてくださったMCガッキーさん・DJモンチさん、楽しんでくれた運動会参加者の皆さん、ありがとうございました！！
