Dear ImGui ウィジェットデモ
node packages/sfml.js-imgui/examples/demo.cjs
操作：内蔵デモのウィジェット、レイアウト、テーブル、 グラフを展開します。別の sfml.js-imgui パネルにはフレーム数と Reset ボタンがあります。ウィンドウを閉じて終了します。
ImGui サンプル
ネイティブの SFML ウィンドウで Dear ImGui のウィジェットを動かします。まずデモを試し、シーンパネルと Workbench で、編集した状態を SFML の描画に反映する方法を確認できます。
実行前の準備
以下のコマンドは monorepo のルートで実行します。初回に bootstrap で依存関係を導入し、各パッケージをビルドしてください。ディスプレイと OpenGL が必要です。プラットフォーム要件も確認してください。
sh
node tools/bootstrap.cjsImGui の TypeScript ソースを変更したら、npm run build:ts --prefix packages/sfml.js-imgui で再ビルドします。サンプルはローカルでビルドしたパッケージを使います。
サンプル
ImGui パネルから動く SFML の円を操作する
node packages/sfml.js-imgui/examples/scene-inspector.cjs
操作：Animate、Speed、Radius、Color でシーンを編集し、 Reset scene で初期値へ戻します。パネルの外をクリックして Space を押すと、 操作中のウィジェットに影響せず停止・再開できます。
テキスト入力、コールバック、テーブル、モーダル、独自描画
node packages/sfml.js-imgui/examples/workbench.cjs
操作：Name を編集し、オブジェクトを選択し、表の行を 切り替えます。Scene → Reset… で確認モーダルを開きます。 コマンドに TTF パスを追加するとラテン文字フォントを試せます。
3 つのサンプルはすべてのイベントを転送し、ウィンドウを折りたたんでも Begin と End を対応させ、型付き配列の状態をフレームループの外に保持し、SFML ウィンドウを閉じる前に ImGui を終了します。スクリーンショットは macOS で実際に動作しているネイティブサンプルから撮影しました。