【企画&技術解説】 Kandu「ちきゅうまもり隊」
はじめに
今回の記事は、デザイナーのハセガワ（@hassegawa）とエンジニアのサクマ（@djsackman）2人で執筆した2部構成の記事になっています。
※AzureKinect登場以前の2018年11月〜2019年3月頃に制作したものです。
1. 企画〜デザインについて (@hassegawa)
1-1. 企画について
「ちきゅうまもり隊」は、親子で職業体験的なコンテンツを楽しんでもらうテーマパークKanduの企画のひとつとして、再生可能エネルギーを扱うクライアント様にいただいた案件になります。
職業体験という演出ですから、子どもたちには炭酸ガスの排出を減らしたり植物を増やしたりといった仕事をゲームを通じて知ってもらい、その結果として素敵な未来や生活を手にすることができる、我々の生活に結果的に繋がっている、というところまで知ってもらおうという試みです。
まずはそのあたりを踏まえて、ゲーム自体のアイデアとビジュアルイメージを簡単なドローイング・スケッチで提案していきます。
この時点で、Kinectを使用することはおよそ決まっていますので、身体全体を使ったゲームになることは想定します。
このようなスケッチで提案していきます。
1-2. デザイン、テイストについて
次に全体のデザインやテイストについて提案・決定していきます。
ボリュームや内容から勘案して、2Dのカットイラスト素材で構成するのが良いかと考え、そのように提案していきました。
ただし実装はUnity3Dになるであろうことと、Kinectを使って子どもたちユーザーのボーンデータを取得し反映させるのですから、一部は3DCGにした方が開発に無理がないということも忘れてはいけません。
このとき提案したタッチサンプルの一例。過去に自社開発したコンテンツから引用しました。実際に提案したタッチサンプルは、これらだけでなく案件で制作したものなども含まれます。
最終的にはこのようなタッチに決定しました。
画像は実際に制作した素材の一例になります。
プレイヤーのアバターは、当初は現場の作業服風や研究者風で提案していましたが、最終的には「ファンタジー・RPGの勇者風にして欲しい」との要望がありそのようになりました。
プレイヤーのアバターには、事前に撮影した子どもたちの顔が合成される試みとなっています。
研究者風のデザインについては、説明役のキャラクタにそれを引き継ぎました。こちらもスケッチを数種提案して、最終的にメガネの少年に落ち着いています。
1-3. ムービーの制作について
OPとEDにムービーが入ります。
これらもゲーム本編と同様のイラスト・カット素材を組み合わせた簡単なアニメーションとなっていますので、基本的にはAdobe Premiereを撮影台として使って制作します。
3DCGである博士キャラも、ここではプリレンダリングした画像を組み合わせて使っています。動画として素材をレンダリングしてしまうと、編集段階での修正・変更があまりできなくなるのと、やはりテイストが浮くためです。
しかしEDの一部、回る風力発電機はアニメーションの関係で3DCGのアニメーションとしてレンダリングする必要がありました。このカットはBlender内に撮影台を組んで素材を重ね、3Dモデルの風車を回転させています。
またOP・ED共に登場するこのカットの構図は、iPadとApple Pencilで下描きを作っています。スナップが利くAdobe Illustratorの直線で描いた方が便利かと思うのですが、実際に作業してみるとそうでもありません。
同じ作業をする場合、iOS用のアプリProcreateの直線・描線補助機能を利用するのが直感的で圧倒的に早く、仕上げに繋がるドローイングに関しては、
Procreate (iOS) ＞ 紙に手描きしてスキャン ＞ 最初からIllustrator
と言った順位に感じられます。
Adobe Illustratorで素材を仕上げる際には、絵素材をスライドさせて遠近感を出す（アニメーションでは密着マルチ等と呼ばれる手法です）ように分割を考えていましたが、実際にそうしてみると変に目立つのでこれはオミットしました。
その際のパーツ分けを利用し、固定ですが段階的にパースをずらして空間を広く見せている点に注意してみてください。少ない素材や操作で多少の空間的演出は試みられるという一例になります。
ここはこの時点でカメラをチルト・ダウン＆アップすることを想定していたので１点透視で描いています。
2. システム・アプリケーションの設計 (@djsackman)
2-1. 体験コンテンツの概要
「ちきゅうまもり隊」は前述のOP/EDに加え、全3ステージのミニゲームを最大4人のプレイヤーが同時進行で進めていく体験型コンテンツになっています。
各ステージはそれぞれ環境改善をテーマに構成されたミニゲームとなっており、参加プレイヤー全員で全ステージの合計点数を競います。
ゲームの開始前に各プレイヤーはタブレットPCで顔写真を撮影し、その写真がゲーム中のアバターに適用されます（動画では諸事情でのっぺらぼうです…）ユーザーにはアバターの判別のため、それぞれ色のついたスカーフを首に巻いてもらい、その色をKinectで読み取り、対応したアバターを表示します。
2-2. システム構成
このコンテンツにおける最大のシステム的特徴は「2台のKinect V2のデータを同時に処理する」ということになります。
今回は最大4人のユーザーが横に広いプレイエリアを取るため、Kinect 1台分の有効範囲では全体をカバーできません。したがって、Kinectを横に2台並べた形でのトラッキングデータ取得が必要になりました。
Kinect V2はハードウェアの仕様的に非常にデータの転送量が多く、原則的に1台のPCにつき1台しか接続出来ません（後継のAzure Kinectは複数台接続が可能です）つまり、2台のKinectを稼働させるためには2台のPCが必要になります。
この2台のPC間でKinectデータの同期を取り、Unity上でデータを処理してプロジェクターからスクリーンに投影する形になります。
2-3. 複数Kinectの連携手法
2台のPC間のKinectデータの同期ですが、Kinectの生データをそのまま渡す事は前述の通りデータ量が大きすぎて難しいため、SDKで処理したデータの中からアプリの動作に必要なものだけを抜き出して送信する形になります。
今回は1台をメインPC、もう1台をサブPCとして、サブPCはルーターを介してメインPCへのKinectデータの送信のみを行い、メインPCでデータを集約してアプリを動作させる構成になります。
この事例ではフレーム毎のリアルタイム処理が必要になるため、通信プロトコルにはそれなりの速度が必要になります。例えばUDPやOSCなどが選択肢になりますが、今回はUDPを使用しています。UDPはセキュリティ上の懸念点も多いですが、今回はローカルネットワークのみで動作するシステム構成なので問題なく採用できました。
今回のアプリで必要なのは「ユーザーのボーンデータ＋ユーザーが掛けているスカーフの色の判別」になります。ボーンデータはKinect SDKから取得できますが、色判別についてはKinect SDKに機能がないため、OpenCVを別途組み合わせて画像解析を行い、その結果をボーンデータと一緒に送信しています。
処理済みデータは独自形式のCSVに変換した上でLZ4圧縮をかけて送信、受信側で解凍して使用します。ローカル接続は十分高速ですが、このデータ変換→圧縮→送信→解凍のボトルネックがあるため、処理のFPSはどうしても多少落ちてしまいます。そのためこのFPSのままアバターを動かしてしまうとどうしても追従感に乏しくなるため、今回はアバター側でスムージング処理をかけています。
2-4. 実運用上の注意点
今回はメインPCとサブPCのほかに説明員がオペレーションを行うためのタブレットPCも構成に入っています。こちらにはメニュー操作を行った結果をメインPCに送信するアプリがインストールされており、サブPC同様Wifiを介してUDPで通信を行っています。
実際の運用上での注意点として、色認識を行う際に現場の環境によって影響を受けてしまう事でした。
今回は暗所にスポットライトのみという現場だったため、例えば照明の当たり方によってスカーフの「黄色」と「オレンジ」の判別がつかなくなるなどの問題が発生しました。こればかりはソフトウェア側の対応だけでは限界がありますので、現場設置時に臨機応変に対応しました。
またKinectを使ったシステムでは、ケーブルや電源の取り回しも重要なポイントになります。Kinect（特にV2）は電源が不安定になると正常に動作しなくなるケースがあります。このトラブルを防ぐために同一のコンセントから複数のKinect電源を取るのは極力避ける必要があります。
またKinectはデータ転送のバンド幅が非常に大きいため、USBケーブルを延長するとデータのロスが発生しやすくなってしまいます。USB3.0を延長する必要がある場合、ケーブルは通常のものではなく、外部電力を供給できるタイプのものを使用するようにします。
編集後記
広報のマリコです！今回は企画段階から体験コンテンツが運用されるまでの一連の流れをハセガワとサクマの2人で記事にして貰いました✨体験型コンテンツがどんな風に出来上がっていくのかが分かる記事でしたが、みなさまいかがでしたでしょうか。ちなみに二人ともキャラが強く、一見近づきにくい雰囲気なんですが、話してみると優しくて面白い二人です。会津オフィスに行く機会がある方は、是非勇気を出して話しかけてみてください😊
The Designium.inc
・Interactive website
・Twitter
・Facebook
この記事が気に入ったらサポートをしてみませんか？