AR de クロスワード

# 忘年会ネタに悩む
みなさんの会社では忘年会はやりましたか？会社によっては普通の飲み会ではなくフロアを貸し切ってパーティのように忘年会を開くところもあるかと思います。そこでの悩みはメインコンテンツですよね。今年、うちではARを使ったクロスワードをやりましたので、利用した開発環境や苦労した点など、その一部についてご紹介いたします。**なんとノンプログラミングです！！**
![image.png](https://qiita-image-store.s3.amazonaws.com/0/86213/fc17baa4-bbde-912b-8b40-9bb6b3469fd3.png)

# 要求仕様
会場にあるテーブルごとに構成する10チームに対し、クロスワードと問題用紙を紙で配布し、その正解までをARで導かせたい。クロスワードおよび問題文は事務局が作成する。10種類のクロスワードをマーカとして、正解を導くためのキーポジション(A1,D2,C3とかでワードを作るやつ)をAR上に示すこと。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/86213/85467c52-2702-d791-1e81-4d518f2f7c85.png)

# 開発
## 準備したもの
* Android端末
![image.png](https://qiita-image-store.s3.amazonaws.com/0/86213/aa4c94c1-a432-16bf-67ad-352ea6b951ae.png)

* Unity 5.6.3p2
![image.png](https://qiita-image-store.s3.amazonaws.com/0/86213/4a8166de-40a1-2fda-fe32-d9a1bbbde32c.png)

* AR Engine Kudan 1.5.x
![image.png](https://qiita-image-store.s3.amazonaws.com/0/86213/3610f0e5-0c20-6fad-2055-ec35090376bc.png)

* クロスワードの問題画像
![image.png](https://qiita-image-store.s3.amazonaws.com/0/86213/acafa7c4-f64d-95c8-41db-59c873bcccb1.png)

* クロスワードの正解キーを示した画像
![image.png](https://qiita-image-store.s3.amazonaws.com/0/86213/7414970e-eef1-7b37-3bdf-f2ec7c95d197.png)


## AR Engineの選択について
Unity上でARを実現するためのEngineのメジャーどころは、Kudan,Vuforia,OpenCVかと思います。その中でもカメラのみでSLAM(Simultaneous Localization and Mapping:自己位置推定と環境地図作成の同時実行)を実現してる点で興味があり、勉強したいと思ったので今回はKudanを選択しました。なお、Kudanはイギリスに本社がありますが、日本人が立ち上げた企業とのことです。
https://www.kudan.eu/
以前は英語サイトしかありませんが、最近は日本語記事も増えてきておりデモ動画も充実してきて便利になっております。

## Android SDKをセットアップ
Android上で動作するアプリをUnityで開発する際にはAndroid SDKが必要となります。以下のURLからAndroid Studioをインストールし、インストール端末のAndroidバージョンに合わたSDKをインストールします。
https://developer.android.com/index.html
さらにUnityからそのSDKを参照させるためには、以下の通りAndroid SDKのパスおよびJDKのパスをUnityに設定する必要があります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/86213/bd8d0c9c-87e6-045b-5a0f-5b1481c924d5.png)


## KudanAR SDKのダウンロードおよびUnityへのインポート
https://www.kudan.eu/download-kudan-ar-sdk/
上記URLからUnity用のSDKをダウンロードします。開発ライセンスは無料です。ライセンス詳細については次のリンクを参照してください。https://japan.kudan.eu/other 。SDKをダウンロードしたあとは、Unityを起動し、ダウンロードしたKudanARUnity.unitypackageファイルを実行することでKudanARUnityが当該Unityプロジェクトにインポートされます。

## Android用にbuild platformを変更する
アプリ自体はAndroidで動作させるためAndroid用にUnityのbuild platformを変更する必要があります。できることであれば、開発作業中はUnityEditorModeで検証をしたいところですが、現時点のKudan SDKでは実行環境はiOS,Androidのみのとのことであり、UnityのEditor Modeで実行しても動作しません（落ちます）。そのため、開発中でもAndroidで動作確認をしていくことになります。
まずは次の手順でUnityのPlatformをAndroidに切りまえます。File->BuildSettings画面でPlatform欄からAndroidを選択し[Switch Platform]を押下します。これでAndroid用のビルドになります。

## KudanのdeveloperLicenseKeyの設定
UnityのProjectペインからKudanAR/Samples/KudanSampleをクリックし、Hierarchyペインに表示されるKudanBundle -with UIのInspectorを開き、[Get Editor API Key]ボタンを押下します。ブラウザが立ち上がるのでログインすると、EditorKeyが取得できます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/86213/dba84c5c-4829-9b19-315a-778eaef993b3.png)
表示されたEditorKeyをコピーして、KudanTrackerのEditor API Key欄に設定します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/86213/6b5a0e47-60ff-6ab8-a858-78623d8ace8e.png)
次に同Inspectorの[Set App/Bundle ID]ボタンを押下しOther Settingを開くとBundle Identifier欄があるので、開発用を表す eu.kudan.ar として設定します。Bundle IdentifierはJavaでいうところのアプリのパッケージ名に相当します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/86213/f266aafc-a875-6d50-f3e5-b8b921c83fb3.png)

## まずはKudanARのサンプルを実行してみる
ひとまずこの状態で動かしてみましょう。USBでAndroid端末を接続し、Unity上でFile->Build & Runをクリックします。この過程でUnityはAndroid用のビルドを作り、接続されたAndroid端末にそのビルドをインストールしアプリ起動までやってくれます。インストールされたアプリが起動するとMakerTrackingモードとなります。そこにKudanAR/Samples/Textures/legoにある写真を写すと以下のようにARマーカとして機能し球体が表示されます。この球体は単純にUnityの3Dモデル(Sphere)です。なので、ここにダンスをするロボットを配置しても良いし、マーカに応じた動画を再生することもできます。アイデアが広がりますね！

また、画面下部のStart Markeless Trackingボタンを押下すると、MarklessTrackingモードとなり、Markerなしで自分の好きな場所にARモデルを配置することができるようになります。例えば部屋にAR家具を置いて配置を見たり、部屋のカーテンの色を変えてみたりするようなアプリが考えられます。本来はKinectのようにdepthセンサーがないと解析できないような空間をKudanのSLAM技術を使うことによって映像のみで認識させることができる。ということだそうです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/86213/c5c6e4d6-9d6b-e4bf-b7c8-c039da897b6c.png)
今回のAR de クロスワードではクロスワードがマーカーなのでMarkerTrackingモードを使います。

