作例のカタログ

samples/ には、動かして手本にできる作例が入っています。このページで、作りたいものに近い作例を探し、動かし方を確かめられます。作例は、アプリ全体の形を見るものと、ウィジェット1つ(または1グループ)を扱うカタログ型に分かれます。ウィジェットの作例は、レイアウト・描画・入力の3つで引けます。目的(時計を出したい、アルバムを作りたい)から引ける作例の整備は、追跡: #261 です。

作例の動かし方

作例は FloatSoda のリポジトリに入っています。リポジトリを clone し、SteamVR を起動してから、リポジトリのルートで次のコマンドを実行します。<名前> を、下の表の作例の名前(FloatSoda.Samples. に続く部分)に置き換えます。PaintingSample のように、画面を PNG に書き出すだけの作例は、SteamVR を起動しなくても動きます。SteamVR が要らない場面は、動作環境で確かめられます。

dotnet run --project samples/FloatSoda.Samples.<名前>

ウィジェットの作例には、--desktop を付けられます。ダッシュボードの代わりに、PC のデスクトップのウィンドウに表示します。HMD を被らずに見た目を確かめるときに使います。

dotnet run --project samples/FloatSoda.Samples.Flex -- --desktop

--desktop を付けても、SteamVR の起動と HMD の接続は要ります。起動時に OpenVR を初期化するためです。

できた? ダッシュボード(--desktop なら PC のウィンドウ)に、作例の画面が出た。

できなかったら

起動で例外が出るときは、ガイドの起動で例外が出る: SteamVR または HMD につながらないを開きます。PC に必要なものが足りないときは、動作環境で確かめてください。

総合・最小・低レベルの作例

ウィジェット単体ではなく、まとまったアプリの形を見たいときは、次の4つから選びます。この4つに README はありません。コードを直接読んでください。

作例	示すもの	SteamVR
FloatSoda.Samples.OverlayApp	レイアウト、時計、アニメーション、カウンター、ドラッグの総合デモ。3種類のオーバーレイを同時に作る	要る
FloatSoda.Samples.GettingStarted	色の四角を1つ出す最小のアプリ。チュートリアルの段1に近い	要る
FloatSoda.Samples.PrimitiveOverlay	ウィジェットを使わず、`FloatSoda.OVR` の低レベル API だけでオーバーレイを出す。デスクトップにある `layer_tree_output.png` を貼るので、先に PaintingSample を実行しておく	要る
FloatSoda.Samples.PaintingSample	ウィジェット、RenderObject、レイヤーの3つのツリーを、PNG の画像に書き出す。デスクトップに保存する	要らない

チュートリアルを先に通したいときは、最初のオーバーレイを作るを開いてください。

ウィジェットの作例(レイアウト)

並べる、重ねる、余白を取る、大きさを決めるといった、レイアウトの目的で選びます。名前から各作例の README を開けます。

作例	扱うウィジェット
Flex	`Flex`、`Row`、`Column`
Expanded	`Expanded`、`Flexible`、`Spacer`
Wrap	`Wrap`
Align	`Align`、`Center`
Padding	`Padding`
Container	`Container`
SizedBox	`SizedBox`
LimitedBox	`LimitedBox`
ConstraintsTransformBox	`ConstraintsTransformBox`、`UnconstrainedBox`
Stack	`Stack`、`Positioned`
AspectRatio	`AspectRatio`
FittedBox	`FittedBox`、`BoxFit`
FractionallySizedBox	`FractionallySizedBox`
OverflowBox	`OverflowBox`、`SizedOverflowBox`

表は、samples/ のディレクトリから手で写したものです。作例が増えたときは、samples/ の一覧が正になります。部品を目的から探したいときは、部品を目的から探すを開いてください。

ウィジェットの作例(描画)

色を塗る、文字や画像を出す、透明にする、切り抜くといった、見た目の目的で選びます。

作例	扱うウィジェット
ColoredBox	`ColoredBox`
DecoratedBox	`DecoratedBox`、`BoxDecoration`
Opacity	`Opacity`
Transform	`Transform`
Clip	`ClipRect`、`ClipRoundRect`、`ClipOval`、`ClipCustomPath`
Text	`Text`、`RichText`、`TextSpan`、`TextStyle`
Image	`Image`、`FileImageProvider`、`BoxFit`

見た目をまとめて整える手順は、ガイドの見た目を整えるにあります。

ウィジェットの作例(入力)

押す、触れる、ドラッグするといった、操作の目的で選びます。

作例	扱うウィジェット
GestureDetector	`GestureDetector`(タップとドラッグ)
Listener	`Listener`(生のポインターイベント)
PointerRegion	`PointerRegion`(ホバーの出入りと、`Listener`・`GestureDetector` を重ねたときのイベントの順序)

ポインタの座標が届くのは、ダッシュボードのオーバーレイだけです。詳しくは、できないこと・まだ使えないものを開いてください。ボタンの組み立て方は、ガイドのボタンやトグルを組み立てるにあります。

目的から作例を探す

「時計を出したい」「画像を並べたい」のような、作りたいものの言葉から引ける作例は、今のところありません。目的別のミニアプリは、#261 で追っています。

近い作例がないときは、次の2つから選べます。

通しで1つのパネルを作る: ガイドの表情切り替えパネルを作る
コードを AI に書かせる: ガイドのAI に FloatSoda を書かせる