前回の記事で書いた、OMRONのHVC-Cを使ってアプリを作ったので紹介していきます。

SEVEN HUMAN SENSOR

「SEVEN HUMAN SENSER」はHVC-Cのセンサーをまとめて体験出来るアプリです。アプリ内の4つのページで様々なデータの検出を行います。

4つのページでは主に、以下のデータを取得し表示されます。

■身体検出

■顔検出

■性別・年齢推定

■視線推定

身体検出

身体検出ではHVC-Cとの距離によってキャラクターが近づいてきたり遠ざかったりします。また、手の位置も同時に取得しており、手の位置によってもキャラクターの手の位置が変わるようになっています。

アニメーションはCGAffineTransformMakeScale()とCGRectOffset()を使用し、UIViewアニメーションによってアニメーションさせています。

顔検出

顔検出では、表情と顔の向きを検出しています。表情は「真顔」「笑顔」「憤怒」「驚き」「悲しみ」の５つが取得でき、データが取得できるとそれぞれの顔に変化します。

また、顔の向きを取得し、その方向に対してキャラクターが顔を向けるようなアニメーションを行います。ここではデザイナーから『上を向いた時は髪の毛が隠れるようにしたい』というオーダーを受けましたので、CALayerを使用しています。

CALayerを使うことで、擬似的に３D的な動きができるようになります。ただし、動き方がアフィン変換で行われるため、少し癖があります。

やりたいアニメーションとしては、上を向くと髪の毛が隠れるので、髪の毛を上に移動させつつ、画面の奥へ倒れるように回転させれば、上を向いた時に髪の毛が隠れるようなアニメーションになるはずです。

そこで、Y軸に対し上に動くように移動させ、X軸に対し奥に行くように回転させるようにアニメーションを設定してしまうと、回転は思い通りに動きますが、移動は上に動かずに画面の奥へ行ってしまいます。

これは移動と回転が画像自身のローカル座標にかかってしまうために起きてしまいます。

今回はこれを防ぐために、90°回転させる場合は、Y軸の移動ではなく、Z軸の移動を行うことで表示の上では上に移動して回転するようになっています。また、CALayerをつかってアニメーションを行うために、CATransactionを使ってアニメーションを行っています。

CATransactionを使った理由としては、髪の毛と表情のレイヤーが別レイヤーになっているため、複数のCALayerを同時にアニメーションさせるためにはCATransactionを使用する必要があったので、これを使用しました。

性別・年齢推定

性別・年齢推定では、HVC-C側が推定した値を送ってくれるので、その値を表示するようになっています。

視線推定

視線推定では、画面の縦と横をそれぞれ30分割し、左右それぞれの目の画像からどの方向を見ているのかを判定し、その方向へ回転させています。

この目の画像もCALayerで表示させているので、顔検出の時と同じようにCATransactionを使用してアニメーションさせています。

また目を瞑るとそれに応じて目を瞑ります。

おまけ

アプリを説明した動画もあったりします。

今回はアドテクチームのすーぱーデザイナーの大坂さんにデザインをお願いしました。「デモ作るからなんとかデザイン作って」というすごい投げ方でしたが、とても素敵なデザインを作って頂けました。

デザインが素晴らしいとこれほど体験が変わるのかと思い知らされます。そしてそのデザインを頑張って表現できるようにつくり上げるのはなかなか大変でした。

普段ゲームに関する知識を集めることが多いですが、今回は珍しくそれが役にたちました。

最近ブログネタがちょこちょこ増えてきたのでどんどん書いていこうと思います。

では、また