Как редактор игр Construct 3 использует API доступа к файловой системе, чтобы пользователи могли сохранять свои игры

API доступа к файловой системе обеспечивает возможности чтения, записи и управления файлами. Узнайте, как Construct 3 использует этот API.

Thomas Steiner

Ashley Gullen

Введение

(Эта статья также доступна в виде видео.)

Construct 3 — игровой редактор, разработанный братьями Томасом и Эшли Галленами . Что касается нынешней третьей версии их игрового редактора, то обе они полностью «[делают] ставку на то, что браузер станет новой операционной системой» после предыдущей сборки для Windows и NW.js. Получить представление о некоторых играх, разработанных с помощью редактора, можно, изучив его витрину или пройдя экскурсию . Благодаря сверхвозможностям Интернета вы также можете просто перейти к любому из примеров «Вдохновляйтесь» и немедленно начать редактирование.

API доступа к файловой системе в Construct 3

Construct предоставляет возможность сохранения в локальные файлы с помощью API доступа к файловой системе , а также сохранения в облаке (Google Drive, OneDrive, Dropbox) и загрузки копии файла проекта. Статистика, собранная разработчиками Construct, показывает, что 65% сохранений выполняются с помощью API доступа к файловой системе, что показывает, что большинство клиентов хотят его использовать.

Для сохранения в следующем фрагменте показан исходный рабочий код для получения FileSystemFileHandle из метода showSaveFilePicker() , который затем служит для сохранения фактических данных. Construct использует параметр id options. В поле 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 доступа к файловой системе для различных других случаев использования, таких как выбор папки резервного копирования или импорт ресурсов, таких как анимация.

Работа с большими файлами и папками

Некоторые клиенты Construct работают с очень большими проектами размером в сотни мегабайт. Сохранение такого большого объема работы в один файл происходит крайне медленно, не говоря уже о загрузке его в облачный сервис. API доступа к файловой системе позволяет опытным пользователям работать с локальной папкой, где все ресурсы хранятся в отдельных файлах. Это позволяет очень быстро сохранять файлы, поскольку обновлять нужно только измененные файлы.

Продолжить с того места, где вы остановились

Дескрипторы файлов и каталогов могут быть сериализованы в IndexedDB, что позволяет Construct предоставлять список последних проектов, который сохраняется между сеансами, поэтому пользователи могут снова получить доступ к тому же файлу или папке, что очень удобно для пользователя. Фактически около 30% всех проектов, открытых в Construct, открываются именно таким образом. На следующем снимке экрана показаны два недавних проекта: tetris.c3p и columns.c3p , а в окне DevTools — соответствующие объекты FileSystemFileHandle , сериализованные в таблице IndexedDB.

Перетащите интеграцию

API доступа к файловой системе также интегрируется с API перетаскивания , поэтому пользователь может перетаскивать файлы .c3p в приложение. Затем Construct может с помощью метода getAsFileSystemHandle() объекта DataTransferItem получить FileSystemFileHandle , что означает, что файлы, открытые таким образом, можно редактировать и сохранять немедленно, без необходимости проходить через отдельный диалог сохранения файла.

Устаревшая сборка NW.js

Ранее у команды была сборка Construct NW.js , которую нужно было поддерживать и обновлять отдельно для доступа к локальным файлам. После того, как Chromium добавил поддержку API доступа к файловой системе в версии 84, разработчики Construct реализовали этот API в 2020 году и в качестве побочного продукта смогли отказаться от сборки NW.js и использовать браузер исключительно на всех платформах. Это упрощает разработку и позволяет избежать необходимости связывать движок браузера с приложением.

Выводы

Construct активно использует три метода выбора showOpenFilePicker() , showSaveFilePicker() и showOpenDirectoryPicker() соответственно в интересах своих пользователей, которые научились зависеть от этого способа работы с Construct. В качестве дополнительного преимущества Construct также использует API обработки файлов , который позволяет Construct 3 регистрироваться в качестве обработчика файлов (по умолчанию) для файлов .c3p . Это означает, что пользователь может дважды щелкнуть или щелкнуть правой кнопкой мыши и открыть с помощью Construct 3 свои игровые файлы прямо из проводника своей операционной системы. Полностью делая ставку на Интернет, Construct использует множество других современных API-интерфейсов браузера, таких как WebGL, Web Audio, Web Workers, WebAssembly, WebRTC для многопользовательских игр, Local Font Access, WebCodecs для своего нового анимационного продукта и даже больше. Их целью всегда было в полной мере использовать веб-платформу и показать, как на ее основе можно создавать отличные продукты, поэтому обязательно попробуйте их экскурсию и создайте свои собственные игры.