O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Unity + iOS/Android VR ことはじめ

547 visualizações

Publicada em

ギャップロ勉強会 # 2 で使用した資料を公開します。

資料内で、SAPPHIART 社様のサファイアートちゃんを利用しています。

© SapphiArt inc /SCL
http://sapphiart-chan.com/license_jp/

Publicada em: Tecnologia
  • If we are speaking about saving time and money this site ⇒ www.HelpWriting.net ⇐ is going to be the best option!! I personally used lots of times and remain highly satisfied.
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Seja a primeira pessoa a gostar disto

Unity + iOS/Android VR ことはじめ

  1. 1. Copyright © Up-frontier, Inc. All rights reserved. Unity+iOS/Android VR ことはじめ #1 Gaprot
  2. 2. Copyright © Up-frontier, Inc. All rights reserved. 注意事項
  3. 3. Copyright © Up-frontier, Inc. All rights reserved. • 本スライドは「2017/03」時点の情報を元に作成さ れています • 古い情報になっている場合もありますのでご了承く ださい • 記載のバージョン以外の組み合わせでの動作保証は しておりませんのでご注意ください
  4. 4. Copyright © Up-frontier, Inc. All rights reserved. 作成環境
  5. 5. Copyright © Up-frontier, Inc. All rights reserved. Unity 5.6 が出ていますが… • Unity • 5.5.2f • GVR SDK • 1.30
  6. 6. Copyright © Up-frontier, Inc. All rights reserved. Unity • 5.6 に Unity 謹製の VR SDK が同梱されている • まだ出たばかりなので安定版を • そういう理由で今回は 5.5 を使います
  7. 7. Copyright © Up-frontier, Inc. All rights reserved. Google VR SDK • ダウンロードはここから • https://developers.google.com/vr/unity/ download
  8. 8. Copyright © Up-frontier, Inc. All rights reserved. 使うモデルの読み込み
  9. 9. Copyright © Up-frontier, Inc. All rights reserved. Unity ちゃん • と思ってたのですが…
  10. 10. Copyright © Up-frontier, Inc. All rights reserved. Amane Kisora-chan • こっちのほうがモダンと聞いたので • https://www.assetstore.unity3d.com/jp/#!/ content/70581 • Asset Store にて無料で配布されています
  11. 11. Copyright © Up-frontier, Inc. All rights reserved. Asset Store • Unity を立ち上げるとこんな画面
  12. 12. Copyright © Up-frontier, Inc. All rights reserved. Asset Store • ここのタブを押すと AssetStore が出て来る
  13. 13. Copyright © Up-frontier, Inc. All rights reserved. Asset Store • こんな感じです
  14. 14. Copyright © Up-frontier, Inc. All rights reserved. Asset Store • ここで検索しましょう
  15. 15. Copyright © Up-frontier, Inc. All rights reserved. Asset Store • 検索結果です
  16. 16. Copyright © Up-frontier, Inc. All rights reserved. Asset Store • インポートを押すとデータを取得できます
  17. 17. Copyright © Up-frontier, Inc. All rights reserved. Asset Store • こんな感じの確認画面が出ます
  18. 18. Copyright © Up-frontier, Inc. All rights reserved. Asset Store • 右下の Import を押しましょう
  19. 19. Copyright © Up-frontier, Inc. All rights reserved. モデルを配置 • Import を押してしばらく待つと Assets に SapphiArt というデータが追加されます • この中を見てみると色んなデータが入ってるのがわ かると思います。 • 配置するべき物は大概 prefab か model という フォルダに入ってることが多いです
  20. 20. Copyright © Up-frontier, Inc. All rights reserved. モデルを配置 • 今回はこれを使います
  21. 21. Copyright © Up-frontier, Inc. All rights reserved. モデルを配置 • OBJ フォルダに入ってましたね
  22. 22. Copyright © Up-frontier, Inc. All rights reserved. モデルを配置 • 使うモデルをドラッグアンドドロップで直接 scene か Hierarchy と書かれた部分へ配置します • そうするとモデルがシーン上に表示されます
  23. 23. Copyright © Up-frontier, Inc. All rights reserved. モデルを配置 直接持っていく
  24. 24. Copyright © Up-frontier, Inc. All rights reserved. モデルを配置 こっちに持っていく
  25. 25. Copyright © Up-frontier, Inc. All rights reserved. モデルを配置 無事配置完了!
  26. 26. Copyright © Up-frontier, Inc. All rights reserved. シーンの作成
  27. 27. Copyright © Up-frontier, Inc. All rights reserved. シーンを整える • 見ての通りまだシーン上にはモデルがぽつんと佇ん でいるだけになってます • なので地面とかそういうのを置いてシーンを整えま しょう
  28. 28. Copyright © Up-frontier, Inc. All rights reserved. その前に…
  29. 29. Copyright © Up-frontier, Inc. All rights reserved. Unity での操作 • シーンでのUnity の操作を覚えましょう。
  30. 30. Copyright © Up-frontier, Inc. All rights reserved. 視点移動 • 基本的にマウス+キーボードで視点を移動します • マウスホイールでズームイン・アウト • オプションキー+ドラッグで視点移動 • オプション+コマンド+ドラッグで水平移動
  31. 31. Copyright © Up-frontier, Inc. All rights reserved. 視点移動 • とりあえずグリグリしてみましょう • ちなみに Hierarchy のところにあるモデルをダブ ルクリックすると視点がそこに移動します
  32. 32. Copyright © Up-frontier, Inc. All rights reserved. 地面の作成 • 地面を作るにはメニューにある GameObject から 3D Object > Plane を選択します • Terrain というのもあるのですが、スマホでは重い ので Plane を地面にします。
  33. 33. Copyright © Up-frontier, Inc. All rights reserved. 地面の作成
  34. 34. Copyright © Up-frontier, Inc. All rights reserved. 地面の作成 地面ができました
  35. 35. Copyright © Up-frontier, Inc. All rights reserved. 地面の作成 これでは地面とはいえませんね…
  36. 36. Copyright © Up-frontier, Inc. All rights reserved. 地面の作成 ここの値をいじって調整しましょう
  37. 37. Copyright © Up-frontier, Inc. All rights reserved. 地面の作成 Position の y を0 Scale の x と z を 200 にしました
  38. 38. Copyright © Up-frontier, Inc. All rights reserved. 地面の作成 真っ白だと味気ないので テクスチャを張りましょう
  39. 39. Copyright © Up-frontier, Inc. All rights reserved. 地面の作成 とりあえずこれを使いましょう
  40. 40. Copyright © Up-frontier, Inc. All rights reserved. 地面の作成 ここにドラッグアンドドロップで
  41. 41. Copyright © Up-frontier, Inc. All rights reserved. 地面の作成 無事(?)地面ができました!
  42. 42. Copyright © Up-frontier, Inc. All rights reserved. 地面の作成 • 今回はたまたまアセットに入っていた地面に使って も問題無さそうなテクスチャーを張りました • 本当はもっと地面っぽいものを張ったほうがいいで す
  43. 43. Copyright © Up-frontier, Inc. All rights reserved. 配置とVRモード設定
  44. 44. Copyright © Up-frontier, Inc. All rights reserved. モデルを配置 • 今モデルと地面それからカメラがデフォルトの位置 に置いたままになっています • これでは配置したといえる状況ではないのでいい感 じの場所に置きましょう。
  45. 45. Copyright © Up-frontier, Inc. All rights reserved. モデルを配置 配置後のものがこちらになります
  46. 46. Copyright © Up-frontier, Inc. All rights reserved. GVR SDK • 最初に紹介した GVR SDK をインポートしましょう • Unity を開いている状態でダウンロードしてきた GoogleVRForUnity.unitypackage を
 ダブルクリックするとインポートされます。
  47. 47. Copyright © Up-frontier, Inc. All rights reserved. GVR SDK Import をクリック!
  48. 48. Copyright © Up-frontier, Inc. All rights reserved. GVR SDK 無事インポートされました
  49. 49. Copyright © Up-frontier, Inc. All rights reserved. VR 化 • SDK のインポートもできたのでいよいよVRにしま す!
  50. 50. Copyright © Up-frontier, Inc. All rights reserved. VR 化 GoogleVR > Prefabs のこれを…
  51. 51. Copyright © Up-frontier, Inc. All rights reserved. VR 化 ここに持っていきます
  52. 52. Copyright © Up-frontier, Inc. All rights reserved. すると…
  53. 53. Copyright © Up-frontier, Inc. All rights reserved. VR 化
  54. 54. Copyright © Up-frontier, Inc. All rights reserved. できちゃいました!
  55. 55. Copyright © Up-frontier, Inc. All rights reserved. VR 化 • このように Google VR SDK を使用するとVR 化する ことは非常に簡単です • ゲーム画面でオプションキーを押しながらマウスを 動かすと視点をぐるぐる動かすことができます
  56. 56. Copyright © Up-frontier, Inc. All rights reserved. アニメーションを追加
  57. 57. Copyright © Up-frontier, Inc. All rights reserved. アニメーション • 今回使用したモデルではデフォルトで色々と用意さ れています • これを理解していくのもいいのですが今回は簡単な ものを作ってみたいと思います
  58. 58. Copyright © Up-frontier, Inc. All rights reserved. mecanim • Unity でアニメーションを簡単にコントロールする ことが出来るツールが mecanim です • これを利用することで簡単にアニメーションどうし の遷移などを簡単に制御することができます
  59. 59. Copyright © Up-frontier, Inc. All rights reserved. 作ってみよう! • まずはじめに AnimatorController を作成します • メニューの Assets > Create > AnimatorController を選択すると今いるフォルダ に作成されます。
  60. 60. Copyright © Up-frontier, Inc. All rights reserved. 作ってみよう! • 作ったアニメーションコントローラはこんな感じ
  61. 61. Copyright © Up-frontier, Inc. All rights reserved. 作ってみよう! • その上で右クリック
  62. 62. Copyright © Up-frontier, Inc. All rights reserved. 作ってみよう! • 出てきたメニューの CreateState > Empty
  63. 63. Copyright © Up-frontier, Inc. All rights reserved. 作ってみよう! • 新しいステートができました
  64. 64. Copyright © Up-frontier, Inc. All rights reserved. 作ってみよう! • Wait という名前をつけておきました
  65. 65. Copyright © Up-frontier, Inc. All rights reserved. 作ってみよう! • もう一つ作成しておきましょう
  66. 66. Copyright © Up-frontier, Inc. All rights reserved. 作ってみよう! • こっちは Walk にしておきました
  67. 67. Copyright © Up-frontier, Inc. All rights reserved. 作ってみよう! • アニメーションアタッチのためにここをクリック
  68. 68. Copyright © Up-frontier, Inc. All rights reserved. 作ってみよう! • 左上の方にメニューが出てきます
  69. 69. Copyright © Up-frontier, Inc. All rights reserved. 作ってみよう! • 今回は idle を選択しましょう
  70. 70. Copyright © Up-frontier, Inc. All rights reserved. 作ってみよう! • 今回は idle を選択しましょう
  71. 71. Copyright © Up-frontier, Inc. All rights reserved. 作ってみよう! • もう一つの方は walk を設定しておきます
  72. 72. Copyright © Up-frontier, Inc. All rights reserved. ステートマシン • これら一つ一つをステートとして扱い、それにより アニメーションの状態を管理します • あくまでアニメーションの状態の管理をするもので あり、モデルの状態を管理するものではありません
  73. 73. Copyright © Up-frontier, Inc. All rights reserved. ステートマシン • ステートが切り替わる条件などをこのアニメーショ ンコントローラへ書いておきます • それによりスクリプトから簡単に制御することがで きます
  74. 74. Copyright © Up-frontier, Inc. All rights reserved. ステート遷移 • 関係性を作るために右クリック
  75. 75. Copyright © Up-frontier, Inc. All rights reserved. ステート遷移 • 出てきた Make Transition をクリック
  76. 76. Copyright © Up-frontier, Inc. All rights reserved. ステート遷移 • それを上のステートにつなげるとこうなります
  77. 77. Copyright © Up-frontier, Inc. All rights reserved. ステート遷移 • 反対方向もやっておきましょう
  78. 78. Copyright © Up-frontier, Inc. All rights reserved. アニメーションの適用 作成したコントローラをモデルへ適用します
  79. 79. Copyright © Up-frontier, Inc. All rights reserved. アニメーションの適用 これを
  80. 80. Copyright © Up-frontier, Inc. All rights reserved. アニメーションの適用 ここに
  81. 81. Copyright © Up-frontier, Inc. All rights reserved. アニメーションの適用 適用できました
  82. 82. Copyright © Up-frontier, Inc. All rights reserved. アニメーションの適用
  83. 83. Copyright © Up-frontier, Inc. All rights reserved. ステート制御 • ステートが勝手に切り替わってくれるようになりま した • 次はこのステートの切り替わりを制御しましょう
  84. 84. Copyright © Up-frontier, Inc. All rights reserved. パラメータ作成 • 制御するためのパラメータを作成しましょう
  85. 85. Copyright © Up-frontier, Inc. All rights reserved. パラメータ作成 • ここをクリックします
  86. 86. Copyright © Up-frontier, Inc. All rights reserved. パラメータ作成 • こうなるので + ボタンを押します
  87. 87. Copyright © Up-frontier, Inc. All rights reserved. パラメータ作成 • 今回は時間をトリガーにしたいので float にしま す
  88. 88. Copyright © Up-frontier, Inc. All rights reserved. パラメータ作成 • 作ったパラメータには適当に名前をつけましょう
  89. 89. Copyright © Up-frontier, Inc. All rights reserved. パラメータ作成 • ついでにパラメータを設定するとこうなります
  90. 90. Copyright © Up-frontier, Inc. All rights reserved. パラメータ適用 • 作成したパラメータを設定しましょう
  91. 91. Copyright © Up-frontier, Inc. All rights reserved. パラメータ適用 • 矢印をクリックするとこうなります
  92. 92. Copyright © Up-frontier, Inc. All rights reserved. パラメータ適用 • 右側の inspector というところに情報が出ます
  93. 93. Copyright © Up-frontier, Inc. All rights reserved. パラメータ適用 • ここが遷移条件になります
  94. 94. Copyright © Up-frontier, Inc. All rights reserved. パラメータ適用 • + ボタンを押すとさっき作ったものが適用されます
  95. 95. Copyright © Up-frontier, Inc. All rights reserved. パラメータ適用 • ここで以上、以下、等しい、等しくないを選び
  96. 96. Copyright © Up-frontier, Inc. All rights reserved. パラメータ適用 • ここに条件となる数値を入れます
  97. 97. Copyright © Up-frontier, Inc. All rights reserved. パラメータ適用 • 今回は 2 より大きいという値を設定します
  98. 98. Copyright © Up-frontier, Inc. All rights reserved. パラメータ適用 • 反対の矢印も似たように設定します
  99. 99. Copyright © Up-frontier, Inc. All rights reserved. ステート制御 • これでとりあえずステート制御の準備が整いました • 後はスクリプトを作成し、作成したパラメータを変 更してあげるとアニメーションがそのパラメータに 従い動作します
  100. 100. Copyright © Up-frontier, Inc. All rights reserved. スクリプト作成 適当なフォルダで 右クリック
  101. 101. Copyright © Up-frontier, Inc. All rights reserved. スクリプト作成 適当な名前をつけておきましょう
  102. 102. Copyright © Up-frontier, Inc. All rights reserved. スクリプト作成 ダブルクリック
  103. 103. Copyright © Up-frontier, Inc. All rights reserved. スクリプト作成 MonoDevelop が開きます
  104. 104. Copyright © Up-frontier, Inc. All rights reserved. スクリプト作成 とりあえずこういう 感じになります
  105. 105. Copyright © Up-frontier, Inc. All rights reserved. スクリプト作成 作ったパラメータを指定
  106. 106. Copyright © Up-frontier, Inc. All rights reserved. スクリプト作成 時間を進めて パラメータへ設定
  107. 107. Copyright © Up-frontier, Inc. All rights reserved. スクリプト適用 出来たスクリプトをアタッチします
  108. 108. Copyright © Up-frontier, Inc. All rights reserved. スクリプト適用 これを
  109. 109. Copyright © Up-frontier, Inc. All rights reserved. スクリプト適用 ここに
  110. 110. Copyright © Up-frontier, Inc. All rights reserved. スクリプト適用 これでアタッチが出来ました!
  111. 111. Copyright © Up-frontier, Inc. All rights reserved. 動かしてみよう
  112. 112. Copyright © Up-frontier, Inc. All rights reserved. アニメーションはしたけど… • その場で足踏みしかしてくれませんね • これではせっかくVRにしても前しか見る場所があり ません • なので自分の周りを回ってもらいましょう
  113. 113. Copyright © Up-frontier, Inc. All rights reserved. モデルを動かす • ターゲットとしてカメラを使用する • その周りを歩きのアニメーションの時に移動 • 待機のアニメーションのときは止まる • というスクリプトの作成
  114. 114. Copyright © Up-frontier, Inc. All rights reserved. モデルを動かす 先程作ったこれを…
  115. 115. Copyright © Up-frontier, Inc. All rights reserved. モデルを動かす こうします!
  116. 116. Copyright © Up-frontier, Inc. All rights reserved. モデルを動かす public で変数を宣言すると
 inspector に表示されます
  117. 117. Copyright © Up-frontier, Inc. All rights reserved. モデルを動かす 回転変数の初期設定
  118. 118. Copyright © Up-frontier, Inc. All rights reserved. モデルを動かす 歩きアニメーションの間
 一定速度で動かす
  119. 119. Copyright © Up-frontier, Inc. All rights reserved. モデルを動かす 周りを回る予定なので モデルの向きを変えます
  120. 120. Copyright © Up-frontier, Inc. All rights reserved. モデルを動かす 回転させるときは ここをクリック
  121. 121. Copyright © Up-frontier, Inc. All rights reserved. モデルを動かす 球体が出てきてモデルを 回せるようになります
  122. 122. Copyright © Up-frontier, Inc. All rights reserved. モデルを動かす 今回は進行方向に向けて
 y軸を回転させました
  123. 123. Copyright © Up-frontier, Inc. All rights reserved. モデルを動かす y軸を回転させたいときは
 緑の線をドラッグ!
  124. 124. Copyright © Up-frontier, Inc. All rights reserved. モデルを動かす 先程作成した publicな変数がこちら
  125. 125. Copyright © Up-frontier, Inc. All rights reserved. モデルを動かす ここにターゲット予定の カメラを持っていくと
  126. 126. Copyright © Up-frontier, Inc. All rights reserved. モデルを動かす こんな感じになります
  127. 127. Copyright © Up-frontier, Inc. All rights reserved. 動かしてみましょう!
  128. 128. Copyright © Up-frontier, Inc. All rights reserved. モデルを動かす • 今回はちょっと条件等が雑なので動きに少しおかし い部分もあります • しかし簡単なスクリプトでここまで動かせるのが Unity の強みだと思います
  129. 129. Copyright © Up-frontier, Inc. All rights reserved. 実機で動かす
  130. 130. Copyright © Up-frontier, Inc. All rights reserved. ビルド • ここまで作ったけどせっかくなら実機で試してみた いですよね? • なので Android や iOS でのビルド方法について説 明します。
  131. 131. Copyright © Up-frontier, Inc. All rights reserved. Android
  132. 132. Copyright © Up-frontier, Inc. All rights reserved. Androidフロー • プラットフォームを切り替える(時間かかります) • プラットフォームの設定 • ビルド
  133. 133. Copyright © Up-frontier, Inc. All rights reserved. • File > Build Setting Android プラットフォームを切り替える
  134. 134. Copyright © Up-frontier, Inc. All rights reserved. Android プラットフォームを切り替える • 切替時にプラットフォーム用のライブラリ導入につ いて聞かれます
  135. 135. Copyright © Up-frontier, Inc. All rights reserved. Android プラットフォームの設定 • File > Build Setting
  136. 136. Copyright © Up-frontier, Inc. All rights reserved. Android プラットフォームの設定 • 画面向きの設定をランドスケープレフトにする
  137. 137. Copyright © Up-frontier, Inc. All rights reserved. • APILevelを19以上に設定 • Bundle Identifierを設定 Android プラットフォームの設定
  138. 138. Copyright © Up-frontier, Inc. All rights reserved. Android ビルド(APK出力) • File > Build Setting デバッグKEYで ビルドする場合ONに
  139. 139. Copyright © Up-frontier, Inc. All rights reserved. Android ビルド(APK出力) • 注意点 • Android Studio2.3 • 必要なtoolsが足りないため • コマンドライン ツールのみ入手するよりtools を入手
  140. 140. Copyright © Up-frontier, Inc. All rights reserved. iOS
  141. 141. Copyright © Up-frontier, Inc. All rights reserved. iOSフロー • プラットフォームを切り替える(時間かかります) • プラットフォームの設定 • XCODEプロジェクトの吐き出し • ビルド(時間かかります)
  142. 142. Copyright © Up-frontier, Inc. All rights reserved. iOS プラットフォームを切り替える • File > Build Setting
  143. 143. Copyright © Up-frontier, Inc. All rights reserved. iOS プラットフォームを切り替える • 切替時にプラットフォーム用のライブラリ導入につ いて聞かれます
  144. 144. Copyright © Up-frontier, Inc. All rights reserved. iOS プラットフォームの設定 • File > Build Setting
  145. 145. Copyright © Up-frontier, Inc. All rights reserved. iOS プラットフォームの設定 • 画面向きの設定をランドスケープレフトにする
  146. 146. Copyright © Up-frontier, Inc. All rights reserved. iOS XCODEプロジェクトの吐き出し • File > Build Setting
  147. 147. Copyright © Up-frontier, Inc. All rights reserved. iOS ビルド • XCODEで開いてビルドをする

×