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는 터미널 두 개에서 실행하고 각각 서버와 클라이언트를 선택합니다. 로컬 연결에는 127.0.0.1을 사용하세요.

플랫폼 통합

nodegl 빌드에는 CMake, C++ 컴파일러와 OpenGL 개발 라이브러리(Linux의 libgl1-mesa-dev)가 필요합니다. Vulkan에는 Vulkan 로더와 4배 비등방성 필터링을 지원하는 드라이버도 필요합니다.

Window

OpenGL 창에서 회전하는 여섯 색상의 큐브

조작 · 창 테두리를 드래그해 크기 조절, 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 네이티브 창의 SFML 애니메이션 뷰 두 개와 Quit 버튼

조작 · Quit, 창 닫기 또는 Ctrl+C로 종료

node win32/Win32.cjs

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

X11

두 내장 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/퍼블릭 도메인 이중 라이선스.