File System Access API는 읽기, 쓰기, 파일 관리 기능을 허용합니다. Construct 3에서 이 API를 사용하는 방법을 알아봅니다.
소개
이 도움말은 동영상으로도 제공됩니다.
Construct 3는 토마스와 애슐리 굴렌 형제가 개발한 게임 편집기입니다. 현재 게임 편집기의 세 번째 버전에서는 이전에 Windows 및 NW.js용으로 빌드한 후 두 가지 모두 완전히 '브라우저가 새로운 운영체제라고 [베팅]'했습니다. 쇼케이스를 살펴보거나 가이드 투어를 진행하여 이 편집기로 개발된 게임을 살펴볼 수 있습니다. 웹의 강력한 기능 덕분에 '아이디어 얻기' 예시 중 하나를 클릭하여 즉시 수정할 수도 있습니다.
Construct 3의 File System Access API
구조는 File System Access API를 사용하여 로컬 파일에 저장하고, 클라우드 저장 (Google Drive, OneDrive, Dropbox)을 통해 프로젝트 파일 사본을 다운로드하는 옵션을 제공합니다. Construct 개발자가 수집한 통계에 따르면 저장 중 65% 가 File System Access API를 사용하여 이루어지며, 이는 대부분의 고객이 이 API를 사용하고 싶어 한다는 것을 보여줍니다.
저장의 경우 다음 스니펫은 showSaveFilePicker() 메서드에서 FileSystemFileHandle를 가져와 실제 데이터를 저장하는 데 사용되는 원래 프로덕션 코드를 보여줍니다. 생성자는 id 옵션 매개변수를 사용합니다. id 필드를 지정하여 파일 선택 도구가 열리는 디렉터리를 제안할 수 있습니다. id를 지정하면 브라우저가 서로 다른 ID의 다른 디렉터리를 기억할 수 있으며, 이렇게 하면 ID에 따라 같은 디렉터리에서 일관되게 대화상자를 시작하는 역할을 합니다. 예를 들어 레벨 파일은 Documents/levels/에서 열 수 있지만 텍스처 파일은 Images/textures/에서 열 수 있습니다. types 매개변수는 현지화된 사용자 시각적 description와 운영체제에 MIME 유형이 application/x-construct3-project인 .c3p 파일만 처음에 허용하도록 지시하는 accept 객체가 포함된 지원되는 파일 유형의 배열입니다.
let fileHandle = null;
try {
fileHandle = await window["showSaveFilePicker"]({
id: "save-project-file",
types: [
{
description: lang("ui.project-file-picker.c3-single-file-project"),
accept: {
"application/x-construct3-project": [".c3p"],
},
},
],
});
} catch (err) {
// Assume user cancelled, or permission otherwise denied.
return;
}
Construct팀은 사용자의 파일 시스템에서 파일을 사용하는 것이 매우 직관적이라고 판단했습니다. 기존 데스크톱 앱과 비슷하게 작동하며 다른 소프트웨어와 편리하게 통합됩니다. 예를 들어 사용자 파일을 백업하거나, 작업을 다른 위치로 쉽게 전송하거나, 외부 도구로 파일을 수정할 수 있는 백업 소프트웨어를 들 수 있습니다. 또한 백업 폴더를 선택하거나 애니메이션과 같은 애셋을 가져오는 등 다양한 다른 사용 사례에도 File System Access API를 사용합니다.
대용량 파일 및 폴더 작업
Construct의 일부 고객은 수백 메가바이트의 매우 큰 프로젝트로 작업합니다. 이렇게 많은 양의 작업을 단일 파일에 저장하는 것은 클라우드 서비스에 업로드하는 것은 말할 것도 없고 매우 느립니다. File System Access API를 사용하면 고급 사용자가 모든 저작물이 별도의 파일로 저장된 로컬 폴더로 작업할 수 있습니다. 변경된 파일만 업데이트하면 되므로 매우 빠르게 저장할 수 있습니다.
이전에 중단한 부분부터 계속하기
파일 핸들과 디렉터리 핸들 모두 IndexedDB로 직렬화할 수 있으므로 Construct는 세션 전반에서 유지되는 최근 프로젝트 목록을 제공할 수 있습니다. 따라서 사용자는 동일한 파일이나 폴더에 다시 액세스할 수 있어 매우 편리합니다. 실제로 Construct에서 열리는 모든 프로젝트의 약 30% 가 이 방법으로 열립니다. 다음 스크린샷에는 두 개의 최근 프로젝트인 tetris.c3p 및 columns.c3p와 DevTools 창에서 IndexedDB 테이블에 직렬화된 상응하는 FileSystemFileHandle 객체가 나와 있습니다.
드래그 앤 드롭 통합
File System Access API는 Drag and Drop API와도 통합되므로 사용자가 .c3p 파일을 애플리케이션으로 드래그 앤 드롭할 수 있습니다. 그러면 Construct는 DataTransferItem 객체의 getAsFileSystemHandle() 메서드를 통해 FileSystemFileHandle를 가져올 수 있습니다. 즉, 이 방법으로 연 파일은 별도의 파일 저장 대화상자를 거칠 필요 없이 즉시 수정하고 저장할 수 있습니다.
지원 중단된 NW.js 빌드
이전에는 팀에서 Construct의 NW.js 빌드를 사용했는데, 이 빌드는 로컬 파일에 액세스하기 위해 별도로 유지 관리 및 업데이트해야 했습니다. Chromium이 버전 84에 File System Access API에 대한 지원을 추가한 후 구성 개발자는 2020년에 이 API를 구현하여 NW.js 빌드를 폐기하고 모든 플랫폼에서만 브라우저를 사용할 수 있게 되었습니다. 이렇게 하면 개발이 간소화되고 브라우저 엔진을 앱과 번들로 묶을 필요가 없습니다.
결론
Struct는 Struct의 세 가지 선택 도구 메서드 showOpenFilePicker(), showSaveFilePicker(), showOpenDirectoryPicker()를 각각 많이 사용하여 이러한 Structured 작업 방식에 의존하는 방법을 학습한 사용자에게 이점을 제공합니다. 추가적인 이점으로, Struct는 File Handling API도 사용합니다. 이 API를 사용하면 Struct 3가 .c3p 파일의 (기본) 파일 핸들러로 스스로를 등록할 수 있습니다. 즉, 사용자는 운영체제의 파일 탐색기에서 바로 게임 파일을 더블클릭하거나 마우스 오른쪽 버튼으로 클릭하여 Construct 3으로 열 수 있습니다. 웹에 전적으로 투자하는 Struct는 WebGL, Web Audio, Web Workers, WebAssembly, 멀티플레이어 게임용 WebRTC, Local Font Access, 새로운 애니메이션 제품용 WebCodecs 등 최신 브라우저 API를 다양하게 사용합니다. 웹 플랫폼을 최대한 활용하고 이를 기반으로 멋진 제품을 만드는 방법을 보여주는 것이 항상 목표였으므로 가이드 투어를 사용해 보고 나만의 게임을 만들어 보세요.