File System Access API를 사용하면 읽기, 쓰기, 파일 관리 기능을 사용할 수 있습니다. 구성 3에서 이 API를 사용하는 방법을 알아보세요.
소개
(이 도움말은 동영상 형식으로도 제공됩니다.)
구성 3은 토마스와 애슐리 굴렌 형제가 개발한 게임 편집기입니다. 게임 편집기의 현재 세 번째 반복 버전의 경우 이전에 Windows 및 NW.js용으로 빌드한 후 완전히 '브라우저에서 새 운영체제가 [bet]'되었습니다. 편집기로 개발된 일부 게임은 쇼케이스를 둘러보거나 가이드 투어를 통해 알아볼 수 있습니다. 또한 웹의 초능력 덕분에 '아이디어 얻기' 예를 클릭하기만 하면 바로 수정할 수 있습니다.
구성 3의 File System Access API
구성에서는 File System Access API를 사용하여 로컬 파일에 저장하고 클라우드 저장 (Google Drive, OneDrive, Dropbox), 프로젝트 파일 사본을 다운로드할 수 있는 옵션을 제공합니다. 구성 개발자들이 수집한 통계에 따르면 저장 중 65% 가 File System Access API로 이루어지며, 대부분의 고객이 사용하기를 원하는 API라는 것을 알 수 있습니다.
저장하기 위해 다음 스니펫은 showSaveFilePicker() 메서드에서 FileSystemFileHandle를 가져온 다음 실제 데이터를 저장하는 데 사용되는 원본 프로덕션 코드를 보여줍니다. 구성은 id 옵션 매개변수를 사용합니다. id 필드를 지정하여 파일 선택 도구가 열리는 디렉터리를 추천할 수 있습니다. id를 지정하면 브라우저는 ID에 따라 여러 디렉터리를 기억할 수 있으므로 ID에 따라 동일한 디렉터리에서 대화상자를 일관되게 시작합니다. 예를 들어 수준 파일은 Documents/levels/에서 열 수 있고 텍스처 파일은 Images/textures/에서 열 수 있습니다. types 매개변수는 현지화된 사용자 시각적 description 및 accept 객체를 포함하는 지원되는 파일 형식의 배열로, 운영체제에 처음에 MIME 유형이 application/x-construct3-project인 .c3p 파일만 허용하도록 지시합니다.
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;
}
구축 팀은 사용자의 파일 시스템에 있는 파일 작업이 매우 직관적이라는 것을 발견했습니다. 기존 데스크톱 앱과 유사하게 작동하며 다른 소프트웨어와 편리하게 통합됩니다. 예를 들어 사용자의 파일을 백업하거나, 작업을 다른 곳으로 쉽게 전송하거나, 외부 도구로 파일을 수정할 수 있는 백업 소프트웨어입니다. 또한 백업 폴더 선택 또는 애니메이션과 같은 애셋 가져오기와 같은 다양한 다른 사용 사례에도 File System Access API를 사용합니다.
대용량 파일 및 폴더 작업하기
Composition의 고객 중 일부는 수백 MB에 달하는 매우 큰 규모의 프로젝트를 작업하고 있습니다. 이렇게 많은 양의 작업을 단일 파일에 저장하는 것은 클라우드 서비스에 업로드하는 것은 고사하고 매우 느립니다. File System Access API를 사용하면 고급 사용자가 모든 애셋이 별도의 파일에 있는 로컬 폴더로 작업할 수 있습니다. 이렇게 하면 변경된 파일만 업데이트하면 되므로 매우 빠르게 저장할 수 있습니다.
이전에 중단한 부분부터 계속하기
파일과 디렉터리 핸들은 모두 IndexedDB로 직렬화할 수 있습니다. 이렇게 하면 Composition이 여러 세션에 걸쳐 유지되는 최근 프로젝트 목록을 제공할 수 있으므로 사용자가 동일한 파일이나 폴더에 다시 액세스할 수 있어 사용자의 편의성이 크게 향상됩니다. 실제로 Construct에서 개설된 모든 프로젝트의 약 30% 가 이러한 방식으로 개방됩니다. 다음 스크린샷은 최근 프로젝트 두 개(tetris.c3p 및 columns.c3p)와 DevTools 창에서 IndexedDB 테이블에 직렬화된 해당 FileSystemFileHandle 객체를 보여줍니다.
드래그 앤 드롭 통합
File System Access API는 Drag and Drop API와도 통합되므로 사용자가 .c3p 파일을 애플리케이션으로 드래그 앤 드롭할 수 있습니다. 그러면 구성에서는 DataTransferItem 객체의 getAsFileSystemHandle() 메서드를 통해 FileSystemFileHandle를 가져올 수 있습니다. 즉, 이 방법으로 열린 파일을 별도의 파일 저장 대화상자를 거치지 않고도 즉시 수정하고 저장할 수 있습니다.
사용 중단된 NW.js 빌드
이전에는 팀에서 로컬 파일에 액세스하기 위해 별도로 유지관리 및 업데이트해야 하는 Composition의 NW.js 빌드가 있었습니다. Chromium에서 버전 84에 File System Access API에 대한 지원을 추가한 후 Composition 개발자는 2020년에 이 API를 구현했으며, 부수적인 결과로 NW.js 빌드를 중단하고 모든 플랫폼에서만 브라우저를 사용할 수 있었습니다. 이렇게 하면 개발이 간소화되고 브라우저 엔진을 앱과 번들로 묶을 필요가 없습니다.
결론
Config는 세 가지 선택 도구 메서드 showOpenFilePicker(), showSaveFilePicker(), showOpenDirectoryPicker()를 각각 적극적으로 사용하여 Composition을 사용한 이러한 작업 방식에 의존하는 방법을 학습한 사용자에게 혜택을 제공합니다. 추가 이점으로 Composition은 File Handling API를 사용하여 Composition 3이 .c3p 파일의 (기본) 파일 핸들러로 등록될 수 있습니다. 즉, 사용자가 운영체제의 파일 탐색기에서 바로 게임 파일을 더블클릭하거나 마우스 오른쪽 버튼으로 클릭하여 구성 3으로 열 수 있습니다. 웹에 전적으로 투자한 Composition은 WebGL, Web Audio, Web Workers, WebAssembly, 멀티플레이어 게임을 위한 WebRTC, 새로운 애니메이션 제품에 WebCodecs 등의 다양한 최신 브라우저 API를 사용합니다. 이들의 목표는 항상 웹 플랫폼을 최대한 활용하고 그 위에 어떤 훌륭한 제품을 빌드할 수 있는지 보여주는 것이었습니다. 둘러보기를 통해 나만의 게임을 만들어 보세요.