SFML 公式サンプル

SFML 公式サンプル の JavaScript 移植です。グラフィックス、ネイティブウィンドウ、入力、音声、通信の 24 サンプルを収録しています。Android は未移植です。

全サンプル · ビルド要件 · 機能サンプル · ゲームとアプリ

クイックスタート

リポジトリのルートで実行します。

npm ci
cd examples/official
node tennis/Tennis.cjs

以下のコマンドは examples/official で実行します。各スクリプトが必要な素材を読み込みます。描画にはディスプレイと OpenGL ウィンドウのサポートが必要です。

一覧：グラフィックス · 入力とイベント · オーディオ · ネットワーク · プラットフォーム連携

グラフィックス

Island

地形と照明

操作 · 矢印でパラメーターを編集、Enter で再生成

node island/Island.cjs

Shader

5 種類のシェーダー

sfml.js ロゴのエッジ検出プレビュー

操作 · 左右で選択、マウスで調整

node shader/Shader.cjs

Tennis

Pong

操作 · Space またはタッチで開始、上下キーで移動、Esc で終了

node tennis/Tennis.cjs

Stencil

ステンシルマスクと図形のアニメーション

node stencil/Stencil.cjs

Text

多言語の 40 サンプル

操作 · クリックで選択、F1／F2／F3 で境界とカーソル、F4 で前処理を切り替え、左右でカーソル移動

node text/Text.cjs

入力とイベント

Keyboard

物理キー配列、キーイベント、文字入力と効果音

node keyboard/Keyboard.cjs

Event handling

5 種類のイベント処理

操作 · Enter で切り替え

node event_handling/EventHandling.cjs

Raw input

マウスの Raw Input

node raw_input/RawInput.cjs

Joystick

軸とボタン

操作 · 0～7 で機器を選択、Tab で汎用／ゲームパッド表示を切り替え

node joystick/Joystick.cjs

オーディオ

録音サンプルにはマイクと OS の録音許可が必要です。

Sound effects

9 種類の効果

操作 · 左右で選択、マウスで調整、上下で減衰／波形選択、Space で DSP バイパス、F1 で出力変更

node sound_effects/SoundEffects.cjs

Sound

WAV 効果音と OGG、FLAC、MP3 音楽の再生

node sound/Sound.cjs

Sound capture

機器とサンプルレートを選び、録音して再生または保存

node sound_capture/SoundCapture.cjs

Sound device

機器通知、自動ルーティング、切断後の復旧。Ctrl+C で終了

node sound_device/SoundDevice.cjs

ネットワーク

HTTP

リダイレクト対応の対話型 HTTP GET

node http/Http.cjs

FTP

対話型 FTP クライアント、ポート 21

node ftp/Ftp.cjs

SFTP

対話型 SFTP。ホスト指紋を確認してから認証

node sftp/Sftp.cjs

Sockets

TCP、TLS、UDP のメッセージ交換、ポート 50001

node sockets/Sockets.cjs

VoIP

TCP による音声録音、再生、リプレイ、ポート 2435

node voip/VoIP.cjs

sockets と VoIP は 2 つのターミナルで実行し、サーバーとクライアントをそれぞれ選択します。ローカル接続には 127.0.0.1 を指定してください。

プラットフォーム連携

nodegl のビルドには CMake、C++ コンパイラー、OpenGL 開発ライブラリ（Linux では libgl1-mesa-dev）が必要です。Vulkan には Vulkan ローダーと 4 倍の異方性フィルタリングに対応するドライバーも必要です。

Window

OpenGL ウィンドウで回転する 6 色の立方体

操作 · 枠のドラッグでサイズ変更、Esc またはウィンドウを閉じて終了

node window/Window.cjs

macOS、Linux、Windows · ルートの npm ci で @wettstein/nodegl を導入

OpenGL

SFML の背景・文字と OpenGL のテクスチャ立方体を混在描画

操作 · マウスで立方体を移動、Enter で mipmap 切替、Space で sRGB 切替、Esc で終了

node opengl/OpenGL.cjs

macOS、Linux、Windows · ルートの npm ci で @wettstein/nodegl を導入

Vulkan

Vulkan で描画する回転テクスチャ立方体

操作 · マウスで立方体を移動、枠のドラッグでサイズ変更、Esc またはウィンドウを閉じて終了

node vulkan/Vulkan.cjs

Linux x64（X11）、Windows x64、Node.js 20+ · npm ci --prefix vulkan --ignore-scripts

Vulkan は x64 の Linux／X11 と Windows 向けで、nvk 0.8.0、Vulkan ローダー、4 倍の異方性フィルタリングに対応するドライバー・デバイスを使います。SFML はウィンドウ、イベント、サーフェスを担当し、nvk が独自のネイティブブリッジなしで Vulkan を直接呼び出します。SFML Graphics は引き続き OpenGL を使います。SFML の Vulkan 連携はコンパイル時に macOS 非対応となるため、MoltenVK の導入だけでは有効になりません。Linux／X11 と Windows のネイティブ描画と操作はどちらも検証済みです。操作と要件はプラットフォーム連携を参照してください。

Cocoa

macOS のネイティブ操作部品と埋め込み SFML ビュー

操作 · Update または Enter で文字を更新、Visible で表示切替、ダイヤルで回転、Color で背景色、Up／Down で拡大縮小。閉じる、Cmd+Q、Ctrl+C で終了

node cocoa/Cocoa.cjs

macOS · npm ci --prefix cocoa --ignore-scripts

Win32

Windows のネイティブウィンドウに 2 つの SFML アニメーションと Quit ボタンを配置

操作 · Quit、ウィンドウを閉じる、または Ctrl+C で終了

node win32/Win32.cjs

Windows x64、Node.js 20+ · npm ci --prefix win32 --ignore-scripts

X11

2 つの埋め込み SFML ウィンドウで立方体が異なる速度で回転

操作 · 任意のキー、ウィンドウを閉じる操作、Ctrl+C で終了

node X11/X11.cjs

X11 を利用できる Linux · ルートの npm ci で x11 と @wettstein/nodegl を導入

出典とライセンス

SFML のサンプルを元にしています。ソースのバージョンと素材の出典は provenance.json に記録しています。

• SFML ソース：zlib ライセンス。
• 素材と作者：asset_licenses.md。
• Noto：SIL Open Font License 1.1。
• stb Perlin の移植：MIT／パブリックドメインのデュアルライセンス。