
非同期の待機と SFML のログ出力
node examples/sleep-err.cjs
S で 2 秒待機、W でログ出力、N でネイティブ診断。R でパネルにログを転送、M で抑制、D で stderr に戻します。Esc で終了。
フレーム数を制限する場合:--frames=120。
npm run demo:sleep-err
sfml.js リポジトリのルートで実行します。初回は
npm ci、ソース変更後はnpm run buildが必要です。Network 以外はウィンドウを開くため、ディスプレイと OpenGL のサポートが必要です。
ビルド後は以下のコマンドを直接実行できます。package.json の demo:* は設定に従って再ビルドします。終了するにはウィンドウを閉じてください。フレーム数を指定した入口は自動終了します。画像は特定シーンの描画結果であり、性能やデバイステストの結果ではありません。
公開 API だけを使うアプリはクイックスタートから始めてください。補助ファイルは入口に付属し、独立したプログラムとしては扱いません。

非同期の待機と SFML のログ出力
node examples/sleep-err.cjs
S で 2 秒待機、W でログ出力、N でネイティブ診断。R でパネルにログを転送、M で抑制、D で stderr に戻します。Esc で終了。
フレーム数を制限する場合:--frames=120。
npm run demo:sleep-err

各種数値スカラー型でのベクトル演算
node examples/vector-scalars.cjs
各スカラー型の TypedArray 共有ストレージとネイティブ比較を表示します。Esc で終了。
--frames 非対応。停止するにはウィンドウを閉じてください。
リポジトリ内の診断用入口:内部のネイティブプレビューや検証 API を使用し、公開 API だけのアプリ雛形ではありません。

ウィンドウイベント、カーソル、入力の診断
node examples/window.cjs
F1 はカーソル切替、F2 は表示切替、F3 はキーリピート、F4 は VSync、F5 はサイズ、F6 はサイズ制限、F7 はタイトル、F8 は一時非表示、F9 はイベント処理方式、F10 はウィンドウ移動。矢印でマーカーを移動し、文字入力と Backspace で編集、Esc で終了。
フレーム数を制限する場合:--frames=120。
リポジトリ内の診断用入口:内部のネイティブプレビューや検証 API を使用し、公開 API だけのアプリ雛形ではありません。
補助ファイル: bitmap-label.cjs
npm run demo:window

System と Window のインターフェース
node examples/system-window.cjs
C でサンプル文字列をクリップボードに書き込み、V で読み取り、A で OpenGL コンテキストを切替。Esc で終了。Touch は対応機器が必要で、macOS のトラックパッドジェスチャーは SFML のタッチではありません。
フレーム数を制限する場合:--frames=120。
npm run demo:system-window

値型、変換、図形、頂点、テキストを組み合わせたシーン
node examples/all-types.cjs
フレーム数を制限する場合:--frames=120。
リポジトリ内の診断用入口:内部のネイティブプレビューや検証 API を使用し、公開 API だけのアプリ雛形ではありません。
補助ファイル: all-types-scene.cjs, bitmap-label.cjs
npm run demo:types
大量のスプライトの描画
node examples/sprites.cjs
256 個の動くスプライト。--uncapped でデモのタイマーを外せます。
--frames 非対応。停止するにはウィンドウを閉じてください。
リポジトリ内の診断用入口:内部のネイティブプレビューや検証 API を使用し、公開 API だけのアプリ雛形ではありません。
npm run demo

ピクセルの編集、コピー、マスク、エンコードとデコード
node examples/image.cjs
--file=/path/to/image.png で画像を指定できます。
フレーム数を制限する場合:--frames=120。
リポジトリ内の診断用入口:内部のネイティブプレビューや検証 API を使用し、公開 API だけのアプリ雛形ではありません。
補助ファイル: bitmap-label.cjs
npm run demo:image

