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.
Upcoming SlideShare
What to Upload to SlideShare
What to Upload to SlideShare
Loading in …3
×
1 of 83

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

4

Share

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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 対象が動く場合のツールチップ

×