スキップしてメイン コンテンツに移動

【図解】OculusQuest開発環境を整える導入編(2019/12月版)

 今回は初心者でも簡単にOculusQuestを開発する環境を整えていきます。
OculusQuestはAndroidを内蔵していて、Unityで開発が可能なので図解で設定や必須パッケージ等を説明していきます。

筆者環境

・MacBookPro(2017年モデル)
・Unity バージョン2019.2.17f1


前提条件

・UnityHubをインストールしている
・Unity(本記事では"2019.2.17f1"を使用)をインストールしている
・OculusQuestを開発者モードにしてある


前提条件解決参考

UnityHub・Unityのインストール
開発者モードについて


1. プロジェクトを作る

UnityHubを起動したらまずプロジェクトを作成します。
今回OculusQuestがAndroidを搭載しているので、先にJDK・AndroidSDKのインストールをしてからプロジェクトを作成します。

まず、プロジェクトを作成するUnityバージョンのメニューを開いて「モジュールを加える」をクリックします。

図1: JDK・AndroidSDKインストール①

次に、「Android Build Support」下の項目全てにチェックをつけます。

図2: JDK・AndroidSDKインストール②

これでUnityでAndroidアプリの開発ができるようになりました。


2. 各種設定

次にプロジェクトの環境設定をしていきますが、Unityの設定UIの文字が小さいので図でわかりやすく説明していきます。 主な設定はAndroidVR(Oculus)用の二つですが少々ボリュームがあるので間違えないよう気をつけましょう。

まずそれぞれの設定をするために「Build Settings」を開いていきます。
「Build Settings」はFile>Build Settingsで開くことができます。

図3. Build Settingの出し方

「Build Settings」が開けると、下の図4のようになるかと思われます。
ここでまずこのプロジェクトがAndroidプリプロジェクトであることを下の図4にしたがって設定します。
もし既にこの設定ができていれば、Platfrom欄のAndroidの横にUnityマークがつきます。
おそらくこの設定には5分ほど時間がかかるかと思われるので焦らずに待ちましょう。

図4. プラットフォームの変更

Androidプロジェクトに設定できたら次は「Player Settings」で設定していきます。
「Player Settings」は「Build Settings」の左端のボタンを押して開きます。

図5. Player Settingの出し方

「Player Settings」が開けると右側に設定一覧があるので、まず「XR Settings」を開きます。
下の図6を参考にVRサポートの設定をしていきます。

図6. VRサポート設定

これでこのプロジェクトがVRプロジェクトであることが設定できました。
しかし、ここで見落としがちな落とし穴として下の図7のような警告があります。
内容は、「Vulkan」というグラフィックAPIがXRに対応していないという内容です。
ここではあくまで警告として表示されていますが、ビルドするときにエラーが出てしまうのでこれを無効にする設定をしていきます。

図7. ちょっとした落とし穴

「Vulkan」グラフィックAPIを無効にするには、「XR Settings」の少し上にある「Other Settings」で設定します。
「Other Settings」を開くと下の図8のようになるので、図8を参考に設定します。

図8. Vulkanの無効化

次に、Androidアプリとしての設定をしていきます。
項目は、Androidアプリパッケージ名の形式でパッケージ名の設定とAndroidAPIレベルの設定です。
パッケージ名は好きに決めても良いですが、APIレベルは図9で指定されたものを設定してください。

図9. Android用設定

設定はこれで終わりです。


3. アセット入手

これでプロジェクトがAndroidとOculus開発環境に設定できたので、Oculus開発アセットを適用します。
アセット名はOculus IntegrationでUnityAssetStoreからダウンロード・インポートできます。

UnityAssetStorewo開くにはUnity画面中央部のビューのメニューの「Asset Store」をクリックします。
アセットストアが開いたら検索欄でOculus Integrationを検索をしてアセットページを開きます。

図10. アセットストアの出し方

Oculus Integrationのページが開いたらDownloadボタンを押してダウンロードをします。
ダウンロードが終わるとDownloadと書かれていたボタンが図12の様にImportに変わるので再度クリックします。

図11. アセットのダウンロード
図12. アセットのインポート

Importを押すと図14の様なウィンドウが出てくるので、右下のImportボタンをクリックしましょう。
すると、アセットのインポートが始まるので終了を待ちます。
このインポートも少し時間が掛かるので気長に待ちましょう。

図13. インポート画面