画像の読み込み、切り出し、部分アップロード、サンプリング
node examples/texture.cjs
フレーム数を制限する場合:--frames=120。
リポジトリ内の診断用入口:内部のネイティブプレビューや検証 API を使用し、公開 API だけのアプリ雛形ではありません。
補助ファイル: bitmap-label.cjs
npm run demo:texture
スプライトのアニメーション、反転、色、境界
node examples/sprite.cjs
フレーム数を制限する場合:--frames=120。
リポジトリ内の診断用入口:内部のネイティブプレビューや検証 API を使用し、公開 API だけのアプリ雛形ではありません。
補助ファイル: bitmap-label.cjs
npm run demo:sprite

オフスクリーン合成、テクスチャビュー、描画スナップショット
node examples/render-texture.cjs
フレーム数を制限する場合:--frames=120。
リポジトリ内の診断用入口:内部のネイティブプレビューや検証 API を使用し、公開 API だけのアプリ雛形ではありません。
補助ファイル: bitmap-label.cjs
npm run demo:render-texture

独自の複合オブジェクト、親子の変換、ブレンド、ステンシル
node examples/drawable.cjs
フレーム数を制限する場合:--frames=120。
リポジトリ内の診断用入口:内部のネイティブプレビューや検証 API を使用し、公開 API だけのアプリ雛形ではありません。
補助ファイル: bitmap-label.cjs
npm run demo:drawable

動的なタイルと連続した頂点
node examples/vertex-array.cjs
フレーム数を制限する場合:--frames=120。
リポジトリ内の診断用入口:内部のネイティブプレビューや検証 API を使用し、公開 API だけのアプリ雛形ではありません。
npm run demo:vertices

テキストのレイアウトと頂点アニメーション
node examples/text.cjs
--font=/path/to/font.ttf と --text=日本語 でフォントと文字列を指定できます。必要なグリフを持つフォントを選んでください。Esc で終了。
フレーム数を制限する場合:--frames=120。
npm run demo:text

Sound、Music、Worker によるデータ供給、エフェクト、録音再生
node examples/audio.cjs
1~4 でモード選択、Space で再生/一時停止、S で停止、E でエフェクト切替、R/T で録音開始/終了、矢印でパンと音量を調整、Esc で終了。録音にはマイクと許可が必要で、通常起動時は入力を待ちます。
フレーム数を制限する場合:--frames=120。
補助ファイル: audio-worker.cjs
npm run demo:audio
ローカルの TCP、Packet、UDP、Selector
node examples/network.cjs
動的に割り当てたループバックポートで TCP、Packet、UDP、SocketSelector を確認するコンソール専用入口。ターミナル 1 つで実行し、終了時にソケットを閉じます。
npm run demo:network
SFML_DEMO_SNAPSHOT に対応するグラフィックスのサンプルは、実行画面を保存できます。macOS/Linux では、たとえば次のように実行します。
SFML_DEMO_SNAPSHOT=/tmp/sfml-render-texture.png \
node examples/render-texture.cjs --frames=2PowerShell の場合:
$env:SFML_DEMO_SNAPSHOT = "$env:TEMP/sfml-render-texture.png"
node examples/render-texture.cjs --frames=2
Remove-Item Env:SFML_DEMO_SNAPSHOT内蔵の撮影機能は SFML_DEMO_SNAPSHOT を使います。all-types、sprites、drawable、vertex-array、system-window、sleep-err は拡張子に関係なく PPM を書くため、.ppm を指定してください。image、texture、sprite、render-texture、window、audio は PNG に対応します。text と vector-scalars はこの環境変数に非対応です。両方の画像は一時的な計測コードで撮影しました。
sleep-err は最終フレーム、vertex-array はループ終了後に保存するため、有限のフレーム数を指定してください。system-window、window、audio は最低 2 フレーム必要で、他の内蔵プレビューは最初のフレームを保存する場合があります。sprites は最初のフレームを保存した後も動作し、ウィンドウを閉じるまで終了しません。出典は sources.json に記録しています。
Icons made by Lorc, Delapouite & Skoll game-icons.net · CC BY 3.0