1. kosfuji

    Posted

    kosfuji
Changes in title
+MS の Emotion API を使って Unity 上にインタラクティブいちゃいちゃギャルゲーを作ろう
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,201 @@
+未来のゲームに Microsoft のテクノロジーはどういう風に貢献できるのだろうかと妄想を膨らませてみたところ、人間の認知機能を機械に持たせることが出来る Cognitive Services の API を使えば、ゲームはもっとインタラクティブに、より Real と Virtual の間の壁を壊してくれるのではないかと考え、「インタラクティブいちゃいちゃギャルゲー」というものを実際に実装し、国内最大規模のゲーム開発者向け技術カンファレンスの CEDEC の[こちら](http://cedec.cesa.or.jp/2016/session/ENG/16182.html)のセッションでデモさせていただきました。(現時点ではまだやっておらず先行公開しててセッションは本日の 15:10~ からです)
+この記事では、そのデモの要素技術となる Emotion API や、妄想の産物「インタラクティブいちゃいちゃギャルゲー」とは何たるや、そしてどのようにして実装したのかをご紹介できればと思います。
+この記事を通して、たった数行のコードでゲーム上のキャラに感情を理解する力を宿すことができるんだということが伝わり、ぜひ実際のゲームに取り入れていただければと思います。
+
+## そもそも、Emotion APIって何?
+Microsoft が出している、REST で画像を投げると JSON 形式で画像を分析した結果を返してくれる API サービスのことです。
+画像に写る人の顔位置を特定し、その表情に含まれる喜び、驚き、悲しみ、怒り、恐れ、嫌悪、軽蔑、中立の 8 つの感情を認識し、合計を 1 としてどの感情がどれだけ含まれているかを割合で返してくれます。
+
+![image](https://qiita-image-store.s3.amazonaws.com/0/104326/0122a999-5fcb-b92e-6c03-7e1a93001a36.png)
+([公式ページ](https://www.microsoft.com/cognitive-services/en-us/emotion-api)参照)
+
+こちらの例では 2 人の顔の位置がしっかり特定され、右側の人の感情が Surprise 99.6%として推定されていることが分かります。
+
+![image](https://qiita-image-store.s3.amazonaws.com/0/104326/836ee16f-e694-5439-da5d-5da5db083e6e.png)
+([公式ページ](https://www.microsoft.com/cognitive-services/en-us/emotion-api)参照)
+
+続いての例では右の人が Happiness 92.8% として推定されています。(左の人は Happniess 99.98% でした)
+この結果から人間の直感に合った感情推定が精度よく行えていることが分かります。
+
+## インタラクティブいちゃいちゃギャルゲーとは
+説明しよう。どんな妄想だったのかを。
+ゲーム内のキャラが自分の表情を読み取って、例えば元気のない顔をしていたら「元気ないね、どうしたの?」と話しかけてくれたり、
+楽しそうな顔をしていたら「一緒にいると楽しいね」と話しかけてくれたりしたら非常にうれしい気持ちになるんじゃないのか?
+画面上での操作で閉じていたギャルゲーがリアルタイムで自分の気持ちを読み取って、インタラクティブに話しあえたらどんなに面白いんだろう?
+そんなコンセプトを形にしたものが「インタラクティブいちゃいちゃギャルゲー」です。
+構成図はこのようになります。
+スマホやPC等のデバイスのカメラからアプリが表情をチェックして、それを Emotion APIに投げ、表情分析結果から一番強い感情に対しての反応(声やセリフ、表情)をキャラが返してくれるというものになります。
+
+![image](https://qiita-image-store.s3.amazonaws.com/0/104326/ad5aabeb-8ff2-c613-039a-beca6e2f2722.png)
+
+ただ自分は絵心がなさすぎるので、自分の絵には誰も感情移入してくれないだろうと思い、デモ作成の際には、弊社エバンジェリストのちょまどさんにサポートしていただき、はしれ!コード学園の登場人物であるC#ちゃんを派遣していただきました。(詳しくは 漫画家兼エバンジェリストちょまどさんの応援 の項で)
+
+そうしてできたデモの完成プレイ画面はこのようになりました。
+![image](https://qiita-image-store.s3.amazonaws.com/0/104326/48f6c537-4e6e-650a-f6c0-39ed5f851660.png)
+本来であれば、カメラからの表情を常にキャラがチェックしてくれた方がいいと思いますが、デモ用に自分のタイミングで画像を送るようにしていて、送った画像を右下に表示しています。
+
+早速試してみましょう!
+笑顔を見せるとこんなセリフと表情を返してくれます。
+自分に合った表情(笑顔)を返してくれているところに注目です。
+![image](https://qiita-image-store.s3.amazonaws.com/0/104326/e22bb634-77f4-2ddf-9fea-96a12e0778d4.png)
+
+驚いた顔を見せるとこんなセリフと表情を返してくれます。(場面はセリフに合うように別で切り替えています)
+![image](https://qiita-image-store.s3.amazonaws.com/0/104326/6bd41c2f-2349-f074-3e6e-9524b995725c.png)
+
+今度は場面を切り替え家の中へ、
+怒った顔を見せるとこんな反応をくれます。一体裏側にどんなストーリーがあったのでしょうか。
+![image](https://qiita-image-store.s3.amazonaws.com/0/104326/6afd4b91-d22d-31e5-569e-3558d613c609.png)
+
+ただ、笑顔を見せるとこうなります。
+![image](https://qiita-image-store.s3.amazonaws.com/0/104326/6b85b7c6-1df6-87cd-0d3e-ef883d5f309c.png)
+ざるですね。(自分の実装がワンパターンなだけ)
+
+ちなみに中立(無表情)を見せると、こういう風に返すように作っています。
+![image](https://qiita-image-store.s3.amazonaws.com/0/104326/0efb5d07-3895-306e-42ec-2d9d8e1cfb8c.png)
+
+
+## どうやって実装したの?
+Unityなので、C#による実装です。
+Python2 系, Python3系, Java, JavaScript, Objective-C, PHP, Rubyの実装サンプルは[こちら](https://dev.projectoxford.ai/docs/services/5639d931ca73072154c1ce89/operations/563b31ea778daf121cc3a5fa)の下部に載っています。
+
+自分の画像から表情を読み取りそれに合わせた表情とセリフをセットしているのを以下のコードで実装しています。
+以下のコードからたった6行のコードで表情からの感情推定が完了していることが分かります。
+
+```C#:EmotionAPI使用部分
+using UnityEngine;
+using System.Collections;
+using System.Collections.Generic;
+using UnityEngine.UI;
+using System;
+using Newtonsoft.Json.Linq;
+
+IEnumerator WaitForRes(byte[] bytes)
+{
+ // ↓ Emotion API使用部分
+ string url = "https://api.projectoxford.ai/emotion/v1.0/recognize";
+
+ // リクエストヘッダー
+ Dictionary<string, string> header = new Dictionary<string, string>();
+ header.Add("Content-Type", "application/octet-stream");
+ header.Add("Ocp-Apim-Subscription-Key", "Your Key");
+
+ // リクエストする
+ WWW www = new WWW(url, bytes, header);
+
+ // 非同期なのでレスポンスを待つ
+ yield return www;
+
+ // ↑ Emotion API使用部分
+
+ // エラーで解析結果のJSONを取得
+ if (www.error == null)
+ {
+ var emotionJsonArray = JArray.Parse(www.text);
+ //今回は顔が一人分だけ写っていると仮定し0番目を取り出す
+ JObject scores = (JObject) emotionJsonArray[0]["scores"];
+    //取れたスコアに基づき最も強かった感情をstringで返す
+ string emotion = getEmotion(scores);
+    //キャラクターにその感情にあった表情をさせる
+ Girl g = girl.GetComponent<Girl>();
+ g.SetFace(emotion);
+ }
+}
+
+```
+
+```C#:JSONから最も強かった感情をstringで返す関数
+using Newtonsoft.Json.Linq;
+
+public string getEmotion(JObject obj)
+{
+ string strongEmotion = "";
+ double score = 0;
+ foreach (var x in obj)
+ {
+ string name = x.Key;
+ double value = Convert.ToDouble(x.Value);
+
+ if (value > score)
+ {
+ score = value;
+ strongEmotion = name;
+ }
+ }
+ return strongEmotion;
+}
+```
+
+
+複数の顔が画像に移っている場合は複数人分の感情解析結果が返ってくるようになっています。
+
+```json:EmotionAPIから返ってくるJSON
+[
+{
+ "faceRectangle": {
+ "height": 174,
+ "left": 284,
+ "top": 250,
+ "width": 174
+ },
+ "scores": {
+ "anger": 1.35894252e-05,
+ "contempt": 0.00100439508,
+ "disgust": 7.037945e-05,
+ "fear": 8.25204552e-06,
+ "happiness": 1.33640685e-06,
+ "neutral": 0.9941351,
+ "sadness": 0.00092591357,
+ "surprise": 0.00384104927
+ }
+}
+]
+```
+
+今までにはなかったようなユーザーエクスペリエンスを提供できるサービスが、非常に短いコード行で実現できてプロダクトに載せることができるということがお分かりいただけたのではないかと思います。
+
+## どうやって始めるの?
+
+Cognitive Services の利用の際には Subscription Key が必要になります。無料試用が可能なので[こちら](https://www.microsoft.com/cognitive-services/en-us/subscriptions?productId=/products/54d873dd5eefd00dc474a0f4
+)からご登録ください。Microsoft Account でのログインが必要となります。
+登録して得られた Subscription Key をサンプルコード上の Ocp-Apim-Subscription-Key で指定してください。
+有料プランもあるのでお試しではなくしっかり使いたい方は次の**使用プラン**の項目をご覧ください。
+
+自分でコードを書く前にまずはどんなものか試してみたいという場合は、[公式解説ページ](https://www.microsoft.com/cognitive-services/en-us/emotion-api)を見てもらうと準備されている画像を選ぶ or 自分の画像をアップロードして確認できるようになっているのでおすすめです。
+
+
+## 漫画家兼エバンジェリストちょまどさんの応援
+あまりに絵心のない自分に対して弊社の漫画家兼エバンジェリストとして活動されているちょまどさんがキャラを貸し出してくださいました。
+Twitter アカウントは[こちら](https://twitter.com/chomado?lang=ja)で、
+[はしれ!コード学園](https://codeiq.jp/magazine/category/programminggirls/)というのを連載されているのでぜひ興味を持たれて方は読んでみてください。
+C#ちゃんははしれ!コード学園の登場人物で、キャラの性格設定がC#らしい性格になっていて、他のキャラ(言語)もなるほどなとなる面白い性格設定になっているので、エンジニアの人には楽しんでいただけると思います。
+さらにCEDECでデモをさせていただいた際は、ちょまどさんには声の出演もしていただきました。
+声の方は会場限定公開なので、ファンで会場にいらっしゃった方は非常に幸運だったと思います。
+本当にありがとうございました!
+
+## 後書き
+自分はまだまだ C#, Unity 共に駆け出しなので、こういった書き方の方がいいよというのがあればぜひご指摘いただけるとありがたいです。(後程Gitにすべてのコードを公開する予定なので特にそれに関してお願いします)
+(Githubに上げ次第更新通知送りますね)
+
+## 参考1 (Emotion API の MS 内での位置づけ)
+
+[Emotion API](https://www.microsoft.com/cognitive-services/en-us/emotion-api) は、Microsoft の [Cognitive Services](https://www.microsoft.com/cognitive-services/) というクラウドベースの API サービス群の1つで
+下記5つのカテゴリのうちの Vision カテゴリに属する API です。
+
+* **Vision**
+* Speech
+* Language
+* Knowledge
+* Search
+
+Vision カテゴリ内の API は下記のようになっています。
+
+* Computer Vision ([最近の画像認識の実力~MS の最先端の研究成果 Computer Vision API を Python で使ってみた](http://qiita.com/kosfuji/items/621cbedfad0eb68b2f5d) で取り上げました。)
+* **Emotion** (今回はこれ)
+* Face (画像に写った人の年齢と性別を推定)
+* Video (動画の手ぶれ補正、顔のトラッキング、動作検出、ビデオから短時間のビデオサムネイルを作成)
+
+Face API では画像認識を含んだ以下の機能が提供されています。
+
+* **画像上の顔認識&感情推定** (今回はこれ)
+* 動画像上の顔認識&感情推定
+