4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

CYBIRDAdvent Calendar 2022

Day 21

AR空間にプレゼントを贈ってみた

Last updated at Posted at 2022-12-20

はじめに

CYBIRD Advent Calendar 2022、21日目担当の@kappysanです。
現在は来年春リリースされる『イケメンヴィラン』の開発を担当しています。
前回は@yuki_utsumiさんの「App Store Connectの審査情報をキャッチして通知する仕組み」でした。
一度設定してしまえばこういう通知はとても便利ですよね。先輩方が作り上げてくださった環境に感謝です。

さて、記事の内容に移ります。
以前、弊社ではNFTマーケットプレイスにてマジカルデイズのデジタルトレーディングカードを販売していました。
このカード、なんとAR機能で現実の風景に配置して、実際のコレクション品のように収集・鑑賞を楽しむことができたんです。推しを現実に飾れるって幸せですよね。
私はこちらの担当ではありませんでしたが、これを見てARに興味を持ち、何か作ってみることにしました。
調べたところUnityでARを利用できるAR Foundationというパッケージがあったので、今回はそれを使って遊んでいきます。

環境

  • MacBook Pro 2019 Intel Core i7
  • macOS Monterey 12.6
  • Unity 2021.3.6f1
  • Xcode 14.0.1
  • iPhone11 iOS 15.6.1(テスト端末)

残念ながら私はAndroid端末を所持していないため、本記事はiOSでの実装のみを書いていきます。
iOSのバージョンによって必要なXcodeのバージョンが異なるので、こちらでチェックしておきましょう。
Xcodeのインストールはこちらが参考になります。

Unity実装

プロジェクトの作成

Unityで3Dのプロジェクトを作成します。
プロジェクト名は「AdventCalenderAR」としておきました。
プロジェクト作成.png

パッケージのインストール

必要なパッケージをインストールします。
インストールするパッケージは以下の3つです。

  • AR Foundation 4.2.7
  • ARKit XR Plugin 4.2.7 (iOS用)
  • ARCore XR Plugin 4.2.7 (Android用)

私はAndroidは使わないので、ARCoreは入れません。
バージョンはなんでも大丈夫ですが(古すぎると使えない機能はあります)全て合わせる必要があります。

パッケージのインストールは Window > Package Manager からできます。
Package Manager.png

PackagesをUnity Registryにし、検索窓にARと入力すれば候補に出てくると思います。
パッケージを選択し、installを押下でインストールします。
PM検索.png

オブジェクトの作成

以下2つのオブジェクトを作成します。

  • AR Session Origin
    ARカメラがついており、アプリを立ち上げた位置を原点としてARの座標を認識してくれます。
    こちらに色々なコンポーネントをアタッチしていくことになります。

  • AR Session
    AR としての基本機能(デバイスのトラッキングや、平面の認識)を担うものです。

パッケージをインストールしていれば、HierarchyのXRから追加できるようになっています。
ARの開発では基本的にこの2つのオブジェクトが使われます。
XRオブジェクト.png

AR Session OriginについているAR Cameraを使用するため、Main Cameraは不要です。
削除しておきます。

コンポーネントの設定

AR Session Originオブジェクトに以下2つのコンポーネントをアタッチします。

  • AR Plane Manager
    平面を検出してくれます。
    平面を可視化したい場合はPlane Prefabを設定しますが、今回は必要ないのでNoneのままで良いです。

  • AR Raycast Manager
    タップした座標を取得してくれます。

スクリーンショット 2022-12-18 4.24.42.png

3Dモデルの用意

出現させたい3Dモデルを用意します。
3Dのprefabなら何でも構いません。
今回はクリスマスなのでプレゼントにしましょう!
アセットはこちらを使用しました。
TransformのScaleを(30, 30, 30)に、Rotationを(90, 13.4, 0)にし、RigidbodyのUse Gravityのチェックを外しておきます。

スクリプトの作成

タップした位置にオブジェクトを出現させるスクリプトを作成します。
Unity公式が公開しているPlaceOnPlane.csをコピーして作成します。
PressInputBase.csを継承しているので、そちらもコピーして作成しておきます。
しかし、このままでは以下のようにInputSystemが見つからないエラーが発生してしまいます。

The type or namespace name 'InputSystem' does not exist in the namespace 'UnityEngine' (are you missing an assembly reference?)

InputSystemのパッケージをインストールして解決しましょう。
スクリーンショット 2022-12-18 5.00.40.png

インストールするとWarningが出るかもしれませんが、InputSystemパッケージをアクティブにするか聞かれているので、Yesを選択します。Unityが再起動されるので待ちましょう。
スクリーンショット 2022-12-18 5.02.10.png

PlaceOnPlaneスクリプトを、AR Session Originオブジェクトにアタッチします。
Placed Prefabに、先ほど用意したプレゼントのPrefabを設定しましょう。
スクリーンショット 2022-12-18 5.12.09.png

Unityビルド

Unityでビルドします。
File > Build Settings を開き、Scenes In BuildにSampleSceneを追加します。
PlatformはiOSを選択してSwitch Platformしてください。
スクリーンショット 2022-12-18 5.21.56.png

Player Settings > Player > iOS > Other Settings にて以下のように設定します。

  • Camera Usage Description : AR機能にカメラを使います。
    スクリーンショット 2022-12-18 5.34.27.png

Player Settings > XR Plug-in Management > iOS > Plug-in Providers にて以下のように設定します。

  • ARKitにチェック
    スクリーンショット 2022-12-18 5.30.18.png

ここまできたらBuildを押下します。
ビルドするフォルダはプロジェクトフォルダと分ける必要があります。
AdventCalenderAR_iOSというフォルダを新たに作成し、そこにビルドしましょう。

Xcodeビルド

Xcodeでビルドします。
UnityでビルドしたAdventCalenderAR_iOSフォルダ内のUnity-iPhone.xcodeprojを開きます。
MacにiPhoneを接続すると、iPhoneでコンピュータを信頼するか聞かれるので、信頼を選択します。
IMG_8572.jpg

Any iOS Deviceのところで、接続したiPhoneを選択します。
IMG_8575.jpg

Unity-iPhone > Signing & Capabilities よりAutomatically manage signingにチェックを入れます。
ダイアログが出てくると思うので、Enable Automaticを選択しましょう。
スクリーンショット 2022-12-18 5.44.10.png

Teamにて自分のアカウントを選択します。
Xcodeのアカウント作成が必要です。

エラーが出ていなければ、大丈夫です。
IMG_8584.jpg

三角マークでビルドを実行します。

iPhoneでデベロッパが信頼されていない場合、Xcodeに以下のモーダルが出ます。iPhoneにも同内容のモーダルが出るはずです。
スクリーンショット 2022-12-18 5.58.13.png

iPhoneの 設定 > 一般 > VPNとデバイス管理 > デベロッパAPP よりデベロッパを信頼しましょう。
これでインストールされたアプリを使用できるようになります。

アプリを開き、画面をタップしてみましょう。
IMG_8582.png
メリークリスマス!プレゼントが届きました🎁

さいごに

ほとんどコーディングいらずでAR空間にオブジェクトを出現させることができました。
パッケージって偉大です。
AR Foundationでは他にもできることがたくさんあるので、試してみるのも面白いと思います。

次回、CYBIRD Advent Calendar 2022、22日目は@cy_ssssさんの「若手エンジニア向け:会社説明会で気をつけたこと」です。お楽しみに!

4
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?