Help us understand the problem. What is going on with this article?

だんグラの MenuSample を動かしてみる

はじめに

ホログラム社から提供されているだんグラを購入したので, 公開されている HologlaSDK のサンプルシーンを iOS で動かすためのチュートリアル的な記事を備忘録として残しておきます.

だんグラについて

段ボールで出来た本体にスマホを装着して使う XR グラスです.
本体価格は 5000 円程度であり, 気軽に試せるのが良いですね.

XR (AR/VR/MR) の同時開発をサポートしているため Unity 上でカメラコンポーネントの設定をいじるだけで各モードを移行できるのが便利です.

操作入力系統としては

  • 右クリック
  • 左クリック
  • 左右同時クリック

を HologlaSDK を用いることで簡単に実装出来ます.
実際の仕組みとしては, だんグラ本体の左右についているタップスイッチを押し込むことで搭載したスマホをタップし, 入力を検知するという感じです.

この記事の概要

  • ARKitPlugin および HologlaSDK の導入
  • MenuSample のビルド
  • 実機で実行

開発環境

macOS 10.15.3
Unity 2018.4.17f1
Xcode 11.31
iPhoneX iOS 13.3.1

プロジェクトの作成

Unity Hub を起動し,
プロジェクト -> 新規作成 から新しいプロジェクトを作成.
テンプレートは 3D を選択.
プロジェクト名はとりあえず HelloDangla にしておきましょう.
適当な保存先を決めたら 作成 をクリック.

1_プロジェクト作成2.png

パッケージ類のインポート

hologlaSDKの導入

  • GitHubから hologlaSDK を保存
  • 保存したzipファイルを解凍
  • Assets -> Hologla フォルダを, プロジェクトウィンドウの Assets 直下にドラッグ&ドロップ

2_HologlaSDK導入.png

ARKitの導入

  • こちらより「動作確認済みARKitのUntyプラグイン」の項目から bitbucket のページへ
  • bitbucket から ARKit を保存
  • 保存した zip ファイルを解凍
  • Assets -> UnityARKitPlugin フォルダを, プロジェクトウィンドウの Assets 直下にドラッグ&ドロップ

3_ARKIt導入.png

MenuSampleシーンの導入

まず, Unity のメニューバーの Hologla -> ARKit -> Initialize Project with ARKit を選択します.

4_InitializeARKit.png

次に, プロジェクトウィンドウの Hologla -> Scenes から MenuSample をヒエラルキービューにドラッグ&ドロップ.

5_MenuSample.png

プロジェクト初期化時に作成される SampleScene は今回使わないので Unload しておきます.

6_SampleSceneunload.png

次に, Unity のメニューバーの Hologla -> ARKit -> Initialize Scene with ARKit を選択します.

7_InitializeScene.png

ヒエラルキービューに

  • HologlaInput
  • HologlaCameraParent
  • ARCameraManager

が追加されますが, HologlaInput と HologlaCameraParent は MenuSample シーンに既に存在しますので削除します.

8_諸々の削除.png

各種コンポーネントの設定

ARCameraManager

ARCameraManager にある UnityARCameraManager コンポーネント の [Camera] に, HologlaCameraParent -> HologlaCamera をドラッグ&ドロップで設定.

9_ARCameraManagerの設定.png

HologlaCamera

HologlaCamera にある HologlaCameraManager コンポーネントの [ArBackgroundMaterial] に, Hologla -> MaterialsHologlaYUVMaterial をドラッグ&ドロップで設定.

また, [Current View Mode] を MR に,
[Current View Size] をお手持ちの iPhone に合わせて下記のように設定.

  • Size 1: 6S-7-8
  • Size 2: X-ZS
  • Size 3: XR
  • Size 4: 6S-7-8Plus
  • Size 5: XS-Max

※ 公式アプリの設定項目より. Size 2 を iPhoneX でのみ確認済み.

10_HologlaYUVMaterial.png

HologlaInput

HologlaInput -> Canvas -> RightButton にある Butoon コンポーネントの OnClinck() 右下の [+] をクリック.
None の箇所に HologlaCameraParent -> HologlaCamera をドラッグ&ドロップ設定.
[No Function] を GazeInput -> InputRightEvent() に変更.

