API File System Access позволяет читать, писать и управлять файлами. Узнайте, как Construct 3 использует этот API.
Введение
(Эта статья также доступна в виде видео.)
Construct 3 — игровой редактор, разработанный братьями Томасом и Эшли Гуллен . Для текущей третьей итерации своего игрового редактора, двое полностью «[сделали ставку] на то, что браузер станет новой операционной системой» после того, как ранее создавали для Windows и NW.js. Вы можете получить представление о некоторых играх, разработанных с помощью редактора, изучив его витрину или пройдя по гиду . Благодаря сверхспособностям Интернета вы также можете просто щелкнуть на любой из примеров «Get inspiration» и немедленно начать редактирование.
API доступа к файловой системе в Construct 3
Construct предоставляет возможность сохранения в локальных файлах с помощью API доступа к файловой системе , а также сохранения в облаке (Google Drive, OneDrive, Dropbox) и загрузки копии файла проекта. Статистика, собранная разработчиками Construct, показывает, что 65% сохранений выполняются с помощью API доступа к файловой системе, что демонстрирует, что это то, что большинство клиентов хотят использовать.
Для сохранения следующий фрагмент показывает исходный производственный код для получения FileSystemFileHandle из метода showSaveFilePicker() , который затем служит для сохранения фактических данных. Construct использует параметр опций id . Поле id может быть указано для указания каталога, в котором открывается средство выбора файлов. Указав id , браузер может запомнить различные каталоги для различных идентификаторов, что позволяет последовательно запускать диалог в одном и том же каталоге в зависимости от идентификатора. Например, файлы уровней могут открываться в Documents/levels/ , тогда как файлы текстур могут открываться в Images/textures/ . Параметр types представляет собой массив поддерживаемых типов файлов с локализованным пользовательским визуальным description и объектом accept , который сообщает операционной системе изначально принимать только файлы .c3p с типом MIME application/x-construct3-project .
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 обнаружила, что работа с файлами в файловой системе пользователя очень интуитивна. Она работает аналогично традиционным настольным приложениям и удобно интегрируется с другим программным обеспечением. Например, программное обеспечение для резервного копирования, которое может делать резервные копии файлов пользователей, или для легкой отправки работы в другие места, или для редактирования файлов с помощью внешних инструментов. Они также используют API File System Access для различных других вариантов использования, таких как выбор папки резервного копирования или импорт ресурсов, таких как анимации.
Работа с большими файлами и папками
Некоторые клиенты Construct работают с очень большими проектами, в сотни мегабайт. Сохранение такого большого объема работы в один файл мучительно медленно, не говоря уже о загрузке его в облачный сервис. API File System Access позволяет опытным пользователям работать с локальной папкой со всеми их активами в отдельных файлах. Это позволяет выполнять очень быстрые сохранения, поскольку обновлять нужно только измененные файлы.
Продолжайте с того места, где остановились
Как дескрипторы файлов, так и дескрипторы каталогов могут быть сериализованы в IndexedDB, что позволяет Construct предоставлять список последних проектов, который сохраняется между сеансами, так что пользователи могут снова получить доступ к тому же файлу или папке, что очень удобно для пользователя. Фактически, около 30% всех проектов, открытых в Construct, открываются таким образом. На следующем снимке экрана показаны два последних проекта, tetris.c3p и columns.c3p , а в окне DevTools — соответствующие объекты FileSystemFileHandle , сериализованные в таблице IndexedDB.
Интеграция с функцией перетаскивания
File System Access API также интегрируется с Drag and Drop API , так что пользователь может перетаскивать файлы .c3p в приложение. Затем Construct может с помощью метода getAsFileSystemHandle() объекта DataTransferItem получить FileSystemFileHandle , что означает, что файлы, открытые таким образом, могут быть отредактированы и сохранены немедленно, без необходимости проходить через отдельный диалог сохранения файла.
Устаревшая сборка NW.js
Ранее у команды была сборка NW.js Construct, которую нужно было поддерживать и обновлять отдельно для доступа к локальным файлам. После того, как Chromium добавил поддержку API доступа к файловой системе в версии 84, разработчики Construct реализовали API в 2020 году , и в качестве побочного продукта смогли удалить сборку NW.js и использовать браузер исключительно на всех платформах. Это упрощает разработку и устраняет необходимость связывать движок браузера с приложением.
Выводы
Construct активно использует три метода выбора showOpenFilePicker() , showSaveFilePicker() и showOpenDirectoryPicker() соответственно для своих пользователей, которые научились полагаться на этот способ работы с Construct. В качестве дополнительного преимущества Construct также использует File Handling API , который позволяет Construct 3 регистрировать себя как (по умолчанию) обработчик файлов .c3p . Это означает, что пользователь может дважды щелкнуть или щелкнуть правой кнопкой мыши и открыть с помощью Construct 3 свои игровые файлы прямо из проводника файлов своей операционной системы. Полностью делая ставку на Интернет, Construct использует множество других современных API браузеров, таких как WebGL, Web Audio, Web Workers, WebAssembly, WebRTC для многопользовательских игр, Local Font Access, WebCodecs для своего нового продукта анимации и даже больше. Их целью всегда было в полной мере использовать возможности веб-платформы и показать, как на ее основе можно создавать великолепные продукты, поэтому обязательно попробуйте их пошаговую инструкцию и создайте свои собственные игры.