オービター

対象となる XR デバイス
このガイダンスは、次のようなタイプの XR デバイス向けのエクスペリエンスを構築する際に役立ちます。
XR デバイスのタイプについて →
XR ヘッドセット
有線 XR グラス
XR デバイスのタイプについて →

Orbiter は、対応する空間パネルまたは空間レイアウト コンポーネント（SpatialColumn、SpatialRow、SpatialBox など）にアタッチできる空間化コンポーネントです。オービターには通常、アンカーされているエンティティに関連するナビゲーション アイテムとコンテキスト アクション アイテムが含まれます。たとえば、動画コンテンツを表示する空間パネルを作成した場合、オービター内に動画再生コントロールを追加できます。

図 1.: オービターの例。

オービターを作成する

次の例に示すように、SpatialPanel 内の 2D レイアウト内でオービターを呼び出して、ナビゲーションなどのユーザー コントロールをラップします。これにより、2D レイアウトから抽出され、構成に従って空間パネルにアタッチされます。

Subspace {
    SpatialPanel(
        SubspaceModifier
            .height(824.dp)
            .width(1400.dp)
            .resizable()
            .movable(),
    ) {
        SpatialPanelContent()
        OrbiterExample()
    }
}

@Composable
fun OrbiterExample() {
    Orbiter(
        position = OrbiterPosition.BottomCenter(
            verticalEdgeAlignment = OrbiterPosition.EdgeAlignment.Outside,
            offset = DpVolumeOffset(y = 96.dp)
        ),
    ) {
        Surface(Modifier.clip(CircleShape)) {
            Row(
                Modifier
                    .background(color = Color.Black)
                    .height(100.dp)
                    .width(600.dp),
                horizontalArrangement = Arrangement.Center,
                verticalAlignment = Alignment.CenterVertically
            ) {
                Text(
                    text = "Orbiter",
                    color = Color.White,
                    fontSize = 50.sp
                )
            }
        }
    }
}

コードに関する主なポイント

  • オービターは空間 UI コンポーネントであるため、コードを 2D または 3D レイアウトで再利用できます。2D レイアウトでは、アプリはオービター内のコンテンツのみをレンダリングし、オービター自体は無視します。
  • オービターの使用方法と設計方法について詳しくは、設計に関するガイダンスをご覧ください。

オービターを空間パネルとレイアウトに固定する

オービターは、Compose で宣言された SpatialPanel と空間レイアウト コンポーネントにアンカーできます。これには、SpatialRow、SpatialColumn、SpatialBox などの UI 要素の空間レイアウトでオービターを宣言することが含まれます。オービターは、宣言した場所に最も近い親にアンカーされます。

オービターの動作は、宣言する場所によって決まります。

  • SpatialPanel でラップされた 2D レイアウト（前述のコード スニペットを参照）では、オービターはその SpatialPanel にアンカーされます。
  • Subspace では、オービターは最も近い親エンティティ（オービターが宣言されている空間レイアウト）に固定されます。

次の例は、オービターを空間行に固定する方法を示しています。

Subspace {
    SpatialRow {
        Orbiter(
            position = OrbiterPosition.TopCenter(
                verticalEdgeAlignment = OrbiterPosition.EdgeAlignment.Outside,
                offset = DpVolumeOffset(y = 8.dp)
            ),
            shape = SpatialRoundedCornerShape(size = CornerSize(50))
        ) {
            Text(
                "Hello World!",
                style = MaterialTheme.typography.titleMedium,
                modifier = Modifier
                    .background(Color.White)
                    .padding(16.dp)
            )
        }
        SpatialPanel(
            SubspaceModifier
                .height(824.dp)
                .width(1400.dp)
        ) {
            Box(
                modifier = Modifier
                    .background(Color.Red)
            )
        }
        SpatialPanel(
            SubspaceModifier
                .height(824.dp)
                .width(1400.dp)
        ) {
            Box(
                modifier = Modifier
                    .background(Color.Blue)
            )
        }
    }
}

コードに関する主なポイント

  • 2D レイアウトの外側でオービターを宣言すると、オービターは最も近い親エンティティに固定されます。この場合、オービターは、宣言されている SpatialRow の上部にアンカーされます。
  • SpatialRow、SpatialColumn、SpatialBox などの空間レイアウトには、コンテンツのないエンティティが関連付けられています。そのため、空間レイアウトで宣言されたオービターは、そのレイアウトにアンカーされます。