## KudanAR Tool kitによる特徴データの算出
https://api.kudan.eu/KudanARToolkit/Windows/setup.exe
Kudanにはマーカとなるべき特徴量を算出するツールがついています。それを使って特徴量データを予めUnityに組み込んでおくことができます。まずNewボタンを押下しKudanARProjectを作成します。その後認識させたいマーカの画像をAdd Markerボタンでどんどん追加します。ここでMarkerNameに示されている値がKudanがマーカを認識したときのIDとなりますので覚えておきましょう。
最後に画面右上のExportボタンを押下することで特徴量データを出力(.KARMarker)することができます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/86213/88d10582-1249-13da-8726-ca37b18ee4f6.png)

最新のKudanAPIではオンラインでリアルタイムに特徴量データを算出する機能もついております。例えば、今撮影した写真をその場でマーカとする。みたいなこともできますね。

## クロスワードマーカの組み込み
UnityのHierarchyペインでMakerTrackingのInspectorを開き、Add KARMarker Assetsを押下し、先程KudanAR Tool kitからExportした.KARMArkerファイルを指定します。NewKudanTrackableなるファイルができるのでcrosswordTrackableのようにわかりやすい名前に変更しておきます。その後、MakerTrackingのInspectorにあるMarkesにcrosswordTrackableを指定します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/86213/3e28037f-0a5e-6b80-d4a9-6af6d71ae190.png)
これでクロスワードの問題画像を識別する準備ができました。

## クロスワードマーカを認識したあとに表示させる画像の組み込み
次はマーカを認識したあとのアクションを定義します。今回はクロスワードの正解キーを示した画像を表示させることとします。UnityのHierarchyペインでDrivers/MarkerのInspectorを開き、Expected Idがをmarker1とします。このmarker1とはKudanAR ToolkitでのMakerNameを示しております。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/86213/9bfa61f3-deb0-c00c-fc9d-bf6e4527eaec.png)

次にDrivers/Markerの配下にSphereがありますが、球体は表示させないので削除し、画像を表示させるためのQuadを組み入れます。Quadにはクロスワードの正解キーを示した画像を設定します。Quadで表示させる画像は3D空間に配置しますので見やすいように各種設定値を調整します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/86213/7edda091-4a2b-0f6d-db6b-b08f1f8a6eda.png)


## これで完成
どうでしょう。ここまでノンプログラミングです！驚きですね。実際に動かしてみましょう。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/86213/16e43384-6ab5-61af-161b-76a88b00906e.png)


# 前日のテストで超やばいことに！
やばい。やばい。やばい。
10個のクロスワードの誤認識が激しいことが、残１日前になってようやくわかりました。それはクロスワードができたのが前日だからです。まぁしょうがない。

結局クロスワードは、クロスワードの絵が異なったとしてもマス目で見たときの特徴量はどれも似たり寄ったりだとKudanに判定されてしまったのが原因のようでした。そのため、忘年会では残念ながらクロスワードの下にArUcoマーカを置くこととしました。できれば、個々のクロスワードをマーカにしたかったのですが、時間の制約があり、いい案が思いつきませんでした。

KudanARを使ったベストなマーカは、以下のサイトに記載されておりますので、是非とも参考にしましょう。
https://kudan.readme.io/v1.0/docs/what-makes-a-good-marker

# 本番時の問題点
カメラの性能が悪い端末の場合は、ArUcoマーカすら認識しない場合がありました。さらに照度が低いと認識精度が落ちます。会場自体が明るくてもテーブル上で複数人が覗き込んでいると暗くなってしまうので、ライトを自動点灯させる等の処理も必要でした。
ちなみに技術以前の問題ですが、あくまでの忘年会なのでクロスワードの問題が難しいとゴールまでの到達チーム数が減ってしまいます。みんなで楽しむためには、ある程度レベルまでは難易度は下げる必要があることもわかりました。

# 最後に
技術者が揃った会社ですので、下準備も本番も技術の観点からも楽しめるコンテントとして「AR de クロスワード」はちょうど良いテーマだったと思います。皆さんもネタに困ったら試してみてはどうでしょうか。