La API de File System Access permite operaciones de lectura, escritura y administración de archivos. Aprende cómo en Construcción 3 se usa esta API.
Introducción
(Este artículo también está disponible en forma de video).
Construct 3 es un editor de juegos desarrollado por los hermanos Thomas y Ashley Gullen. Para la tercera iteración del editor de juegos, los dos “[bet] on the browser being the new OS system” después de compilar para Windows y NW.js con anterioridad. Puedes dar una impresión de algunos juegos desarrollados con el editor si exploras su exhibición o realizas la visita guiada. Gracias a los superpoderes de la Web, también puedes hacer clic en cualquiera de los ejemplos"Inspírate" y comenzar a editar de inmediato.
La API de File System Access en la construcción 3
Construct ofrece la opción de guardar en archivos locales con la API de File System Access, así como guardar en la nube (Google Drive, OneDrive y Dropbox) y descargar una copia del archivo del proyecto. Las estadísticas que recopilaron los desarrolladores de Construct muestran que el 65% de los elementos guardados se realizan con la API de File System Access, lo que demuestra que es lo que la mayoría de los clientes quieren usar.
Para guardar, en el siguiente fragmento, se muestra el código de producción original para obtener un FileSystemFileHandle del método showSaveFilePicker(), que luego sirve para guardar los datos reales. La construcción usa el parámetro de opciones id. Se puede especificar el campo id para sugerir el directorio en el que se abrirá el selector de archivos. Cuando se especifica un id, el navegador puede recordar directorios diferentes para distintos IDs, lo que sirve para iniciar el diálogo de manera coherente en el mismo directorio según el ID. Por ejemplo, los archivos de niveles pueden abrirse en Documents/levels/, mientras que los archivos de texturas pueden abrirse en Images/textures/. El parámetro types es un array de tipos de archivos compatibles con un elemento visual de usuario localizado description y un objeto accept que le indica al sistema operativo que, inicialmente, solo acepte archivos .c3p con el tipo de 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;
}
El equipo de Construcción descubrió que trabajar con archivos en el sistema de archivos del usuario es muy intuitivo. Funciona de manera similar a las apps de escritorio tradicionales y se integra de forma conveniente con otro software. Por ejemplo, un software de copia de seguridad que puede realizar copias de seguridad de los archivos de los usuarios o para enviar fácilmente trabajo a otros lugares o editar archivos con herramientas externas. También usan la API de File System Access para diversos casos de uso, como seleccionar una carpeta de copia de seguridad o importar recursos como animaciones.
Cómo trabajar con archivos y carpetas grandes
Algunos de los clientes de Construct trabajan con proyectos muy grandes, de cientos de megabytes. Guardar una gran cantidad de trabajo en un solo archivo es terriblemente lento, mucho menos subirlo a un servicio en la nube. La API de File System Access permite a los power users trabajar con una carpeta local con todos sus elementos en archivos separados. Esto permite guardarlos muy rápido, ya que solo se deben actualizar los archivos modificados.
Continúa desde donde te quedaste
Tanto los controladores de archivos como los de directorios pueden serializarse en IndexedDB, lo que permite que Construct proporcione una lista de proyectos recientes que se conserve en todas las sesiones, de modo que los usuarios puedan volver a acceder al mismo archivo o carpeta, lo que es una gran conveniencia. De hecho, alrededor del 30% de todos los proyectos abiertos en Construct se abren de esta manera. En la siguiente captura de pantalla, se muestran dos proyectos recientes, tetris.c3p y columns.c3p, y, en la ventana de Herramientas para desarrolladores, los objetos FileSystemFileHandle correspondientes serializados en una tabla IndexedDB.
Integración de arrastrar y soltar
La API de File System Access también se integra con la API de arrastrar y soltar, por lo que el usuario puede arrastrar y soltar archivos .c3p en la aplicación. Luego, la construcción puede, a través del método getAsFileSystemHandle() en el objeto DataTransferItem, obtener un FileSystemFileHandle, lo que significa que los archivos abiertos de esta manera se pueden editar y guardar de inmediato, sin tener que pasar por un diálogo para guardar archivos por separado.
Compilación de NW.js retirada
Antes, el equipo tenía una compilación NW.js de Construct que necesitaba mantenimiento y actualización por separado para acceder a los archivos locales. Después de que Chromium agregara compatibilidad con la API de File System Access en la versión 84, los desarrolladores de Construct implementaron la API en 2020 y, como producto secundario, pudieron retirar la compilación de NW.js y usar el navegador exclusivamente en todas las plataformas. Esto simplifica el desarrollo y evita la necesidad de empaquetar el motor del navegador con la app.
Conclusiones
Construct hace un uso intensivo de los tres métodos de selección showOpenFilePicker(), showSaveFilePicker() y showOpenDirectoryPicker(), respectivamente, en beneficio de los usuarios que aprendieron a depender de esta forma de trabajar con Construct. Como beneficio adicional, Construct también usa la API de File Handling, que permite que Construct 3 se registre como un controlador de archivos (predeterminado) de archivos .c3p. Esto significa que el usuario puede hacer doble clic o hacer clic con el botón derecho y abrir con Construir 3 los archivos del juego directamente desde el explorador de archivos de su sistema operativo. Apostando por completo a la Web, Construct usa muchas otras APIs modernas de navegadores, como WebGL, Web Audio, Web Workers, WebAssembly, WebRTC para juegos multijugador, Local Font Access, WebCodecs para su nuevo producto de animación y mucho más. Su objetivo siempre ha sido aprovechar al máximo la plataforma web y mostrar cómo crear excelentes productos sobre ella, así que asegúrate de probar su visita guiada y crear tus propios juegos.