La API de File System Access permite las capacidades de lectura, escritura y administración de archivos. Descubre cómo Construct 3 usa esta API.
Introducción
(Este artículo también está disponible en formato de video).
Construct 3 es un editor de juegos desarrollado por los hermanos Thomas y Ashley Gullen. Para la tercera iteración de su editor de juegos, los dos “apostó] por que el navegador sea el nuevo sistema operativo” después de compilar para Windows y NW.js antes. Puedes obtener una impresión de algunos juegos desarrollados con el editor si exploras la exhibición o realizas la visita guiada. Gracias a los superpoderes de la Web, también puedes hacer clic en cualquiera de los ejemplos de"Inspírate" y comenzar a editar inmediatamente.
La API de File System Access en Construct 3
Construir ofrece la opción de guardar en archivos locales con la API de Acceso al sistema de archivos, además de guardar en la nube (Google Drive, OneDrive, Dropbox) y descargar una copia del archivo de 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 desea usar.
Para guardar, en el siguiente fragmento, se muestra el código de producción original a fin de obtener un FileSystemFileHandle del método showSaveFilePicker(), que luego sirve para guardar los datos reales. Construir usa el parámetro de opciones id. Se puede especificar el campo id para sugerir el directorio en el que se abre el selector de archivos. Cuando especificas un id, el navegador puede recordar diferentes directorios para diferentes ID, 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 se pueden abrir en Documents/levels/, mientras que los archivos de texturas se pueden abrir en Images/textures/. El parámetro types es un array de tipos de archivos compatibles con un description visual del usuario localizado 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;
}
Para el equipo de Construct, 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 manera conveniente a otros software. Por ejemplo, un software de copia de seguridad que pueda hacer copias de seguridad de los archivos de los usuarios, enviar fácilmente trabajo a otros lugares o editar archivos con herramientas externas. También utilizan la API de File System Access para muchos otros 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 cantidad tan grande de trabajo en un solo archivo es extremadamente lento, menos aún subirlo a un servicio en la nube. La API de File System Access permite que los power users trabajen en una carpeta local con todos sus recursos en archivos separados. Esto permite un guardado muy rápido, ya que solo se deben actualizar los archivos modificados.
Continúa desde donde te quedaste
Tanto los controladores de archivos como de directorios se pueden serializar en IndexedDB, lo que permite que Construct proporcione una lista de proyectos recientes que se conserva en todas las sesiones, de modo que los usuarios puedan acceder nuevamente al mismo archivo o carpeta, lo que es muy conveniente para el usuario. De hecho, aproximadamente el 30% de todos los proyectos que se abren en Construcción 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, de modo que el usuario pueda 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 de guardado separado.
Compilación de NW.js retirada
Anteriormente, el equipo tenía una compilación de Construct NW.js que requería mantener y actualizar por separado para acceder a los archivos locales. Después de que Chromium agregó compatibilidad con la API de File System Access en la versión 84, los desarrolladores de Construct implementaron la API en 2020 y, como subproducto, pudieron retirar la compilación 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 aplicación.
Conclusiones
Construir usa en gran medida los tres métodos de selección showOpenFilePicker(), showSaveFilePicker() y showOpenDirectoryPicker(), respectivamente, en beneficio de sus 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 los archivos .c3p. Esto significa que el usuario puede hacer doble clic o hacer clic con el botón derecho y abrir los archivos del juego en Construct 3 directamente desde el explorador de archivos de su sistema operativo. Como apuesta por la Web, Construct usa muchas otras APIs de navegador modernas, como WebGL, Web Audio, Web Workers, WebAssembly, WebRTC para juegos multijugador, Acceso a fuentes locales, 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 se pueden crear excelentes productos a partir de ella, así que asegúrate de probar la visita guiada y crear tus propios juegos.