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