11_HologlaInput.png

その他の設定

BuildSettings

プロジェクトを iOS 用の設定にします.
メニューバーから File -> Build Settings を選択.
Platform から iOS を選択して Switch Platform をクリック.
Platform の iOS の横に Unity のアイコンが表示されていることを確認.

12_BuildSettings.png

PlayerSettings

ビルド時のオプション設定をします.
メニューバーから Edit -> ProjectSettings を選択.
ウィンドウが表示されたら, 左のビューから Player を選択.
Settings for iOS を選択.
後は下記のように設定を変更していきます.

13_PlayerSettings.png

Other Settings

Identification の Bundle Identifier に適当な名前を設定します (今回は com.Test.MenuSample).

Configuration の Camera Usage Description に何らかの文字列が入力されていることを確認 (実機起動時のカメラ使用許可で表示される文字列になります).

Configuration の [Target Device] を iPhone Only に設定.

Configuration の [Target minimum iOS Version] を 11.0 に設定.

14_PlayerSettings_OtherSettings.png

Resolution and Presentation

Orientation の [Default Orientation] を Landscape Left に設定 (画面を左向きに固定).

15_PlayerSettings_ResolutionandPresentation.png

Unity上でテストしてみる

ARKit を使ったプロジェクトは実機での使用を想定しているため, Unity 上では通常テストすることができません. UnityARKitRemote 等を使用すればできることにはできるのですが, 導入の手間を考えると少々面倒くさいので簡単にテストできるようにしておきましょう.

今回のサンプルの場合, 本来スマホの動きに伴って移動するカメラをキーボードから制御できるようにすればテストができるため, カメラに制御用スクリプトをつけてあげます.

HologlaCameraParent -> HologlaCamera を選択し, インスペクターウィンドウの Add Component から New script を選ぶ.
Name を CameraMover にして Create and Add をクリック.

16_addscript.png

作成した CameraMover.cs にこちら様の記事の CameraMover.cs の内容をコピぺします.

これでWASDで移動, 右ドラッグで向きの制御ができるようになりました (その他の操作は上記の記事参照).

それでは再生ボタンをクリックして ゲームビューから確認してみましょう.
真ん中の白い球体のオブジェクトが自分の視点を表しています.
画面右下, 左下の白い部分がそれぞれ左クリック, 右クリックの入力部になっており, ゲームビュー上ではそれらをマウスでクリックすることでクリック入力できます.

MR, VR, AR 以外の適当な項目に注目して右クリック入力をし, メニューに変化があればサンプルメニューの実装はOKです.
なお, 左クリック入力をすると視点のリセットができます.

Unity でビルド

Unity プロジェクトから Xcode 用のプロジェクトを出力します.

メニューバーから File -> Build Settings を選択.
Add Open Scenes をクリックし, Hologla/Scenes/MenuSample のみチェックを入れます.
Build をクリックしたら, 適当な名前をつけて保存します.

17_Unityビルド.png

Xcode でビルド

先ほど Unity でビルドした際に作成されたフォルダの中にある Unity-iPhone.xcodeproj をクリックして Xcode を開きます.
Xcode が開かれたらナビゲータエリアの Unity-iPhone をクリック.

続いてエディタエリア で Signing & Capabilities を選択し, [Team] に自分のチームを設定します.

18_Xcode_signing.png

最後に Mac と iPhone を接続し, 接続した iPhone が認識されていることを確認できたらツールバーの再生ボタンをクリックして実機にインストール.

19_Xcode_build.png

HelloDangla という名前のアプリがインストールされるので, アプリを起動しスマホをだんグラに装着しましょう.

終わりに

今回, HologlaSDK のサンプルシーンである MenuSample をビルドし, 実機で実行しました.

この MenuSample は公式アプリ CandyRockStar などの起動時に表示されるものと同一であるため, アプリケーション自作の際にも役に立ちそうです.

参考

https://ho-lo.jp/sdk/
https://github.com/ho-lo/HologlaSDK-Unity
https://qiita.com/Nekomasu/items/f195db36a2516e0dd460

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした