スクロール オブジェクト コレクション - MRTK2

Scrolling object collection

MRTK スクロール オブジェクト コレクションは、含まれている表示可能領域を介して 3D コンテンツをスクロールできるようにする UX コンポーネントです。 スクロールの動きは、近くまたは遠くで入力される対話式操作によってトリガーすることも、個別のページネーションによってトリガーすることもできます。 対話型オブジェクトと非対話型オブジェクトの両方がサポートされます。

スクロール オブジェクト コレクションの概要

シーンを設定する

  1. 新しい Unity シーンを作成します。
  2. [Mixed Reality Toolkit]>[シーンに追加して構成する] に移動して、MRTK をシーンに追加します。

スクロール オブジェクトを設定する

  1. シーンに空のゲーム オブジェクトを作成し、その位置を (0, 0, 1) に変更します。

  2. そのゲーム オブジェクトに、スクロール オブジェクト コレクション コンポーネントを追加します。

    スクロール オブジェクト コレクションを追加すると、ボックス コライダーと近接対話式操作タッチ可能コンポーネントがルート ゲーム オブジェクトに自動的にアタッチされます。 スクロール オブジェクトは、これらのコンポーネントを使用して、ポインター タッチやクリックなど、近くや遠くでの対話式操作の入力イベントをリッスンできるようになります。

    MRTK スクロール オブジェクト コレクションには、ルート スクロール オブジェクト階層の下に子ゲーム オブジェクトとして作成される 2 つの重要な要素があります。

    • Container - すべてのスクロール コンテンツ オブジェクトは、コンテナー ゲーム オブジェクトの子である必要があります。
    • Clipping bounds - スクロール コンテンツのマスクが有効になっている場合、クリッピング境界要素によって、その境界内のスクロール可能コンテンツのみが表示されるようになります。 クリッピング境界ゲーム オブジェクトには、2 つのコンポーネント (無効化されたボックス コライダーとクリッピング ボックス) があります。

Scrolling object collection elements

スクロール オブジェクトにコンテンツを追加する

スクロール オブジェクト コレクションをグリッド オブジェクト コレクションと組み合わせると、サイズと間隔が均等の整列した要素のグリッドにコンテンツをレイアウトすることができます。

  1. スクロール コンテナーの子として空のゲーム オブジェクトを作成します。
  2. そのゲーム オブジェクトに、グリッド オブジェクト コレクション コンポーネントを追加します。
  3. 垂直方向の単一列スクロールの場合は、[インスペクター] タブで、次のようにグリッド オブジェクト コレクションを構成します。
    • 列数: 1
    • レイアウト: 列の後に行
    • アンカー: 左上
  4. コンテンツ オブジェクトの大きさに応じて、セルの幅高さを変更します。
  5. コンテンツ オブジェクトをグリッド オブジェクトの子として追加します。
  6. [コレクションの更新] をクリックします。

Grid layout

重要

スクロール コンテンツ オブジェクト マテリアルでは、表示可能領域のクリッピング効果が適切に機能するために、MRTK 標準シェーダーを使用する必要があります。

Note

スクロール コンテンツのマスクが有効になっている場合、スクロール オブジェクト コレクションによって、マテリアル インスタンス コンポーネントが、レンダラーがアタッチされているすべてのコンテンツ オブジェクトに追加されます。 このコンポーネントは、インスタンス化されたマテリアルの有効期間を管理し、メモリのパフォーマンスを向上させるために使用されます。

スクロール表示可能領域を構成する

  1. オブジェクトの単一列を使用した垂直方向のスクロールでは、[インスペクター] タブで、次のようにスクロール オブジェクト コレクションを構成します。
    • 階層あたりのセル: 1
    • 表示しようとする行数に応じて[ページあたりの階層] の数を選択します。
  2. コンテンツ オブジェクトの大きさに応じて、[ページ セル] の [幅][高さ][奥行] を変更します。

スクロール表示可能領域の外側にあるコンテンツ オブジェクトがこれで無効になったが、スクロール ワイヤーフレームと交差するオブジェクトは、クリッピング プリミティブによって部分的にマスクされる場合があることに注意してください。

Viewable area

エディターでのスクロール オブジェクト コレクションをテストする

  1. 再生を押し、スペース バーを押したままにして、入力シミュレーションの手を表示します。
  2. スクロール コライダーまたは任意のスクロール対話型コンテンツがフォーカスされるまで手を動かし、マウスの左ボタンをクリックして上下にドラッグし、スクロール動作をトリガーします。

コードでスクロール オブジェクトを制御する

MRTK スクロール オブジェクト コレクションでは、いくつかのパブリック メソッドが公開されています。これらを使用すると、pagination プロパティの構成に応じて位置をスナップすることで、スクロール コンテナーを動かすことができます。

スクロール オブジェクト コレクションのページネーション インターフェイスにアクセスする方法の例が、MRTK/Examples/Demos/ScrollingObjectCollection/Scripts フォルダーに用意されており使用できます。 スクロール可能ページネーションのスクリプト例は、シーンに存在するどのスクロール オブジェクト コレクションにもリンクできます。 そうすることで、Unity イベントを公開するシーンのコンポーネント (MRTK ボタンなど) がスクリプトを参照できます。

public class ScrollablePagination : MonoBehaviour
{
    [SerializeField]
    private ScrollingObjectCollection scrollView;

    public void ScrollByTier(int amount)
    {
        scrollView.MoveByTiers(amount);
    }
}

スクロール オブジェクト コレクションのプロパティ

全般 説明
特定の方向 にスクロールする コンテンツをスクロールする方向。
改ページ位置の自動修正 説明
階層あたりのセル 上下スクロール ビューの行のセル数または左右スクロール ビューの列のセル数。
ページあたりの階層 スクロール領域に表示される階層の数。
ページ セル ページネーション セルの大きさ。
詳細設定 説明
マスク編集モード クリッピング ボックスのマスク境界を定義するための編集モード。 [自動] では、ページネーション値が自動的に使用されます。 [手動] では、クリッピング ボックス オブジェクトを直接操作できます。
コライダー編集モード スクロール対話式操作のコライダー境界を定義するための編集モード。 [自動] では、ページネーション値が自動的に使用されます。 [手動] では、コライダーを直接操作できます。
スクロール可能 近接/遠隔の対話式操作によるスクロールを有効化/無効化します。
事前レンダリングで使用 scrollingObjectCollection が、Camera OnPreRender イベントを使用してコンテンツの可視性を管理するかどうかを切り替えます。
ページネーション曲線 ページネーションのアニメーション曲線。
アニメーションの長さ PaginationCurve が評価にかける時間 (秒)。
ハンド デルタ スクロールしきい値 現在のポインターがスクロール方向に移動して、スクロール ドラッグをトリガーするまでの距離 (メートル)。
前面タッチ距離 スクロール ビューの前面でタッチ対話式操作が始まったかどうかを確認するために使用される、ローカル xy 平面までの距離 (メートル)。
リリースしきい値 タッチがエンゲージからリリースに移行するために必要となる、スクロール境界から離れる距離 (メートル)。
ベロシティ 説明
速度の種類 スクローラーで必要な減速の種類。
速度乗数 スクローラーに適用される (特別な) 加速量。
速度減衰 速度に適用される減速量。
バウンス乗数 フレームあたりのフォールオフ数またはアイテムあたりのフォールオフ数を使用する際に、リストのオーバースクロールに追加するバウンスの乗数。
デバッグ オプション 説明
マスク有効 スクロール コンテンツの可視性モード。 既定値では、スクロール表示可能領域の外にあるすべてのオブジェクトがマスクされます。
しきい値面の表示 True の場合、エディターによって、スクロールの境界の周囲のタッチ リリースしきい値面がレンダリングされます。
ページネーションのデバッグ このセクションを使用して、実行時のスクロール ページネーションをデバッグします。
events 説明
クリック時 スクロール バックグラウンド コライダーまたはその対話型コンテンツのいずれかがクリックされたときに、トリガーされます。
タッチ開始時 スクロール バックグラウンド コライダーまたはその対話型コンテンツのいずれかに近接対話式操作タッチが行われたときに、トリガーされます。
タッチ終了時 近接対話式操作ポインターがリリースしきい値面を超えてアクティブなタッチ対話式操作が終了したときにトリガーされます。
運動開始時 対話式操作、速度フォールオフまたはページネーションによってスクロール コンテナーが動作を開始したときにトリガーされます。
運動終了時 対話式操作、速度フォールオフまたはページネーションによってスクロール コンテナーが動作を終了したときにトリガーされます。

スクロールのサンプル シーン

ScrollingObjectCollection.unity サンプル シーンにはスクロール可能なサンプルが 3 つ含まれ、それぞれの速度フォールオフ構成が異なっています。 このサンプル シーンには、階層で既定で無効になっているサーフェス配置の動作を示す壁が含まれています。 サンプル シーンは、MRTK/Examples/Demos/ScrollingObjectCollection/Scenes フォルダーの下にあります。

Scrolling object collection example scene

スクロールのサンプル プレハブ

便利に使用できるようにスクロール オブジェクト コレクションのプレハブが 2 つ提供されています。 サンプル プレハブは、MRTK/Examples/Demos/ScrollingObjectCollection/Prefabs フォルダーの下にあります。

Scrolling object collection prefabs

関連項目