La API de File System Access permite funciones de lectura, escritura y administración de archivos. Obtén información sobre cómo Construct 3 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 actual de su editor de juegos, los dos "[apuestan] a que el navegador sea el nuevo sistema operativo" después de compilar para Windows y NW.js. Para obtener una impresión de algunos juegos desarrollados con el editor, explora su muestra o realiza 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 Construct 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 las operaciones de guardado se realizan con la API de acceso al sistema de archivos, lo que demuestra que es lo que la mayoría de los clientes quieren usar.
Para guardar, el siguiente fragmento muestra el código de producción original para obtener un FileSystemFileHandle del método showSaveFilePicker(), que luego sirve para guardar los datos reales. Construct 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 se especifica un id, el navegador puede recordar diferentes directorios para diferentes IDs, lo que sirve para iniciar el diálogo de forma coherente en el mismo directorio según el ID. Por ejemplo, los archivos de nivel se pueden abrir en Documents/levels/, mientras que los archivos de textura se pueden abrir 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 Construct descubrió que trabajar con archivos en el sistema de archivos del usuario es muy intuitivo. Funciona de manera similar a las apps tradicionales para computadoras de escritorio y se integra de forma conveniente con otro software. Por ejemplo, software de copia de seguridad que puede crear copias de seguridad de los archivos de los usuarios, enviar trabajo fácilmente a otros lugares o editar archivos con herramientas externas. También usan la API de File System Access para varios 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 muy lento, y mucho menos subirlo a un servicio en la nube. La API de File System Access permite que los usuarios avanzados trabajen con una carpeta local con todos sus recursos en archivos separados. Esto permite guardar archivos muy rápido, ya que solo se deben actualizar los archivos modificados.
Continúa desde donde te quedaste
Los controladores de archivos y 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 volver a acceder al mismo archivo o carpeta, lo que es muy conveniente para el usuario. 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, mediante el método getAsFileSystemHandle() en el objeto DataTransferItem, Construct puede 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 de archivos independiente.
Compilación de NW.js retirada
Anteriormente, el equipo tenía una compilación de NW.js de Construct que debía mantenerse y actualizarse 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 agrupar el motor del navegador con la app.
Conclusiones
Construct usa mucho los tres métodos de selector showOpenFilePicker(), showSaveFilePicker() y showOpenDirectoryPicker(), respectivamente, para beneficiar a los usuarios que aprendieron a depender de esta forma de trabajar con Construct. Como beneficio adicional, Construct también usa la API de Control de archivos, 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 Construct 3 sus archivos de juego directamente desde el explorador de archivos de su sistema operativo. Como apuesta por completo a la Web, Construct usa muchas otras APIs de navegador modernas, 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 se pueden crear productos increíbles en ella, así que asegúrate de probar su visita guiada y crear tus propios juegos.