Successfully reported this slideshow.
Your SlideShare is downloading. ×

Scrolling CollectionsとElastic System(Mixed Reality Toolkit V2.5.1)

Scrolling CollectionsとElastic System(Mixed Reality Toolkit V2.5.1)

Download to read offline

XRミーティング 11/18登壇資料。
Mixed Reality Toolkit V2.5.0に追加されている試験的な機能「Elastics System」と「Scrolling Collection」でメニューを作ったのでその情報を共有。

XRミーティング 11/18登壇資料。
Mixed Reality Toolkit V2.5.0に追加されている試験的な機能「Elastics System」と「Scrolling Collection」でメニューを作ったのでその情報を共有。

More Related Content

Slideshows for you

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Scrolling CollectionsとElastic System(Mixed Reality Toolkit V2.5.1)

  1. 1. takabrz1 大阪駆動開発 Takahiro Miyaura Scrolling Collections とElastic System
  2. 2. 宮浦 恭弘 (Miyaura Takahiro)  大阪駆動開発コミュニティに生息  HoloLens日本販売してからXR系技術に取組む  普段はよくMixed Reality Toolkitに関する調査している  新しい技術や、MRに使えそうな技術を調べる 技術Tips : https://qiita.com/miyaura takabrz1 ※よかったらこれを機にお知り合いになってください Microsoft MVP for Windows Development 2018-202 1 某会社でSE(アプリケーション領域のアーキテクト的なお仕事なはず)= XRは趣味です(貢献領域:Mixed Reality)  リリース機能調べたり・・・  面白い機能使ってみたり・・・  新しい実験してフィードバックしたり・・・ 最近はこちらが中心
  3. 3. 本日のお題 Mixed Reality Toolkit V2.5の幾つか便利そうなものを試す 2020/11/18 Copyright © 2020 Takahiro Miyaura Scrolling Collections スクロール可能なコレクションを作成 Elastic System UXがドラマチックになるシステム 3
  4. 4. 本題 その前に・・・いつもの紹介
  5. 5. Mixed Reality Toolkitに関連するライブラリ 2020/11/18 Copyright © 2020 Takahiro Miyaura 各ゲームエンジン向けにOSSとして提供 Mixed Reality Toolkit for Unity(V2.5.0) ButtonやBoundingBox等のUX部品 イベント制御系 etc… Mixed Reality Design Labs Unity向けOSSライブラリ UXデザインのサンプル Mixed Reality Toolkit for Unreal(V0.10.0) Unity向けのライブラリと同等を目指す 5
  6. 6. Mixed Reality Toolkit V2 for Unity 概要  Cross Platformでの開発可能  XRデバイスにおけるUnity開発の基本的な構成要素を提供  ラピッドプロトタイピングを実現  コア機能が交換可能な拡張性の高いフレームワーク Unity向けOSSライブラリ OpenVR HMD (HTC Vive / Oculus Rift) iOS/Android (ARFoundation) HoloLens HoloLens 2 Windows Mixed Reality HMD 2020/11/18 Copyright © 2020 Takahiro Miyaura 6 Oculus Quest 2
  7. 7. Mixed Reality Toolkit V2 概要 2020/11/18 Copyright © 2020 Takahiro Miyaura XRデバイスの固有機能を含め様々な補助機能を提 供 7
  8. 8. Mixed Reality Toolkit V2 概要 2020/11/18 Copyright © 2020 Takahiro Miyaura UX building blocks : 組込み済みのUX部品群  これらを組合せることで容易なアプリケーション開発が可能に 8
  9. 9. 本題 その① Scrolling Collections
  10. 10. Scrolling Collection ~ 整列されたオブジェクトをスライド操作でスクロールする ~ オブジェクトなら何でもスクロール可能 2020/11/18 少しだけ設定にコツが必要 現在は入れ子ではできない Copyright © 2020 Takahiro Miyaura 10
  11. 11. Scrolling Collection ~ How to use ~ ちょっとだけ複雑 2020/11/18 1.空のGameObjectの作成 2.Scrolling Collectionコンポーネントを追加 ※GameObject配下にContainerとClipping Boundsが追加 3.Containerの下に空GameObjectを作成し、 GridObjectCollectionコンポーネントを設定 4.GridObjectCollectionの下にスクロールするオブジェクトをずらっと追加 5.GridObjectCollectionの以下のパラメータを変更し、 Update Collectionを実施 1. Layout:Row Then Column→(水平スクロール)、Column Then Row→(垂直スクロール) 2. Num Rows:1列(行)に表示するオブジェクト数 3. Column Alignment:Top→(水平スクロール)、Left→(垂直スクロール) 4. Cell Width,Cell Height:入れるオブジェクトのサイズ 5. Anchor:Upper Left 6.Scrolling Collectionの以下のパラメータを変更 1. Cells per Tier:1層当たりのセル数(=GridObjectCollectionのNum Rows) 2. Tiers per page:ページ値の層数 3. Page Cell:セルサイズ 7.|ω・)b Copyright © 2020 Takahiro Miyaura 11
  12. 12. Scrolling Collection ~ How to use ~ もう少し設定がある 2020/11/18  Advanced Settings よりスタイリッシュなスクローリングを実現 例:惰性でスクロール  イベント  On Click  On Touch Started  On Touch Ended  On Momentum Started  On Momentum Ended Copyright © 2020 Takahiro Miyaura 12
  13. 13. 軽く実演
  14. 14. Scrolling Collection ~ How to use ~ 注意点:Scrolling Collection1は入れ子にできない 2020/11/18  Scrolling Collectionは範囲外のオブジェクトを不可視にしている  不可視領域内すべてがスクロール操作のイベント検知範囲  子のScrolling Collectionのイベント検知範囲で操作がうまくいかない  色々なオブジェクトがもはや混乱状態になる Copyright © 2020 Takahiro Miyaura 14 親のScrolling Collection 親のアイテムを押すと 出てくる子のScrolling Collection
  15. 15. 本題 その② Elastic System
  16. 16. Elastic System ~ 弾性表現を扱うための仕組み ~ オブジェクトの動きをスタイリッシュ & ドラマチックにする 2020/11/18 Copyright © 2020 Takahiro Miyaura 16
  17. 17. Elastic System ~ 弾性表現を扱うための仕組み ~ 使い方1:Object Manipulatorでやる 2020/11/18 Copyright © 2020 Takahiro Miyaura 17  対象にObject ManipulatorとElastic Managerを追加  Object ManipulatorのElastics Managerに自分自身を設定  スタイリッシュにしたい操作を設定
  18. 18. Elastic System ~ 弾性表現を扱うための仕組み ~ 使い方1:Object Manipulatorでやる 2020/11/18 Copyright © 2020 Takahiro Miyaura 18  以下のような特定位置/向き固定は以下のカテゴリ内を調整  Translation Elastic Extent  Rotation Elastic Extent オブジェクトがスナップ後に戻る座標 スナップできる距離(半径) オブジェクトがスナップ後に戻る回転角 スナップできる角度 固定しない場合 びよ~んって動きになります。
  19. 19. 軽く実演
  20. 20. Elastic System ~ 弾性表現を扱うための仕組み ~ 使い方2:コーディングでやる 2020/11/18 Copyright © 2020 Takahiro Miyaura 20  現在の状態と経過時間から次の状態を計算する部品  LinearElasticSystem : floatの弾性  QuaternionElasticSystem : Quaternionの弾性  VolumeElasticSystem : Vector3の弾性 Transform.localScale = new Vector3(Mathf.Clamp01( elastic.ComputeIteration([GoalState], Time.deltaTime)), Transform.localScale.y, Transform.localScale.z); ※[GoalState]:終点の状態 MRTKのサンプル「ElasticSystemExamples」を確認! elastic = new LinearElasticSystem(・・・); Start() Update( )
  21. 21. この2つをなぜ紹介したか
  22. 22. 多階層メニューを作りたかった Scrolling Collectionを入れ子にしたらカオスになった 2020/11/18 Copyright © 2020 Takahiro Miyaura 22  冒頭で話した方に今のところ入れ子にはできない。 解決策:Scrolling Collectionを横に並べる メニュー1 メニュー2 メニュー3 メニュー4 メニュー1-1 メニュー1-2 メニュー1-3 メニュー1-4 メニュー1 メニュー2 メニュー3 メニュー4 メニュー1を押す 子要素をいきなりActiveにするとなんか微妙・・・ Elastics Systemでスタイリッシュにしよう!
  23. 23. 多階層メニューを作りたかった できた!Hand Menuも活用 2020/11/18 Copyright © 2020 Takahiro Miyaura 23  https://youtu.be/yF9cAugENws 追加情報をElastics Systemで登場するようにした。 情報量が多いのでHand Menuは出した後自動でWorld Lock
  24. 24. まとめ 情報表示の仕方は色々工夫が必要 2020/11/18 Copyright © 2020 Takahiro Miyaura 24  多量の情報表示にスクローリングは便利→Scrolling Collection  入れ子構造はScrolling Collectionはできないです ※複雑だからしない方がいいかも。。。仮にできたとしても。  少しずつ情報出す場合、徐々に増えていくUIはありかも  空間に突然情報が出てくるよりは徐々にの方がいいかも  情報出すと視界を塞ぐのでHand Menuは大事  Hand Menuで以下のパターンはWorld Lockで  操作するパネル  情報量が多いパネル
  25. 25. 大阪駆動開発 関西を中心に、IT系のおもしろそうなことを楽しんでやるコミュニティ 2020/11/18 Copyright © 2020 Takahiro Miyaura 25

×