Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

2018/01/17 第3回 HoloLens 参考書読み会発表資料

1,544 views

Published on

2018/01/17 に開催された 第3回 HoloLens 参考書読み会での発表資料です
https://hololens.connpass.com/event/73199/

Published in: Technology
  • Be the first to comment

2018/01/17 第3回 HoloLens 参考書読み会発表資料

  1. 1. 第3回 HoloLens参考書 読み会 2018/01/17 古田裕介
  2. 2. 今回の内容 • Unity で使う C# の基礎 • ユーザーインターフェースデザインの基礎と ベストプラクティス
  3. 3. 開発環境、ライブラリ Visual Studio 2017 15.5 Unity 2017.1.2f1 MixedRealityToolkit(HoloToolkit) v1.2017.1.2
  4. 4. C# の基礎
  5. 5. 初心者マーク C# 初心者の方向けのスライドには 初心者マークをつけています 初心者マークがついていないスライドは無理 に理解しなくても大丈夫です
  6. 6. C# がなぜ必要か • Unity には様々なコンポーネン トが用意されている • ゲームオブジェクトにコンポー ネントをアタッチすることで、 オブジェクトに機能を追加でき る • 既存のコンポーネントだけでは 出来ることに限りがある • やりたいことを実現するために は、C# Script が必要
  7. 7. C# とは • マイクロソフトによって開発されたプログラ ミング言語 • C, C++, Java から影響を受けている • Windows アプリ開発、Web アプリ開発、モバ イルアプリ開発(Xamarin)などに利用されて いる
  8. 8. Unity での C# 通常の C# プログラムでは Main() から処理が始まる Unity での C# Script では Start(), Update() などの 定義されたイベント関数 を使う class TestClass { static void Main(string[] args) { System.Console.WriteLine(args.Length); } } public class TestClass : MonoBehaviour { void Start() { // 始めに一度だけ呼ばれる } void Update() { // マイフレーム呼ばれる } }
  9. 9. よく使うイベント関数 Awake : シーンがロードされた直後(Start の前) またはプレハブのインスタンス化直後 Start : Update が呼ばれるより前に一度だけ呼ばれる Update: マイフレーム呼ばれる OnEnable : オブジェクトが有効になったとき OnDisable: オブジェクトが無効になったとき 参考: Unity 公式ドキュメント https://docs.unity3d.com/ja/current/Manual/ExecutionOrder.html
  10. 10. サンプルプログラム 球が色を変えながら動くという動作を C# のスクリプトで実現できる プログラムの一部
  11. 11. クラス フィールド(メンバ変数)やメソッドなどを 一つにまとめたもの ・フィールド(メンバ変数) 値を保持するためのもの ・メソッド 実行する処理をまとめたもの
  12. 12. Unity で用いる C# のクラス 利用する名前空間(ネームスペース) このクラスの名前空間の宣言 メソッド クラスの宣言 フィールド(メンバ変数) プロパティ
  13. 13. 名前空間(ネームスペース) 名前(クラス名、メソッド名)の衝突を避け るために用いられる 名前空間がないと、A さんが作ったクラス X と B さんが作ったクラス X が区別できない class X { … } class X { … } class Y { X x; } A さんのクラス X B さんのクラス X どちらのクラスX を 使いたいのか判断できない
  14. 14. 名前空間(ネームスペース)の使い方 毎回、名前空間付きでクラスを使うのは面倒なので、 利用する名前空間を指定しておけばコード中では省略できる (例) System.Collections.Generic.List<int> list; → List<int> list; 名前空間を定義 (なくても大丈夫だが、 なるべく付けたほうが良い)
  15. 15. 名前空間(ネームスペース)の競合 解決策 1 必要ない名前空間を消す
  16. 16. 解決策 2 名前空間の省略をやめる 名前空間(ネームスペース)の競合
  17. 17. 解決策 3 エイリアスを定義する 名前空間(ネームスペース)の競合
  18. 18. クラスの宣言 GameObject にアタッチするスクリプトの場合、 MonoBehaviour を継承しておく クラス名とファイル名を同一にする public class SampleScript : MonoBehaviour { … } SampleScript.cs
  19. 19. フィールド(メンバ変数) 値を保持しておけるもの 先頭に public をつけると、別のスクリプトから読み書 き可能、インスペクターで初期値の設定可能 private をつけると同じスクリプトでのみ読み書き可能 何もつけないと private と同じ SampleScript.cs
  20. 20. フィールド(メンバ変数) インスペクターで設定した値は、自動的にスクリプト のフィールドの初期値に設定される SampleScript.cs SampleScript で “public float PublicSpeed = 2.0f;” と変更しても 実行するとインスペクターで設定した 10 が設定される
  21. 21. メソッド 一連の処理内容をまとめたもの 先頭に public をつけると 別のスクリプトから実行可能 private または 何もつけないと 同じクラス内からのみ実行可能
  22. 22. 必要以上に public な要素を 作らない public なフィールド/メソッドが多いと… • 外部から値を書き換えられてしまう • 意図しない使われ方をする • スクリプトを変更した際に影響範囲が大きく なる
  23. 23. プロパティ クラス外部から見るとフィールド クラス内部から見るとメソッド 一組のプロパティ 自動プロパティ (上のプロパティと同様の動作) 別のクラスからの利用
  24. 24. Unity でのプロパティの問題点 public にしても、インスペクターから見えない
  25. 25. インスペクターから見える プロパティ フィールドに [SerializeField] をつける 自動プロパティでは使えない
  26. 26. C# 6.0 を使えるようにする デフォルトでは C# 4.0 Player Settings > Other Settings で Scripting Runtime Version を変更することで C# 6.0 が使える Player Settings > Other Settings で .Net 4.6 Equivalent に変更
  27. 27. ユーザーインターフェース デザイン
  28. 28. ユーザーインターフェースデザイン とは コンピューター、家電、携帯電話、電子機器などの機 械やソフトウェアのユーザーインタフェース(UI) をデ ザインすること 使いやすさと UX(ユーザーエクスペリエンス)を高め ることに注力する 良いユーザーインターフェースデザインは ・アートでありサイエンスである ・ユーザーの要望を予想し、ユーザーの行動をそっと 手助けできるようなもの
  29. 29. よいユーザーインターフェース とは • 明快である • 理解しやすい • 自然に感じられる • 気にせず使える
  30. 30. Unity 標準の UI の例 • Buttons (ボタン) • Input Field (入力欄) • Toggles (トグルボタン) • Slider (スライダー) • Dropdown (ドロップダウン)
  31. 31. UI の分類 • Input Controls 入力のための UI ボタン、テキスト入力欄、チェックボックスなど • Navigation Controls ページ移動や状態表示のための UI パンくずリスト、検索欄、アイコンなど • Informational Controls 情報表示のための UI ツールチップ、プログレスバー、メッセージボックスなど
  32. 32. UI のベストプラクティス • 明快である • 寛容で柔軟である • ユーザーは操作を間違うこともある • 間違っても修正可能にしておく • シンプルに • 目立たないものが良いインタフェース • 見慣れたものを使う • 一貫性を持たせる • 似た機能には似た UI を割り当てる
  33. 33. HoloLens の UI デザイン 2D での UI デザインに比べて、 HoloLens での UI デザインは発展途上 どういった UI が良いのか、 いろいろと試してみることが大事
  34. 34. HoloLens のベストプラクティス 1. ユーザーがカメラである 2. ヘッドロック (Head-Locked) を避ける 3. ボディロック (Body-Locked) を使う 4. 表示するオブジェクトは最低 1-2 m 離す 5. 実世界にあるかのように表示する 6. 重力を使う 7. 道筋を示す
  35. 35. 1. ユーザーがカメラである • ユーザーの視点が Unity 内の Main Camera の 位置に反映される • 何かを見てもらうには、その方向を向いても らう必要がある • 画面外のオブジェクトには気づきづらいため、 うまく視線を誘導することが重要
  36. 36. 2. ヘッドロック (Head-Locked) を避ける 3. ボディロック (Body-Locked) を使う • 画面のある位置に常に表示されている UI は不 快である • UI を常に見せたい場合は、ユーザーの視点に 対し UI が遅れてついてくるようにする ( HoloLens のスタートメニューのような動作) • HoloToolkit の Tagalong を使うとよい
  37. 37. 4. 表示するオブジェクトは最低 1-2 m 離す Microsoft 公式ページによると 1.25 ~ 5m が最適 参考ページ: https://developer.microsoft.com/en- us/windows/mixed-reality/comfort#vergence- accommodation_conflict
  38. 38. 5. 実世界にあるかのように表示する 6. 重力を使う • オブジェクトが壁や床の上にぴったりと置か れていたり、ものに隠れたりすると現実感が 増す • Spatial Mapping をつかうことで、上の動作を 実現できる • 個人的には、重力を使う場面はそれほどない • エフェクトには効果的
  39. 39. 7. 道筋を示す • ユーザーに対し、どこに向かっていて次に何 をする必要があるのかを知らせる • ユーザーに移動してもらう必要がある場合は、 移動先をアプリ内で表示して動いてもらう
  40. 40. Unity の Camera と HoloLens ユーザー視点が Camera という点は一人称視点 のゲームに似ているが、HoloLens の場合は頭 でコントロールすることになる Unity 内で映像を描画するための Camera と HoloLens についている実際の Camera を混同しないように
  41. 41. HoloLens 用 Camera 設定 Clear Flags: Solid Color (単色で塗りつぶす) Background: 黒 Field of View(視野角): 16 Clipping Planes: Near 0.85 どうしても近くを表示したい場合 Clipping Planes の値を小さくする
  42. 42. 実践編 (Unity UI)
  43. 43. HoloToolkit のダウンロード MixedRealityToolkit-Unity のリリースページ (https://github.com/Microsoft/MixedRealityToolkit -Unity/releases) から以下をダウンロード - HoloToolkit-Unity-Examples-v1.2017.1.2.unitypackage - HoloToolkit-Unity-v1.2017.1.2.unitypackage
  44. 44. HoloToolkit のインポート ダウンロードした unitypackage を Unity にイン ポート
  45. 45. シーンの設定 Main Camera を削除し、以下のプレハブを追加 ・HoloLensCamera ・InputManager ・Cursor
  46. 46. Ball オブジェクトの作成 Sphere を作成し、名前を Ball に変更 Scale を X: 0.5, Y: 0.5, Z: 0.5 に 以下のスクリプトをアタッチ
  47. 47. Unity UI Unity には標準の UI が ある (uGUI とも呼ばれる)
  48. 48. Button を追加 Hierarchy で右クリックし、UI > Button を追加 自動的に Canvas, EventSystem が追加される ・Canvas: Unity UI を描画するエリア。 Unity UI はすべて Canvas の子要素となる ・EventSystem: マウス、タッチパネルなどのいろいろな入力方法 を扱うためのもの シーンにひとつだけ配置する
  49. 49. Rect Transform 通常の Game Object は Transform を使うが、 Unity UI は Rect Transform を使う
  50. 50. ボタンの文字を変更
  51. 51. ボタンの設定 Highlighted Color を (0, 255, 12) に変更 On Click () 欄で Ball の LaunchBall.ChangeColor を指定
  52. 52. ボタンを複製 ChangeColorBtn を右クリックして Duplicate, または Ctrl-D で複製 これを2回行う ボタンの名前、ボタンのテキストを変更
  53. 53. イベントの設定 LaunchBallJumpBtn に LaunchBallJump を設定 ResetBallBtn に ResetBall を設定
  54. 54. ボタンのレイアウト Canvas に Vertical Layout Group コンポーネント を追加し、以下のように設定
  55. 55. UI を HoloLens 用に設定する • Canvas を 3D 空間に配置 • EventSystem に HoloLens Input Module を追加 詳しい手順は以降のスライドで
  56. 56. Canvas の設定 Canvas の Render Mode を World Space に変更 Rect Transform を 右図のように設定 本で指定されている 値から変更しています
  57. 57. コンポーネントの追加 Canvas に Tagalong, Billboard を追加 2つとも HoloToolkit に 含まれるスクリプト Tagalong 常に視野内に入るよう移動 Body-locked Billboard 常にユーザーのほうを向く
  58. 58. Canvas を見えるようにする Canvas の Vertical Layout Group を削除 Canvas に Panel を追加 ボタンを Panel の子要素に
  59. 59. Panel の設定 Panel に Vertical Layout Group を追加 以下のように設定
  60. 60. EventSystem の設定 EventSystem に HoloLens Input Module を追加 自動的に HoloLensInput も追加される
  61. 61. オブジェクトをインタフェースに • ごめんなさい、本に書いてあるスクリプトは うまく動きませんでした • オブジェクトをインタフェースにしたい場合、 HoloToolkit の仕組みを使ったほうが良いです • 第二回読書会の資料などを参考にしてみてく ださい https://www.slideshare.net/daisukeyamanaka967/ 20171218hololensvol2
  62. 62. 実践編 (HoloToolkit)
  63. 63. HoloToolkit の UI サンプル HoloToolkit-Examples のサンプルシーンを見て みる
  64. 64. サンプルシーン HoloToolkit-Examples > UX > Scenes のサンプル • GestureInteractiveExample • InteractiveButtonComponents • InteractiveExample • SliderSamples • TextPrefabSamplesTest
  65. 65. GestureInteractiveExample
  66. 66. InteractiveButtonComponents
  67. 67. InteractiveExample
  68. 68. SliderSamples
  69. 69. TextPrefabSamplesTest
  70. 70. 実践編 (MRDesignLabs)
  71. 71. MR Desing Labs とは • Microsoft の Windows Mixed Reality デザイン チームが公開しているサンプルツール • https://github.com/Microsoft/MRDesignLabs_Unity 様々なボタンのサンプル
  72. 72. MR Desing Labs の利用方法 MR Desing Labs のダウンロード > git clone https://github.com/Microsoft/MRDesignLabs_Unity.git > cd MRDesignLabs_Unity > git submodule init > git submodule update
  73. 73. サンプルを見てみる Unity で DesignLabs_Unity_Examples を開く
  74. 74. Font のダウンロード “Click here to download font” をクリックすると、 “Hololens font.zip” がダウンロードされる ダウンロードした zip を展開する
  75. 75. Font の設定 HoloSymMDL2.ttf を Unity にインポートする (右図では Assets > MRDsignLab > HUX に Fonts フォルダを作成し、 その中にインポート) MRDsignLab > HUX > Resources > Profiles にある DefaultButtonIconProfileFont を選択 Inspector の font asset でインポートしたフォントを選択
  76. 76. サンプルシーン MRDL_ControlsExample > Scenes に含まれている サンプルシーン • InteractableObject_Examples • ManipulationGizmo_Examples • ObjectCollection_Examples • Progress_Examples • SimpleDialog_Examples • ToolTips_Examples • ToolTips_MovingTargetExamples
  77. 77. InteractableObject_Examples 様々な形状のボタン
  78. 78. ManipulationGizmo_Examples HoloLens にインストールされている Holograms アプリ のようなコントロールができる UI
  79. 79. ObjectCollection_Examples 球、円筒、平面に沿って、 オブジェクトを整列して配置できる
  80. 80. Progress_Examples プログレスの表示
  81. 81. SimpleDialog_Examples ダイアログ
  82. 82. ToolTips_Examples ツールチップ
  83. 83. ToolTips_MovingTargetExamples 対象が動く場合のツールチップ

×