今回は初学者向けの簡単なマーカー型のARアプリを作成していきます.
完成イメージは以下の通りです.
![](https://reiyablog.com/wp-content/uploads/2024/04/IMG_0337-1024x473.png)
あらかじめ設定しておいた画像をカメラが認識すると,その上にオブジェクトを生成するという単純なアプリです.
開発環境
環境は以下の通りです.
- macOS (14.4.1)
- Unity Editor Version (2022.3.19f1)
- Xcode (15.2)
- iPhone 12 (17.4.1)
プロジェクトの作成
new projectで3Dを選択し新規プロジェクトを作成します.
![](https://reiyablog.com/wp-content/uploads/2024/04/スクリーンショット-2024-04-08-20.43.20.png)
プロジェクト名はわかりやすいように『AR app』とします
パッケージのインストール
プロジェクトが開けたら,以下のパッケージをインストールしていきます.
- AR Foundation (5.1.3)
- Apple ARKit XR Plugin (5.1.3)
AR Foundation
Window→Package Managerを選択します
![](https://reiyablog.com/wp-content/uploads/2024/04/スクリーンショット-2024-04-08-20.50.41.png)
arと検索すると『AR Foundation』が出てくると思うので選択し,Installをクリックします.
![](https://reiyablog.com/wp-content/uploads/2024/04/スクリーンショット-2024-04-08-20.51.19-1024x770.png)
リスタートを求められるので『Yes』を選択しましょう.
![](https://reiyablog.com/wp-content/uploads/2024/04/スクリーンショット-2024-04-08-20.56.41-1024x770.png)
Apple ARKit XR Plugin
同様に,Apple ARKit XR Pluginもインストールします.
![](https://reiyablog.com/wp-content/uploads/2024/04/スクリーンショット-2024-04-08-20.57.59-1024x770.png)
シーンのセットアップ
Hierarchy内に標準で配置されているMain Cameraを削除してください.
その後,Hierarchy内で右クリックをしてXR→XR Originを選択し『XR Origin』を配置します.
![](https://reiyablog.com/wp-content/uploads/2024/04/スクリーンショット-2024-04-08-21.04.34-1024x926.png)
XR Originが配置できたら同様に,XR→AR Sessionで『AR Session』を配置します
![](https://reiyablog.com/wp-content/uploads/2024/04/スクリーンショット-2024-04-08-21.08.41-1024x944.png)
AR Tracked Image Managerの設定
次にXR Originを選択し,Add Componentで『AR Tracked Image Manager』を追加します.
![](https://reiyablog.com/wp-content/uploads/2024/04/スクリーンショット-2024-04-08-21.12.23.png)
AR Tracked Image Managerには以下の3つの項目があるので1つずつ埋めていきます.
![](https://reiyablog.com/wp-content/uploads/2024/04/スクリーンショット-2024-04-08-21.17.38.png)
まずSerialized Libraryを設定していきます.
Projectの左側にある『+』をクリックすると一番上に『XR』が表示されるので
XR→Reference Image Libraryを選択してください.
![](https://reiyablog.com/wp-content/uploads/2024/04/スクリーンショット-2024-04-08-21.19.51.png)
![](https://reiyablog.com/wp-content/uploads/2024/04/スクリーンショット-2024-04-08-21.20.19.png)
Assetsに配置されたら,Reference Image Libraryを選択した状態でInspectorのAdd Imageをクリックします.
![](https://reiyablog.com/wp-content/uploads/2024/04/スクリーンショット-2024-04-08-21.22.14.png)
すると以下の項目が表示されます.
![](https://reiyablog.com/wp-content/uploads/2024/04/スクリーンショット-2024-04-08-21.24.37.png)
好きな画像をAssetsにドラッグ&ドロップで追加した後,その画像を『None』という部分にドラッグ&ドロップします.
Specify Sizeにチェックマークを入れ,Xを0.2にします.
次にXR Originを選択し,今設定したReference Image LibraryをSerialized Libraryにドラッグ&ドロップします.
Serialized Libraryの下にあるMax Number Of Moving images …は1にしてください.
![](https://reiyablog.com/wp-content/uploads/2024/04/スクリーンショット-2024-04-08-21.29.04-1024x626.png)
次に表示させるオブジェクトを設定します.
なんでも問題ありませんが,ここでは適当に白いキューブを表示させようと思います.
プレハブを作成し『Tracked Image Prefab』に設定することで,先ほど設定した画像が認識された時に,そのプレハブが生成される仕組みです.
では,プレハブを作成していきます.
ヒエラルキー内で右クリックをしてキューブを作成します.
![](https://reiyablog.com/wp-content/uploads/2024/04/スクリーンショット-2024-04-08-21.31.17-1024x698.png)
![](https://reiyablog.com/wp-content/uploads/2024/04/スクリーンショット-2024-04-08-21.32.50-1024x698.png)
unity上でのScale 1は現実世界では1mなので,キューブのScaleは0.1に設定しておきます.
設定が完了したらヒエラルキー内にあるキューブをAssetsにドラッグ&ドロップします.
完了したら,ヒエラルキー内にあるキューブは削除してください.
![](https://reiyablog.com/wp-content/uploads/2024/04/スクリーンショット-2024-04-08-21.36.03-1024x709.png)
これでXR OriginのTracked Image Prefabに先ほど作成したキューブのプレハブをドラッグ&ドロップすれば完了です.
![](https://reiyablog.com/wp-content/uploads/2024/04/スクリーンショット-2024-04-08-21.36.36-1024x709.png)
ビルド設定
次にビルドの準備をしていきます.
プロジェクトの設定
Edit→Project Settingsを開きます.
![](https://reiyablog.com/wp-content/uploads/2024/04/スクリーンショット-2024-04-08-21.39.22-746x1024.png)
PlayerからiOSタブを選択し,Other Settingsを開きます
![](https://reiyablog.com/wp-content/uploads/2024/04/スクリーンショット-2024-04-08-21.39.57-1024x494.png)
下の方にあるRequires ARKit supportにチェックを入れます.
![](https://reiyablog.com/wp-content/uploads/2024/04/スクリーンショット-2024-04-08-21.40.32-1024x491.png)
次に一番下にあるXR Plug-in ManagementのiOSタブを開き,Apple ARKitにチェックを入れます.
![](https://reiyablog.com/wp-content/uploads/2024/04/スクリーンショット-2024-04-08-21.54.05-1024x426.png)
ビルド
次にビルドをしていきます.
File→Build Settingsをクリックします.
![](https://reiyablog.com/wp-content/uploads/2024/04/スクリーンショット-2024-04-08-21.40.52.png)
Add Open Scenesをクリックし,Sceneを追加します.
その後,PlatformをiOSにし,下部のSwitch Platformをクリックします.
![](https://reiyablog.com/wp-content/uploads/2024/04/スクリーンショット-2024-04-08-21.41.18-1024x933.png)
変更が完了したら,Buildをクリックしビルドをしてください..
実機テスト
ビルドが完了したら,作成したフォルダ内にあるXcodeプロジェクトを開いてください.
Unity-iPhoneを選択し,Signing & Capabilitiesタブを選択します.
Automatically manage singningにチェックを入れます.
![](https://reiyablog.com/wp-content/uploads/2024/04/スクリーンショット-2024-04-08-21.44.52-1024x202.png)
すると,確認を求めるポップアップが表示されるので『enable automatic』を選択します
Teamで登録済みのアカウントを設定し,Bundle Identifierにユニークな名前をつけます.
『com.DefaultCompany.』の後ろからが名前になります.
Bundle Identifierがありきたりな名前だとエラーが出ることがあるので注意してください.
僕は適当にその日の日付を末尾に追加しました.
![](https://reiyablog.com/wp-content/uploads/2024/04/スクリーンショット-2024-04-08-21.48.26-1024x238.png)
これで準備は完了です.
iPhoneに接続し左上の実行ボタンを押します.
するとパスワードを求められるので入力しましょう.
iPhoneにビルドが完了したら先ほど登録した画像を写してみましょう.
以下の画像のようにキューブが表示されたら完成です!👏
![](https://reiyablog.com/wp-content/uploads/2024/04/IMG_0337-1024x473.png)
今回は初心者向けの超簡単なARアプリを作成しました.
少しでも参考になれば幸いです!
コメント