Jak edytor gier Construct 3 korzysta z interfejsu File System Access API, aby umożliwić użytkownikom zapisywanie gier

Interfejs File System Access API umożliwia odczyt i zapis oraz zarządzanie plikami. Dowiedz się, jak Construct 3 wykorzystuje ten interfejs API.

Wstęp

(Ten artykuł jest również dostępny w formie filmu).

Construct 3 to edytor gier stworzony przez braci Thomas i Ashley Gullen. W obecnej trzeciej odsłonie edytora gier 2 w pełni „[bet] w przeglądarce to nowy system operacyjny” po skompilowaniu kodu dla systemu Windows i NW.js. Aby dowiedzieć się, jak działają niektóre gry stworzone we współpracy z edytorem, możesz przejrzeć ich prezentację lub skorzystać z prezentacji funkcji. Dzięki potęgom internetu możesz po prostu kliknąć dowolny z przykładów inspiracji i natychmiast rozpocząć edycję.

Aplikacja Construct 3 przedstawiająca użytkownika edytującego jeden z projektów początkowych.

Interfejs File System Access API w Construct 3

Construct umożliwia zapisywanie plików w plikach lokalnych za pomocą interfejsu File System Access API, a także funkcję zapisywania w chmurze (Dysk Google, OneDrive, Dropbox) i pobranie kopii pliku projektu. Ze statystyk zebranych przez programistów Construct wynika, że 65% zapisów jest zapisywanych za pomocą interfejsu File System Access API, co pokazuje, że większość klientów tego używa.

Na potrzeby zapisania ten fragment przedstawia oryginalny kod produkcyjny uzyskanie parametru FileSystemFileHandle z metody showSaveFilePicker(), który służy później do zapisywania rzeczywistych danych. Konstrukcja korzysta z parametru opcji id. Pole id można określić w sposób sugerujący katalog, w którym otworzy się selektor plików. Dzięki określeniu id przeglądarka może zapamiętać różne katalogi dla różnych identyfikatorów, co powoduje spójne rozpoczęcie okna w tym samym katalogu w zależności od identyfikatora. Na przykład pliki poziomów mogą otwierać się w programie Documents/levels/, a pliki tekstur – w Images/textures/. Parametr types to tablica obsługiwanych typów plików ze zlokalizowanym tagiem user-Visual description oraz obiektem accept, który informuje system operacyjny, aby początkowo akceptował tylko pliki .c3p z typem 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;
}

Zdaniem zespołu Construct praca z plikami w systemie plików użytkownika jest bardzo intuicyjna. Działa podobnie do tradycyjnych aplikacji komputerowych i wygodnie integruje się z innym oprogramowaniem. Może to być na przykład oprogramowanie do tworzenia kopii zapasowych plików użytkowników, łatwego wysyłania danych do innych miejsc lub edytowania plików przy użyciu narzędzi zewnętrznych. Korzystają one też z interfejsu File System Access API do różnych innych zastosowań, takich jak wybór folderu kopii zapasowej lub importowanie zasobów, takich jak animacje.

Praca z dużymi plikami i folderami

Niektórzy z klientów firmy Construct zajmują się bardzo dużymi projektami, których rozmiar mierzą setki megabajtów. Zapisywanie tak dużej ilości pracy w jednym pliku jest niewygodnie powolne, zwłaszcza że przesyłanie go do usługi w chmurze. Interfejs File System Access API pozwala doświadczonym użytkownikom korzystać z lokalnego folderu, w którym wszystkie zasoby znajdują się w oddzielnych plikach. Umożliwia to bardzo szybkie zapisywanie, ponieważ tylko zmienione pliki muszą zostać zaktualizowane.

Kontynuuj od miejsca, w którym przerwiesz

Zarówno uchwyty pliku, jak i katalogu mogą być zserializowane w IndexedDB, co pozwala aplikacji Construct udostępniać listę ostatnich projektów, która jest trwała w wielu sesjach, dzięki czemu użytkownicy mogą ponownie korzystać z tego samego pliku lub folderu, co jest bardzo wygodne dla użytkownika. Około 30% projektów otwieranych w Construct jest otwieranych w ten sposób. Poniższy zrzut ekranu przedstawia 2 ostatnie projekty, tetris.c3p i columns.c3p, a w oknie Narzędzi deweloperskich odpowiednie obiekty FileSystemFileHandle zserializowane w tabeli IndexedDB.

Strona startowa Construct 3 z 2 ostatnimi projektami – tetris.c3p i column.c3p. Na dole Narzędzia deweloperskie z 2 odpowiednimi obiektami FileSystemFileHandle zserializowanymi do IndexedDB.

Integracja metodą „przeciągnij i upuść”

Interfejs File System Access API jest też integrowany z interfejsem API przeciągania i upuszczania, dzięki czemu użytkownik może przeciągać i upuszczać pliki .c3p do aplikacji. Konstrukcja może następnie za pomocą metody getAsFileSystemHandle() w obiekcie DataTransferItem uzyskać FileSystemFileHandle, co oznacza, że otwarte w ten sposób pliki można od razu edytować i zapisać bez konieczności używania osobnego okna dialogowego zapisywania plików.

Wycofana kompilacja NW.js

Wcześniej zespół miał kompilację NW.js obiektu Construct, która wymagała osobnego zarządzania i aktualizacji, aby uzyskać dostęp do plików lokalnych. Po dodaniu w Chromium obsługi interfejsu File System Access API w wersji 84 deweloperzy Construct wprowadzili ten interfejs w 2020 roku. Jako produkt uboczny mogli wycofać kompilację NW.js i korzystać z przeglądarki wyłącznie na wszystkich platformach. Upraszcza to programowanie i unikniesz konieczności łączenia silnika przeglądarki z aplikacją.

Podsumowanie

Construct intensywnie korzysta z 3 metod selektora showOpenFilePicker(), showSaveFilePicker() i showOpenDirectoryPicker(), aby zapewnić korzyści użytkownikom, którzy nauczyli się korzystać z tego sposobu pracy z Construct. Dodatkową zaletą Construct jest korzystanie z File handling API, który pozwala Construct 3 zarejestrować się jako (domyślny) moduł obsługi plików .c3p. Oznacza to, że użytkownik może kliknąć dwukrotnie plik gry lub kliknąć go prawym przyciskiem myszy i otworzyć w Construct 3 bezpośrednio z poziomu eksploratora plików systemu operacyjnego. Construct wykorzystuje wiele nowoczesnych interfejsów API przeglądarek, takich jak WebGL, Web Audio, Web Workers, WebAssembly, WebRTC do gier wieloosobowych, Local Font Access, WebCodecs w swoim nowym produkcie do animacji i jeszcze więcej. Celem firmy zawsze było pełne wykorzystanie platformy internetowej i pokazanie, jak można na niej stworzyć świetne produkty. Dlatego zachęcamy do wypróbowania funkcji przewodnika i tworzenia własnych gier.