A API File System Access tem recursos de leitura, gravação e gerenciamento de arquivos. Saiba como o Construa 3 usa essa API.
Introdução
Este artigo também está disponível na forma de vídeo.
Construct 3 é um editor de jogos desenvolvido pelos irmãos Thomas e Ashley Gullen. Para esta terceira iteração do editor de jogos, os dois "[aposta] no navegador sendo o novo sistema operacional" após a criação para Windows e o NW.js antes. Você pode ter uma impressão dos jogos desenvolvidos com o editor explorando a vitrine ou fazendo o tour guiado. Graças aos superpoderes da Web, você também pode clicar em qualquer um dos exemplos de"Inspire-se" e começar a editar imediatamente.
A API File System Access na versão 3
O Build oferece a opção de salvar em arquivos locais com a API File System Access, 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 Build mostram que 65% das salvamentos são feitas com a API File System Access, que demonstra que a maioria dos clientes quer usar.
Para salvar, o snippet abaixo mostra o código de produção original para receber um FileSystemFileHandle do método showSaveFilePicker(), que serve para salvar os dados reais. O build 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 se lembrar de diferentes diretórios para IDs distintos, o que serve para iniciar a caixa de diálogo de forma consistente no mesmo diretório, dependendo do ID. Por exemplo, arquivos de níveis podem ser abertos em Documents/levels/, enquanto arquivos de textura podem ser abertos em Images/textures/. O parâmetro types é uma matriz de tipos de arquivo com suporte, com um description visual do usuário localizado e um objeto accept, que instrui o sistema operacional a 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 de construção descobriu que trabalhar com arquivos no sistema de arquivos do usuário é muito intuitivo. Ele funciona de forma parecida com os aplicativos de computador tradicionais e se integra convenientemente a outros softwares. Por exemplo, software de backup que possa fazer backups dos arquivos dos usuários, facilitar o envio de trabalho para outros locais 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.
Trabalhar com arquivos e pastas grandes
Alguns dos clientes do Builder trabalham com projetos muito grandes, que chegam a centenas de megabytes. Salvar uma quantidade tão grande de trabalho em um único arquivo é muito lento, que dirá fazer o upload para um serviço em 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 agiliza o salvamento, já que apenas os arquivos alterados precisam ser atualizados.
Continue de onde parou
Os identificadores de arquivos e diretórios podem ser serializados para IndexedDB, permitindo que o CMake forneça uma lista de projetos recentes persistida entre as sessões, para que os usuários possam acessar o mesmo arquivo ou pasta novamente, o que é uma grande conveniência para eles. Na verdade, cerca de 30% de todos os projetos abertos em Construção são abertos dessa forma. A captura de tela abaixo 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. Em seguida, o builder 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 arquivo separada.
Build NW.js desativado
Antes, a equipe tinha um build NW.js de Construção que precisava de manutenção e atualização separadamente para acessar arquivos locais. Depois que o Chromium adicionou suporte à API File System Access na versão 84, os desenvolvedores do Build implementaram a API em 2020 e, como resultado, tiveram que desativar o build 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 aplicativo.
Conclusões
O Build usa bastante os três métodos de seletor showOpenFilePicker(), showSaveFilePicker() e showOpenDirectoryPicker(), respectivamente, para beneficiar os usuários que aprenderam a depender dessa maneira de trabalhar com o Build. Como outro benefício, o Build também usa a API File Handling, que permite que o Construa 3 se registre como um gerenciador de arquivos (padrão) de arquivos .c3p. Isso significa que o usuário pode clicar com o botão direito do mouse ou clicar com o botão direito do mouse e abrir com o Construa com Construir 3 seus arquivos de jogo diretamente do explorador de arquivos de seu sistema operacional. Apostando totalmente na Web, o Builder usa muitas outras APIs modernas de navegadores, como WebGL, Web Audio, Web Workers, WebAssembly, WebRTC para jogos multiplayer, Local Font Access, WebCodecs para seu novo produto de animação e muito mais. O objetivo sempre foi aproveitar ao máximo a plataforma da Web e mostrar como produtos excelentes podem ser criados com ela. Confira o tour guiado e crie seus próprios jogos.