GoogleCardboard for Unityのサンプルプロジェクトを実機で実行するまで

# スマホVRゲームを作りたい！

きっかけは1000円ぐらいのスマホ用VRゴーグルを買ったことでした。
最初は360度動画をYoutubeで見て楽しんでいましたが、それでは満足できず、ゲームをしてみようとPlayストアを開いて検索をかけてみると...... **リモコン必須のゲームが多すぎる！**
視線操作のみで遊べるゲームはごく少数で、しかもその中で面白いゲームを探し出す必要があります。

そんな作業をするぐらいなら、自分で最高のVRゲームを作ってしまいましょう。

# 手順
この記事はほとんどが[Google公式のガイド](https://developers.google.com/cardboard/develop/unity/quickstart?hl=ja)に沿って作られています。
できるだけわかりやすく書くつもりですが、よくわかんないときは公式の情報を見ながら実行するとうまくいくかもしれません。

環境：
Windows11 Home Edition
Unity Hub 3.5.0
Unity 2021.3.4f1

:::note
本環境では、UnityのUIを日本語化しています。
UIが英語の場合は公式のガイドを参考に実行してください。
:::

## 1.新規プロジェクトの作成
普通にUnityHubから新規プロジェクトを作成してください。
ただしこの時、**プロジェクト名に全角文字を使わない**でください。
使った場合、ビルド時にエラーが出てapkファイルを作成できなくなります。
![New.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751564/75acee2e-7fd4-ca44-77ff-091f17e9bcd9.png)

## 2.Google Cardboard XRプラグインの導入
メニューからパッケージマネージャーを開き、
![packagemanager.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751564/0f8fbcc8-7580-2b2c-a11e-b1f673a1b6dc.png)
左上にある「+」ボタンを押し、「GIT URLからパッケージを加える」をクリックします。
![giturl1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751564/45c15713-22d2-1974-f225-636c1199a13c.png)
出てきたリンクを入力する欄に
```URL:リンク
https://github.com/googlevr/cardboard-xr-plugin.git
```
と入力し、「追加」をクリック。
![giturl2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751564/880ea983-114e-9569-356e-f9c45b95365f.png)
下の画像のように「Google Cardboard XR Plugin for Unity」がパッケージに追加されたことを確認します。
![samplepush.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751564/03018b5a-c0e3-61b6-f095-7424dc47e91f.png)
次は、「サンプル」をクリックし、出てきた「Hello Cardboard」というサンプルプロジェクトをインポートするため、「インポート」をクリックしてください。
![sampleopen.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751564/262f891b-72f7-128b-59bb-c57524504a0d.png)
自動でシーンが遷移し、HelloCardboard.sceneが開かれた状態になります。
（ならなかった場合、
Assets/Samples/Google Cardboard/（パッケージのバージョン）/Hello Cardboard/Scenes
を開き、その中にあるHelloCardboardを開いてください。）
![Sceneopen.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751564/94bcb47a-4c14-c011-03cb-5b0f86f78b3b.png)
次は、レイヤーを追加します。「Treasure」というオブジェクトを左のヒエラルキーから選択し、レイヤーの欄をクリックし、「レイヤーを追加」を押します。
![addlayer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751564/4077b4a4-4116-3e07-83fa-fabf1cd888d9.png)
下のような画面になると思うので、画像の青色の部分のように「Interactive」をレイヤー6に追加します。
![addlayerinteractive.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751564/131f006f-3634-4569-9bca-aa4425ba6609.png)
追加出来たらもう一度ヒエラルキーから「Treasure」を選択し、レイヤーの欄をクリックし出てきたメニューから「6:Interactive」を選択します。
![completeaddlayer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751564/abc0e05c-df1f-bca5-7043-d24e5ad97468.png)
「すべての子オブジェクトに対してもレイヤーをInteractiveに設定しますか？」と聞いてくるので、「はい、子を変更します」を選択します。
![childchangeOK.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751564/00c6bcc5-7d65-6d14-1f03-46dbac47815f.png)
次に、左のヒエラルキーの「Player」オブジェクトの子の「MainCamera」の子の「CardboardReticlePoint」を選択し、「Cardboard Reticle Pointer（スクリプト）」というコンポーネントの「Reticle Interaction Layer Mask」の欄をクリックし、
![changelayer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751564/72574e69-98f3-c2c8-1482-d0c47780d2ac.png)
「Interactive」を選択します。
![pointerlayerchange.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751564/0620c819-f60f-b94b-4e90-04e4180260da.png)

## 3.ビルド設定
上のメニューの「ファイル」→「ビルド設定」の順にクリックし、ビルド設定を開きます。
まず初めに、今回作るのはAndroid向けアプリなので、ターゲットプラットフォームを変更します。
![changetarget1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751564/03a7d671-b37e-52b9-b59c-defd7541f638.png)
左側の欄から「Android」を選択し青くなったら、右下の「ターゲットの切り替え」を押します。
![changetarget2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751564/bc86e595-a3c8-bfb7-fde1-484ca07f22c4.png)
画像のように、UnityのマークがAndroidの欄に移動します。
できたら、上側の「シーンの追加」ボタンを押して、ビルド時にHelloCardboard.sceneを含むように設定しておきましょう。
![addscene.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751564/15008d20-aa49-dbc3-b3bf-8197a6cfc967.png)

## 4.プロジェクトの設定
ビルド設定のウィンドウの左下にある「プレイヤー設定」を押し、プロジェクトの設定をしていきます。
まず「解像度と表示」をクリックします。すると、たくさん設定項目が出てきます。
最初の方に「最適化されたフレームペーシング」という項目があるので、チェックを外しておきましょう。
![Desabledframepacing.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751564/37f2397d-b69c-5f41-6c7f-e83e5f119ebf.png)
次に、下の方にスクロールすると、「デフォルトの向き」と書かれた欄があります。デフォルトでは「縦向き」となっていますが、「横向き(左)」か「横向き(右)」を選択しておきましょう。
![defaultrotate.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751564/65e4a7ab-c925-08d3-f900-292237f51a8b.png)
これで「解像度と表示」の設定は終了です。もう一度「解像度と表示」をクリックし、閉じておきましょう。
次に、「その他の設定」をクリックします。
最初の方にある、「自動グラフィックスAPI」のチェックを外し、表示された欄が画像のようになっているか
確認します。
![AutographicsAPI Disabled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751564/d55ada26-f2c1-2422-3b7f-6c1ed36c86ec.png)
ちょっと下の方に「Vulkan設定」があるので、「レンダリング中に表示の回転を適用」のチェックを外します。
![Vulcanrotatesettings.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751564/6f804d0f-3e7f-2440-fd6b-94407d62dc4c.png)
次に、テクスチャ圧縮形式を変更します。「テクスチャ圧縮形式」の欄をクリックし、「ETC2」を選択してください。
![textureassyuku.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751564/c8708921-ad62-007f-b2a2-5b04b2055506.png)
次に、どのようなAndroidデバイスを対象とするか設定します。
「最低APIレベル」を「Android 7.0 'Nougat' (API level 24)」以上、
「ターゲットAPIレベル」を「API level 31」以上で選択します。

↓最低APIレベル
![minimumAPILevel.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751564/ae05c03e-3864-c99c-6175-3ae48916ca63.png)

↓ターゲットAPIレベル
![targetAPILevel.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751564/41ce1bf8-0a9d-9ac3-6eac-cf76b3729b8b.png)

さらに下にスクロールし、「スクリプティングバックエンド」を「IL2CPP」に変更。
![scriptingbackend.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751564/f43c3860-9041-afb0-e5f5-fa85d2694dfc.png)

その下にある「ターゲットアーキテクチャ」で画像の通り「ARMv7」、「ARM64」を選択します。
![targetarchtitectures.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751564/3d8f4aca-8877-82bd-e411-107fcfb9116a.png)

次に、その下の「インターネットアクセス」を必須に変更します。
![Internetacsess.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751564/f23e73ed-5100-dc5d-2970-435cecfa5d7e.png)
これで「その他の設定」の設定は完了です。
次に、「公開設定」の項目をクリックします。
そして、「ビルド」の項目の「カスタムメインGradleテンプレート」と「カスタムGradleプロパティテンプレート」にチェックを入れます。
![custommainGladletemplate.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751564/0a91930e-4a60-7807-d1ca-7b1b9711902a.png)
これでプロジェクトの設定は完了です。

## 5.ファイル内容の書き換え
UnityHubを開き、先ほど作成したプロジェクトの項目の右側にある三つ点が並んでるやつを押し、「エクスプローラーで表示」をクリックします。
![UnityhubExplorer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751564/318a9d36-0c5c-655d-15f8-31791b725326.png)
エクスプローラーが開いたら、そのディレクトリにある自分のプロジェクトのフォルダを開き、「Assets」→「Plugins」→「Android」の順に開きます。
設定がしっかりできていれば、画像のようなファイルが並んでいるはずです。
![explorergladletemplate.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751564/5730a788-e15b-ae50-786d-82c4feb21c59.png)
まず最初は、「mainTemplate.gradle」を開き、下の画像のように「dependencies{}」のところにコードを追記します。
```gradle:追記するコード
implementation 'androidx.appcompat:appcompat:1.4.2'
implementation 'com.google.android.gms:play-services-vision:20.1.3'
implementation 'com.google.android.material:material:1.6.1'
implementation 'com.google.protobuf:protobuf-javalite:3.19.4'
```
![add to maintemplate.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751564/25d61762-c735-a178-c148-74d70a3f2e1a.png)
編集できたら保存して、次は「gradleTemplate.properties」を開きます。
開いたら、以下の内容を画像のようにファイル末尾に追記します。
```gradle:追記するコード
android.enableJetifier=true
android.useAndroidX=true
```
![add to gradleTemplateproperties.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751564/4e8194f4-16e7-5726-7816-403d428dea57.png)

## 6.XR Plug-in Managementの設定
最後の手順です。Unityに戻り、メニューから「編集」→「プロジェクト設定」を開き、一番下にある「XR Plug-in Management」を選択します。
そして、画像のように「Cardboard XR Plugin」にチェックを入れます。
![XR plugin Management.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751564/5c1d1db8-c3ba-ec93-52f4-8fae64eab965.png)

## 7.ビルド
これですべての手順が完了しました。あとはビルドをして実機でテストするだけです。
何も問題がなければ、エラーなしでビルドを完了できるはずです。

↓実際に実機で動作させている画像
![Screenshot_20230905_220129.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1751564/d979e803-48ea-4ab9-c599-534455e5c889.jpeg)

ちなみに自分はプロジェクト名を全角にしていたためエラーが出ました。
そしてそれに気づかずいろいろ書き換えまくって結局元に戻せなくなり、最初からやり直しました（泣）