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

takabrz1 大阪駆動開発 Takahiro Miyaura
Scrolling Collections
とElastic System

宮浦恭弘 (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）
 リリース機能調べたり・・・
 面白い機能使ってみたり・・・
 新しい実験してフィードバックしたり・・・
最近はこちらが中心

本日のお題
Mixed Reality Toolkit V2.5の幾つか便利そうなものを試す
2020/11/18 Copyright © 2020 Takahiro Miyaura
Scrolling Collections
スクロール可能なコレクションを作成
Elastic System
UXがドラマチックになるシステム
3

本題
その前に・・・いつもの紹介

Mixed Reality Toolkitに関連するライブラリ
各ゲームエンジン向けに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

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

Mixed Reality Toolkit V2
概要
XRデバイスの固有機能を含め様々な補助機能を提
供
7

Mixed Reality Toolkit V2
概要
UX building blocks : 組込み済みのUX部品群
 これらを組合せることで容易なアプリケーション開発が可能に
8

本題その①
Scrolling Collections

Scrolling Collection
～整列されたオブジェクトをスライド操作でスクロールする～
オブジェクトなら何でもスクロール可能
2020/11/18
少しだけ設定にコツが必要
現在は入れ子ではできない
Copyright © 2020 Takahiro Miyaura 10

～ 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

～ How to use ～
もう少し設定がある
2020/11/18
 Advanced Settings
よりスタイリッシュなスクローリングを実現
例：惰性でスクロール
 イベント
 On Click
 On Touch Started
 On Touch Ended
 On Momentum Started
 On Momentum Ended

～ How to use ～
注意点：Scrolling Collection1は入れ子にできない
2020/11/18
 Scrolling Collectionは範囲外のオブジェクトを不可視にしている
 不可視領域内すべてがスクロール操作のイベント検知範囲
 子のScrolling Collectionのイベント検知範囲で操作がうまくいかない
 色々なオブジェクトがもはや混乱状態になる
親のScrolling Collection
親のアイテムを押すと
出てくる子のScrolling Collection

本題その②
Elastic System

Elastic System
～弾性表現を扱うための仕組み～
オブジェクトの動きをスタイリッシュ & ドラマチックにする

Elastic System
使い方1:Object Manipulatorでやる
 対象にObject ManipulatorとElastic Managerを追加
 Object ManipulatorのElastics Managerに自分自身を設定
 スタイリッシュにしたい操作を設定

Elastic System
使い方1:Object Manipulatorでやる
 以下のような特定位置/向き固定は以下のカテゴリ内を調整
 Translation Elastic Extent
 Rotation Elastic Extent
オブジェクトがスナップ後に戻る座標
スナップできる距離（半径）
オブジェクトがスナップ後に戻る回転角
スナップできる角度
固定しない場合
びよ～んって動きになります。

Elastic System
使い方2:コーディングでやる
 現在の状態と経過時間から次の状態を計算する部品
 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(
)

この2つをなぜ紹介したか

多階層メニューを作りたかった
Scrolling Collectionを入れ子にしたらカオスになった
 冒頭で話した方に今のところ入れ子にはできない。
解決策：Scrolling Collectionを横に並べる
メニュー1
メニュー2
メニュー3
メニュー4
メニュー1-1
メニュー1-2
メニュー1-3
メニュー1-4
メニュー1
メニュー2
メニュー3
メニュー4
メニュー1を押す
子要素をいきなりActiveにするとなんか微妙・・・
Elastics Systemでスタイリッシュにしよう！

多階層メニューを作りたかった
できた！Hand Menuも活用
 https://youtu.be/yF9cAugENws
追加情報をElastics Systemで登場するようにした。
情報量が多いのでHand Menuは出した後自動でWorld Lock

まとめ
情報表示の仕方は色々工夫が必要
 多量の情報表示にスクローリングは便利→Scrolling Collection
 入れ子構造はScrolling Collectionはできないです
※複雑だからしない方がいいかも。。。仮にできたとしても。
 少しずつ情報出す場合、徐々に増えていくUIはありかも
 空間に突然情報が出てくるよりは徐々にの方がいいかも
 情報出すと視界を塞ぐのでHand Menuは大事
 Hand Menuで以下のパターンはWorld Lockで
 操作するパネル
 情報量が多いパネル

大阪駆動開発
関西を中心に、IT系のおもしろそうなことを楽しんでやるコミュニティ

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

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

Ähnlich wie Scrolling CollectionsとElastic System(Mixed Reality Toolkit V2.5.1) (18)

Mehr von Takahiro Miyaura

Mehr von Takahiro Miyaura (9)

Kürzlich hochgeladen

Kürzlich hochgeladen (11)

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