A API File System Access permite recursos de leitura, gravação e gerenciamento de arquivos. Saiba como o Construct 3 usa essa API.
Introdução
Este artigo também está disponível em formato de vídeo.
Construct 3 é um editor de jogos desenvolvido pelos irmãos Thomas e Ashley Gullen. Para a terceira iteração atual do editor de jogos, os dois "[bet] no navegador sendo o novo sistema operacional" depois de criar para Windows e NW.js. Tenha uma impressão de alguns jogos desenvolvidos com o editor explorando o showcase ou fazendo o tour guiado. Graças aos superpoderes da Web, você também pode clicar em qualquer um dos exemplos de"Inspiração" e começar a editar imediatamente.
A API File System Access na construção 3
O Construct oferece a opção de salvar em arquivos locais com a API File System Access, bem como salvar na nuvem (Google Drive, OneDrive, Dropbox) e fazer o download de uma cópia do arquivo do projeto. As estatísticas coletadas pelos desenvolvedores do Construct mostram que 65% das gravações são feitas com a API File System Access, o que demonstra que é o que a maioria dos clientes quer usar.
Para salvar, o snippet a seguir mostra o código de produção original para receber um FileSystemFileHandle do método showSaveFilePicker(), que serve para salvar os dados reais. O construct usa o parâmetro de opções id. O campo id pode ser especificado para sugerir o diretório em que o seletor de arquivos é aberto. Ao especificar um id, o navegador pode lembrar diretórios diferentes para IDs diferentes, o que serve para iniciar a caixa de diálogo de forma consistente no mesmo diretório, dependendo do ID. Por exemplo, os arquivos de nível podem ser abertos em Documents/levels/, enquanto os arquivos de textura podem ser abertos em Images/textures/. O parâmetro types é uma matriz de tipos de arquivos compatíveis com um description visual do usuário localizado e um objeto accept que informa ao sistema operacional que ele deve aceitar inicialmente apenas arquivos .c3p com o tipo 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;
}
A equipe do Construct descobriu que trabalhar com arquivos no sistema de arquivos do usuário é muito intuitivo. Ele funciona de maneira semelhante aos aplicativos para computador tradicionais e se integra convenientemente a outros softwares. Por exemplo, softwares de backup que podem fazer backups dos arquivos dos usuários, enviar trabalhos para outros lugares com facilidade ou editar arquivos com ferramentas externas. Eles também usam a API File System Access para vários outros casos de uso, como selecionar uma pasta de backup ou importar recursos como animações.
Como trabalhar com arquivos e pastas grandes
Alguns dos clientes do Construct trabalham com projetos muito grandes, na casa dos centenas de megabytes. Salvar uma quantidade tão grande de trabalho em um único arquivo é muito lento, sem falar no upload para um serviço de nuvem. A API File System Access permite que usuários avançados trabalhem com uma pasta local com todos os recursos em arquivos separados. Isso permite salvamentos muito rápidos, já que apenas os arquivos alterados precisam ser atualizados.
Continue de onde parou
Os identificadores de arquivos e diretórios podem ser serializados para o IndexedDB, permitindo que o Construct forneça uma lista de projetos recentes que é mantida em todas as sessões, para que os usuários possam acessar o mesmo arquivo ou pasta novamente, o que é uma grande conveniência para o usuário. Na verdade, cerca de 30% de todos os projetos abertos no Construct são abertos dessa forma. A captura de tela a seguir mostra dois projetos recentes, tetris.c3p e columns.c3p, e, na janela do DevTools, os objetos FileSystemFileHandle correspondentes serializados em uma tabela IndexedDB.
Integração de arrastar e soltar
A API File System Access também se integra à API Drag and Drop, para que o usuário possa arrastar e soltar arquivos .c3p no aplicativo. O Construct pode usar o método getAsFileSystemHandle() no objeto DataTransferItem para receber um FileSystemFileHandle, o que significa que os arquivos abertos dessa forma podem ser editados e salvos imediatamente, sem precisar passar por uma caixa de diálogo de salvamento de arquivos separada.
Build do NW.js desativado
Antes, a equipe tinha um build do Construct com NW.js que precisava ser mantido e atualizado separadamente para acessar arquivos locais. Depois que o Chromium adicionou suporte à API File System Access na versão 84, os desenvolvedores do Construct implementaram a API em 2020 e, como subproduto, conseguiram aposentar o build do NW.js e usar o navegador exclusivamente em todas as plataformas. Isso simplifica o desenvolvimento e evita a necessidade de agrupar o mecanismo do navegador com o app.
Conclusões
O Build usa os três métodos do seletor showOpenFilePicker(), showSaveFilePicker() e showOpenDirectoryPicker(), respectivamente, para beneficiar os usuários que aprenderam a depender dessa maneira de trabalhar com o construtor. Como outro benefício, o Construct também usa a API File Handling, que permite que o Construct 3 se registre como um gerenciador de arquivos (padrão) de arquivos .c3p. Isso significa que o usuário pode usar o DoubleClick ou clicar com o botão direito do mouse e abrir com o Build 3 os arquivos do jogo diretamente no explorador de arquivos do sistema operacional. Apostando totalmente na Web, o Build usa muitas outras APIs modernas de navegador, como WebGL, Web Audio, Web Workers, WebAssembly, WebRTC para jogos multiplayer, acesso a fontes locais, WebCodecs para o novo produto de animação e muito mais. O objetivo deles sempre foi usar ao máximo a plataforma da Web e mostrar como é possível criar produtos incríveis com ela. Por isso, tente fazer a visita guiada e crie seus próprios jogos.