「ARで申請衰弱ゲーム」Androidアプリの開発方法

##容姿

この投稿は[ARチームのゲーム](https://qiita.com/callibrie/private/9bab74cd4c730cf391fb)は一部です。ARゲームは神経衰弱みたいです。
これはゲームフローです。(イメージをクリックして、大きいイメージを見られます)[^1]
<img width="600" alt="ゲームフローチャルト" src="https://qiita-image-store.s3.amazonaws.com/0/293083/8aff39ec-c0da-2aed-e1f2-2c1a9365e019.png">


ARチームで私の役割はモビールアプリの開発でした。（イメージの赤い箱）
ゲームを作る時、[「Unity」](https://unity3d.com/)(v2018.2.13)というソフトウェアと[「Vuforia Engine」](https://www.vuforia.com/content/vuforia/en/engine.html)という「AR Engine」を使いました。
作り方は__5つステップ__がありました。アセットを集めて、「Unity」プロジェクトを準備して、「Unity」にアセットを取り込んで、ベースイメージと3Dイメージを繋がて、Androidのアプリをエクスポートしました。

ゲームについて@bananasinmyearと@Hendicheは作文を書きました。
[「ARゲームのゲーム仕方」](https://qiita.com/bananasinmyear/items/8dd6b1b8e3fb848ceb4c)と[「プロジェクトアイデア」](https://qiita.com/Hendiche/private/872567ccb32ee8aa3131)を読んでください。

##プロセス

###アセットを集め方
<img width="200" alt="団子のモーデル" src="https://qiita-image-store.s3.amazonaws.com/0/293083/101cb183-ff51-b281-a3fd-a87ca942beff.png">

アセットはグループが２つあります。
１）２Dベースイメージ（カードのプリントアウト）→QRコードを使いました[^2]。
 [「Unitag」](https://www.unitag.io/qrcode)で３Dキャラの名前の漢字から、QRコードを作りました。

２）３Dオブジェクト・イメージ（スマホに出てくる）→フリーなアセットを使いました[^3]。
チームはARの初級ですから、自分のアセットを作ることがまだできません。
でわ、Unity3Dモデールを探して使いました。
@Dinaさんは[３Dアセットの詳細](https://qiita.com/Dina/items/61065f20edc2c9059569)について作文を書きました。読んでください。

###「Unity」プロジェクトの準備
「Unity」でARモーデルが使う場合は3つ前提があります。
１）「Unity ID」を作る：[サインアップ](https://id.unity.com/en/conversations/17087e78-c20e-4fb7-a5d1-f0c1520216b5004f)
＊「Unity Store」にプロダクトとサービスを買って、使うことができるため、アカウントが必要です。
２）[「Unity Store」](https://store.unity.com/)「Unity」をダウンロードして、インストールする。
＊アプリは売らないから、私たちは「Personal Plan」を使いました。「Unity」の「Terms and Conditions」を読んでください。
３）[「Vuforia」](https://vuforia.com/)のアカウントを作る：[サインアップ](https://developer.vuforia.com/vui/auth/register)
＊「Vuforia」で２Dベースイメージは「ターゲット」になって、「ターゲット」をスキャンして、３DのARイメージを出てくる。「Vuforia」のサービスを使うためにアカウントが必要です。

#####「Vuforia」の「Development License Key」
「Unity」に「Vuforia」を使う前に「License Key」が必要です。
[「Vuforia Developer Portal」](https://developer.vuforia.com/)のページに```Develop > License Manager > Get Development Key```ボタンを押して、「Development Key」が出します。
<img width="350" alt="Vuforia License Key" src="https://qiita-image-store.s3.amazonaws.com/0/293083/3018fbe7-43fc-03e6-c24b-f75646cbf163.png">

「Development Key」は「Unity」に入力します。それから、「Vuforia」で開発することができます。

#####「Vuforia」の「Database」
「ターゲット」になり方の場合に２Dベースイメージの「Database」を作らなければならない。
[「Vuforia Developer Portal」](https://developer.vuforia.com/)のページに```Develop > Target Manager > Add Database```ボタンを押して、「Database」が作ります。
<img width="350" alt="Vuforia Target Manager" src="https://qiita-image-store.s3.amazonaws.com/0/293083/0b303c1f-9c0d-b74a-9613-7e47dbe35bc8.png">

データベースの中に２Dイメージを保存して```Target Manager > [ DB Name ] > Add Target```、```Download Database```ボタンを押して、データベースをエクスポートことができます。

<img width="350" alt="Screen Shot 2018-11-13 at 2.07.23 AM.png" src="https://qiita-image-store.s3.amazonaws.com/0/293083/a752c94d-869a-42df-e361-287904be9833.png">

#####「Unity」に「Vuforia」物の設定
「Scene」に「AR Camera」を加えて```Game Object (Menu) > Vuforia > AR Camera ```、「Hierarchy」の所にARカメラをクリックして、ウィンドウの右に「Inspector」が表示する。「Open Vuforia Configuration」ボタンを押して、「Vuforia Configuration」が出てきます。

「Vuforia Configuration」に「License Key」```テキストバックスに「License Key」をコピペして、「Database」を入力する```。＊「Tracking Behaviour」の特徴ができますから、私のVuforiaバーションにデータベースのインポートは自動です。

<img width="317" alt="Vuforia Configuration" src="https://qiita-image-store.s3.amazonaws.com/0/293083/98ce899f-2a9b-3642-ab0f-9834f0038158.png">

###アセットを取りみ方

アセットは色々なファイルタイプがあります。私たちは2つ型を使いました。
１）「Unity」の「Prefab」[^3]
<img width="100" alt="Unity Store:LUMO-ART 3D FREE Food Pack" src="https://qiita-image-store.s3.amazonaws.com/0/293083/6ac7af6e-1fdb-90dd-ad42-49dc50d05079.png">
-「Unity Store」のアセットのページへ「Import In Unity」ボタンがあります。このボタンを押して、パケージは「Unity」に開けられる。
-「Prefab」は「ready-to-use」なゲームオブジェクトです。アセットの中に「Components」と「Properties」があるので、追加的なインポート物が必要じゃない。

２）「FBX」[^4]&「OBJ」
<img width="100" alt="Screen Shot 2018-11-13 at 11.25.01 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/293083/80febedc-3839-f798-9fd1-a34669eab298.png">
- 色々な「3D Modelling Application」から、「FBX」や「OBJ」フォーマットのファイルをエクスポートをしました。ファイルは「Unity」にインポートの時、デサインがなったら、「Material」を作ることが必要です。
- ```Assets>Create>Material```を選んで、「Material」が作れる。「Material」にアセットの「PNG」のファイルを入れたら、キャラのパターンが出てくります。
＊もし、FBXのファイルはぶぶんをわけましたら、いくつ「Material」は同じ数べきです。
- それから、「Material」は３Dイメージに入れます。

###ベースイメージと3Dイメージを繋がり方
全部３DアセットとDBをインポートして、「Vuforia」でARマッピングができます。

「Hierarchy」サイドバーにARカメラを選んで、メニューから```Game Object>Vuforia>Image```をクリックして、「イメージターゲット」が作ります。
「Hierarchy」サイドバーに「イーメジターゲット」を選んで、「Inspector」が表示する。
<img width="200" alt="Image Target Settings" src="https://qiita-image-store.s3.amazonaws.com/0/293083/2f516cfc-b312-223b-87f1-bca2e6a1c78b.png">
「Inspector」に「Database」とイメージを選んで、確認することができます。
もし、他のイメージを使いたいなら、もう一同「Vuforia」の「Database」のステップをやります。
それから、「Scene」に３Dアセットを入れて、「Inspector」のイメージターゲットに３Dアセットをドラッグして、３Dアセットとイメージターゲットのところを決めます。

PCのカメラがある時に、「Vuforia」のARをテストすることができます。「Unity」の真ん中にプレーボタンをおして、PCのカメラはARカメラになります。カメラはイメージターゲットを見て、３Dアセットが出てきます。

###Androidのアプリのエクスポートの方法
エクスポート前に「Android SDK」が必要です。このリンクはインスコの方法です：[Android Device Testing Tutorial - Unity](https://unity3d.com/learn/tutorials/topics/mobile-touch/building-your-unity-game-android-device-testing)

メニューに```File>Build Settings>Android>PlayerSettings```を選んで、「Vuforia Augmented Reality」のチェックボクスを確認しなければなりません。
<img width="300" alt="Android Settings" src="https://qiita-image-store.s3.amazonaws.com/0/293083/9f8cf76a-8af0-7801-c17a-bebee3edb48a.png">
Androidのスマホがあったら、「Build and Run」ができます。「Build and Run」はスマホにアプリをインスコして、立ち上げます。Androidのスマホがない時に、エクスポートができます。「エクスポート」はAndroidのAPKを作ります。

＊もし、エラーがあったら、この項目をチェックしてみてください：
- 「Player Settings」に「Android TV Compatibility」のチェックバクスはチェックがべきないです。
- 「Build and Run」の時、スマホの「Android Debugging」のパーミッションがべきあります。

##リンク
* https://library.vuforia.com/articles/Training/Image-Target-Guide
* ありがたい：先輩「@harfendybit」もっとxRの技術の作文があるので、ご覧ください。

以上です！ありがとうございます！

[^1]: フローのイメージは[flowchart.js](https://flowchart.js.org/)を使いました。
[^2]: [Unitag](https://www.unitag.io/qrcode)でQRコードを作りました。
[^3]: だんごの３Dのアセットは[「Unity Asset Store」](https://assetstore.unity.com/packages/3d/props/food/free-food-pack-85884)からです。
[^4]: Free3D: [poke_master](https://free3d.com/user/poke_master)の [「Eeveeアセット」](https://free3d.com/3d-model/eevee-pokemon-81653.html)を使いました
[^5]: (Android Device Testing Tutorial - Unity)[https://unity3d.com/learn/tutorials/topics/mobile-touch/building-your-unity-game-android-device-testing]