インポートが終わると下の図13の様なアラートが出るかもしれません。
このアラートはパッケージ等のアップグレードを要求していますので、もしこの様なアラートが出たら指示に従ってアップグレードしていきましょう。
アップグレードが終わると再起動を要求されるのでUnityを再起動します。

図14. パッケージのアップデート喚起アラート

ここまでの作業がうまくいくと下の図15の様にAssetsフォルダ直下にOculusフォルダが生成されます。
この中にOculusを開発するためのプレハブなどが格納されています。

図15. アセットがインポートされた!

これで開発するための材料が揃いました。


4. アセットをプロジェクトに適用

アセットのインポートができたらこれで自由に開発ができるようになりました。
まずはVR内で自分の視点となるカメラを配置していきます。

VR視点カメラのプレハブは、Assets/Oculus/VR/Prefabs/フォルダのOVRCamera.prefabです。
このプレハブをヒエラルキーにドラッグ&ドロップして追加します。

図16. VR視点のカメラを追加

OVRCameraを追加できたら、元からあった「Main Camera」を削除します。

図17. Main Cameraの削除

次に、OVRCameraRigの設定を下の図18を参考にします。
この設定でカメラがOculusQuest用に設定されます。

図18. OVRCameraRigの設定


5. 実機で動かす

ついに実機で動かす段階まで来ました。
前章でVR視点のカメラオブジェクトだけを追加したので実機で動かすと360°何もない空間が見えるようになります。
予めOculusQuestは開発者モードにしておき、PCにUSB接続しPCからのUSBデバッグを許可しておきましょう。 それでは実機で動かしてみましょう。

再度「Builld Settings」画面を開いて「Build And Run」ボタンを押して実機実行します。

図19. Builld Settingsからビルド実行

ビルドが始まる前に、ビルド名とビルド先を設定します。
設定が終わったら「save」ボタンを押してビルドします。
このビルドも時間が掛かる作業になるのでくつろいで待ちましょう。
ビルドが終わるとOculusQuest側で勝手にアプリが立ち上がるので、動作を確認しましょう。

図20. ビルド名・ビルド先設定

無事実機確認がとれれば、これでOculusQuestの開発環境が整ったことになります。

終わりに

OculusQuestを開発する時MacbookとType-C一本ですむのでVR開発もとても便利になったと思います。
ただ、開発時に毎回ビルドして実機デバッグでは時間がかなり掛かる様な気がするので何か方法があればまた記事にしたいと思います。

参考:

qiita.com

コメント

このブログの人気の投稿

Phaser3 + Typescriptを使ってRPGゲームの基礎を作ろう!その2

前回の記事 に引き続きPhaser3+Typescriptを使って RPG の基礎を作っていきます。 この記事は前回の記事を呼んだ前提で説明していきますので、ぜひそちらを先に読むことをお勧めします。 また、今回の記事は前回よりも難易度と内容量が上がっていますが、記事の最後に作業後の リポジトリ のリンクがありますので、そちらを先にダウンロードしてそちらと比較しながら学習することができます。 前回まで作成した状態のプログラムが以下の リポジトリ からダウンロードできますので前回まででうまくいっていない方は参考にしてみてください。 github.com 最終目標(再掲) ・Phaser3とTypescriptで RPG ゲームの基礎を作る。 ・Phaser3をTypescriptで使う方法を学ぶ ・Phaser3の使い方を学ぶ 今回の目標 ・ゲームの作り方の断片を知る ・キャラの表示できるようにする ・キャラを移動できるようにする ・当たり判定をつける ・ NPC の追加してみる ・話しかけられるようにする 開発前提(再掲) ・Nodejsの環境・知識がある ・ Javascript ・Typescriptがある程度かける ・当ページ紹介の環境を試す場合はgit・ github の知識がある 使用した主要Nodeモジュール(再掲) ・typescript(Typescriptの コンパイル 用) ・phaser(フロントの Javascript 用ゲームライブラリ) ・live-server(ソースを監視してブラウザのページをリロード) ・ts-loader(webpackがTypescriptをバンドルする用)webpack(言わずと知れたモジュール依存をいい感じに解決しバンドルする) ・webpack- cli (webpackを コマンドライン で使用するのに必要) 注:各Nodeモジュールバージョンは後述 当ブログ仕様の画像素材の注意点 当ブログで使用する画像素材は『 ピポヤ倉庫 』より許可なしで無償再配布・改変が認められたものを改変して作成されたものです。 中には許可なく再配布・改変してはいけない素材もインターネット上には多く存在するのでそれらを使用するときは十分に規約を呼んでから使用しましょう。 1. キャラの表示 想定画面 今回は、はじめにキャラつまり操作

