비동기 대기와 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만 사용하는 앱은 빠른 시작을 참고하세요. 보조 파일은 해당 진입점에 속하며 별도 프로그램이 아닙니다.
System
다양한 수치 스칼라의 벡터 연산
node examples/vector-scalars.cjs
스칼라 타입별 TypedArray 공유 저장소와 네이티브 비교를 표시합니다. Esc로 종료합니다.
--frames를 지원하지 않습니다. 창을 닫아 중지하세요.
저장소 진단용 진입점: 내부 네이티브 미리보기 또는 검증 API를 사용하며 공개 API만 사용하는 앱 템플릿이 아닙니다.
Window
창 이벤트, 커서, 입력 진단
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를 확인하는 콘솔 전용 진입점입니다. 터미널 하나에서 실행하고 끝나면 소켓을 닫습니다.
npm run demo:network
스크린샷
SFML_DEMO_SNAPSHOT을 지원하는 그래픽 예제는 실행 화면을 저장할 수 있습니다. macOS/Linux에서는 다음과 같이 실행합니다.
sh
SFML_DEMO_SNAPSHOT=/tmp/sfml-render-texture.png \
node examples/render-texture.cjs --frames=2PowerShell:
powershell
$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에는 최소 두 프레임이 필요하며 다른 내장 미리보기는 첫 프레임을 저장할 수 있습니다. sprites는 첫 프레임 저장 후에도 실행되며 창을 닫아야 끝납니다. 출처는 sources.json에 기록되어 있습니다.