M5Stackで、においセンサー(TGS2450)を使ってみる。(LCDに表示編)

今回は、においセンサー(TGS2450)から取得したデータをM5Stackの LCD にグラフ表示をしていきます。 今回主に使用したもの M5Stack 10Ω抵抗 5本 Pch  MOSFET  2SJ334(スイッチとして利用) M5StackSideBB(ブレッドボード) M5Stackのピンはそのままだと配線するとき手間がかかるかと思いますので、今回はM5StackSideBBを利用しました。 ブレッドボードも付いているので、手軽に電子工作できるので個人的にオススメです。 SideBB for M5Stack www.switch-science.com 諸注意 本ブログのプログラムはArduinoIDEまたはPlatformIOでM5Stackの開発ができる状態であること前提のものですので、各自導入をお願いします。 過去に Windows のArduinoIDEで M5Stackの開発環境を構築する記事 があるので、参考にしてください。 においセンサー(TGS2450)について 今回使用したセンサーは 秋月電子通商 で購入できます。 http://akizukidenshi.com/catalog/g/gP-00989/ akizukidenshi.com TGS2450には4つのピンがあり、使用するのはそのうちの3本でヒーターを温めるピン、センサー情報を得るピン、GNDがあります。 ここで注意したいのは、ヒーター電圧は1.6Vと記述されているのでM5Stackで利用するときは分圧して3.3Vを1.6V近くまでに降圧することをお勧めします。 TGS2450のセンサーは可変抵抗になっており、データシートには5.62kΩ〜56.2kΩの間を抵抗が変化し、においが強いとより低くなると記述されていました。 よって、センサーの値をM5Stackで取得するにはセンサー抵抗と外部に接続する任意の値の抵抗による分圧回路によって求めることができます。 TGS2450の動作方法は、250ms周期でセンサーに電圧を5ミリ秒on、245ミリ秒offの状態にしてヒーターは8ミリ秒on、242ミリ秒offにすることで値を取得します。 配線 においセンサーとM5Stackの配線 上の図が配線図です。 30Ωの抵抗は10Ωの抵抗を三つ直列に接続して作成しました。 また、上部の抵抗10Ω二

Phaser3 + Typescriptを使ってRPGゲームの基礎を作ろう!その1

今回はPhaser3とTypescriptを使って簡単な RPG ゲームを作る方法を紹介していきます。 内容はPhaser3およびゲーム作りについての記事なので、Nodejsの周辺モジュールなどの説明は一部省いての説明になりますのでご了承ください。 またこの記事では Phaser2 ではなく Phaser3 を使用するので注意してください。 この記事は二部構成になりますので、この記事を読んだ際はぜひ次の記事も読むことをお勧めします。 最終目標 ・Phaser3とTypescriptで RPG ゲームの基礎を作る。 ・Phaser3をTypescriptで使う方法を学ぶ ・Phaser3の使い方を学ぶ 今回の目標 ・開発環境を整える ・Phaser3の開発構成を知る ・スタート画面を作る ・マップ表示をさせる 開発前提 ・Nodejsの環境・知識がある ・ Javascript ・Typescriptがある程度かける ・当ページ紹介の環境を試す場合はgit・ github の知識がある 使用した主要Nodeモジュール ・typescript(Typescriptの コンパイル 用) ・phaser(フロントの Javascript 用ゲームライブラリ) ・live-server(ソースを監視してブラウザのページをリロード) ・ts-loader(webpackがTypescriptをバンドルする用)webpack(言わずと知れたモジュール依存をいい感じに解決しバンドルする) ・webpack- cli (webpackを コマンドライン で使用するのに必要) 注:各Nodeモジュールバージョンは後述 1. 最低限の開発環境の準備 今回最低限の環境を整えるために、『Typescript + Phaser3』の開発テンプレートを github リポジトリ で公開しました。 以下からZIPをダウンロードするか、 git clone コマンドで各自環境に展開してみてください。 ここから先は リポジトリ のプログラムを元に説明していきます。 github.com 展開するとファイル構造は以下のようになっているかと思われます。 注: 他にもファイルやフォルダがあるかと思われますが、表記されているのは今回使うものになっています。 - src/ (これから書くプログラムの保存領域)