Exportando para a Web¶

Ver também

Esta página descreve como exportar um projeto Godot para HTML5. Se você deseja compilar o editor ou exportar binários de modelo do código-fonte, leia Compilando para Web.

A exportação HTML5 permite que jogos feitos com Godot Engine sejam publicados para navegadores. É necessário que o navegador do usuário tenha suporte para WebAssembly e WebGL .

Importante

Use o console de desenvolvedor integrado no navegador, geralmente aberto com F12, para ver informações de debug do JavaScript, do motor e erros de WebGL.

Atenção

Existem bugs significativos ao executar projetos HTML5 no iOS (independentemente do navegador). Em vez disso nós recomendamos usar iOS' native export functionality, pois também resultará em melhor desempenho.

Versão WebGL¶

Dependendo de sua escolha de renderizador, Godot pode exportar como WebGL 1.0 (GLES2) ou WebGL 2.0 (GLES3).

WebGL 1.0 é a opção recomendada se você deseja que seu projeto seja suportado em todos os navegadores com o melhor desempenho.

O renderizador GLES3 da Godot visa dispositivos de ponta, e o desempenho usando WebGL 2.0 pode ser inferior. Alguns recursos também não são suportados no WebGL 2.0 em específico.

Além disso, embora a maioria dos navegadores suporta WebGL 2.0, esse ainda não é o caso do Safari. O suporte WebGL 2.0 está chegando no Safari 15 para macOS e ainda não está disponível para nenhum navegador de iOS (todos baseados em WebKit como o Safari). Consulte Posso usar WebGL 2.0 para mais detalhes.

Opções de exportação¶

Se uma exportação executável web está disponível, um botão aparecerá entre os botões Pausar cena e Jogar Cena editada no editor para abrir o jogo rapidamente no seu navegador padrão para teste.

Você pode escolher o Tipo de Exportação para selecionar quais recursos estarão disponíveis:

Normal: é o mais compatível entre navegadores, mas não oferece suporte a threads, nem GDNative.
Threads: exigirá que o navegador suporte SharedArrayBuffer. Consulte Posso usar SharedArrayBuffer para obter detalhes.
GDNative: ativa o suporte GDNative, mas torna o binário maior e mais lento para carregar.

If you plan to use VRAM compression make sure that Vram Texture Compression is enabled for the targeted platforms (enabling both For Desktop and For Mobile will result in a bigger, but more compatible export).

Se um caminho para o arquivo Página HTML personalizado for especificado, ele será utilizado ao invés da página HTML padrão. Veja Personalizar página HTML para exportação Web.

Incluído no Cabeçalho é inserido no elemento <head> da página HTML gerada. Isso permite, por exemplo, carregar webfonts e APIs JavaScript, incluindo CSS, ou executar código JavaScript.

Importante

Each project must generate their own HTML file. On export, several text placeholders are replaced in the generated HTML file specifically for the given export options. Any direct modifications to that HTML file will be lost in future exports. To customize the generated file, use the Custom HTML shell option.

Aviso

Export types other than Regular are not yet supported by the C# version.

Limitações¶

Por motivos de segurança e privacidade, muitas funcionalidades que funcionam sem problemas nas plataformas nativas são mais complicadas na plataforma web. A seguir há uma lista das limitações que se deve estar ciente quando for portar um game do Godot para a web.

Importante

Browser vendors are making more and more functionalities only available in secure contexts, this means that such features are only be available if the web page is served via a secure HTTPS connection (localhost is usually exempt from such requirement).

Dica

Cheque a lista aberta de problemas do HTML no GitHub para ver se a funcionalidade que você está interessado tem algum problema. Se não, abra uma requisição e comunique o seu interesse.

Usar cookies para dados persistentes¶

Usuários precisam permitir cookies (especificamente IndexedDB) se a persistência do sistema de arquivos user://``é desejada. Quando um jogo é exibido em um ``iframe, cookies de terceiros também precisam estar ativados. Navegação anônima/privada também impede persistência.

O método OS.is_userfs_persistent() pode ser utilizado para checar se o sistema de arquivos user:// é persistente, mas pode dar falso positivo em alguns casos.

Processamento em segundo plano¶

The project will be paused by the browser when the tab is no longer the active tab in the user's browser. This means functions such as _process() and _physics_process() will no longer run until the tab is made active again by the user (by switching back to the tab). This can cause networked games to disconnect if the user switches tabs for a long duration.

This limitation does not apply to unfocused browser windows. Therefore, on the user's side, this can be worked around by running the project in a separate window instead of a separate tab.

Threads¶

As mentioned above multi-threading is only available if the appropriate Export Type is set and support for it across browsers is still limited.

Aviso

Requires a secure context. Browsers also require that the web page is served with specific cross-origin isolation headers.

GDNative¶

As mentioned above GDNative is only available if the appropriate Export Type is set.

The export will also copy the required GDNative .wasm files to the output folder (and must be uploaded to your server along with your game).

Tecla cheia e captura do mouse¶

Navegadores não permitem entrar em tela cheia livremente. O mesmo vale para capturar o cursor. Para isso, essas ações devem ocorrer como uma resposta para um evento de input no JavaScript. No Godot, isso significa entrar em tela cheia a partir de um evento de input como _input ou _unhandled_input. Acessar o singleton Input não é suficiente, o evento relevante precisa estar ativo no momento.

Pelo mesmo motivo, a opção de projeto de tela cheia não funciona a não ser que o motor seja iniciado a partir de um manipulador de evento de entrada válido. Isso requer uma personalização da página HTML.

Áudio¶

O Chrome restringe como os sites reproduzem áudio. Pode ser necessário que o jogador clique, toque ou pressione uma tecla para ativar o áudio.

Ver também

O Google oferece informações adicionais sobre suas Políticas de autoplay (Web Audio autoplay policies).

Aviso

Access to microphone requires a secure context.

Trabalho em rede¶

Low level networking is not implemented due to lacking support in browsers.

Currently, only HTTP client, HTTP requests, WebSocket (client) and WebRTC are supported.

The HTTP classes also have several restrictions on the HTML5 platform:

Acessar ou modificar o``StreamPeer`` não é possível

O modo Threaded/Blocking não está disponível

Não pode progredir mais de uma vez por quadro, então a sondagem em loop irá congelar

Sem respostas fragmentadas

A verificação de host não pode ser desativada

Sujeito à política de mesma origem

Área de transferência¶

Clipboard synchronization between engine and the operating system requires a browser supporting the Clipboard API, additionally, due to the API asynchronous nature might not be reliable when accessed from GDScript.

Aviso

Requer um secure context.

Controles de jogo (Gamepads)¶

Gamepads will not be detected until one of their button is pressed. Gamepads might have the wrong mapping depending on the browser/OS/gamepad combination, sadly the Gamepad API does not provide a reliable way to detect the gamepad information necessary to remap them based on model/vendor/OS due to privacy considerations.

Aviso

Requer um secure context.

O splash de inicialização não é exibido¶

A página HTML padrão não exibe o splash de inicialização durante o carregamento. No entanto, a imagem é exportada como um arquivo PNG, para que páginas HTML personalizadas possam exibi-la.

Limitações de linguagem de shader¶

Ao exportar um projeto GLES2 para HTML5, o WebGL 1.0 será usado. O WebGL 1.0 não oferece suporte a loops dinâmicos, portanto, os shaders que os usam não funcionam lá.

Servindo os arquivos¶

Exportar para a web gera muitos arquivos que serão servidos a partir de um servidor web, incluindo uma página HTML padrão para apresentação. Um arquivo HTML personalizado pode ser usado, veja Personalizar página HTML para exportação Web.

O arquivo .html gerado pode ser usado como DirectoryIndex em servidores Apache e podem ser renomeados para, por exemplo, index.html a qualquer momento, ele não depende do nome por padrão.

A página HTML desenha o jogo no tamanho máximo dentro da janela do navegador. Desta forma, ele pode ser inserido em um <iframe> com o tamanho do jogo, como é comum na maioria dos sites de hospedagem de jogos na web.

Os outros arquivos exportados são servidos como estão, próximos do arquivo .html, com seus nomes inalterados. O arquivo .wasm é um módulo binário WebAssembly que implementa a engine. O arquivo .pck é o pacote principal do Godot que contém seu jogo. O arquivo .js contém códigos de inicialização e é utilizado pelo arquivo .html para acessar a engine. O arquivo .png contém a imagem inicial de inicialização. Não é utilizado na página HTML padrão, mas é incluído para páginas HTML personalizadas.

O arquivo .pck é binário, normalmente entregue com o tipo MIME application/octet-stream. O arquivo .wasm é entregue como application/wasm.

Cuidado

Entregar o módulo WebAssembly (.wasm) com um tipo MIME diferente de :mimetype: application/wasm pode prevenir algumas otimizações de inicialização.

Hospedar os arquivos com compressão no lado do servidor é recomendada principalmente pelos arquivos .pck e .wasm, que geralmente são arquivos grandes. O módulo WebAssembly comprime muito bem, até cerca de um quarto do seu tamanho original com compressão gzip.

Hosts that provide on-the-fly compression: GitHub Pages (gzip)

Hosts that don't provide on-the-fly compression: itch.io, GitLab Pages (supports manual gzip precompression)

Chamando JavaScript a partir do script¶

Em compilações web, o singleton JavaScript é implementado. Ele oferece um único método chamado eval que funciona de forma semelhante à função JavaScript de mesmo nome. Ele pega uma string como argumento e a executa como código JavaScript. Isso permite interagir com o navegador de maneiras não possíveis com linguagens de script integradas ao Godot.

func my_func():
    JavaScript.eval("alert('Calling JavaScript per GDScript!');")

O valor da última instrução do JavaScript é convertido para um valor GDScript e retornado por eval() sob certas circunstâncias:

Um número do JavaScript é retornado como GDScript float

O valor booleano do JavaScript é retornado como GDScript bool

O valor do tipo string no JavaScript é retornado como GDScript String

No JavaScript os valores do tipo ArrayBuffer, TypedArray e DataView são retornados como GDScript PoolByteArray

func my_func2():
    var js_return = JavaScript.eval("var myNumber = 1; myNumber + 2;")
    print(js_return) # prints '3.0'

Qualquer outro valor no JavaScript é retornado como null.

Os modelos HTML5 de exportação podem ser built sem suporte para o singleton para melhorar a segurança. Com tais templates, e em outras plataformas além do HTML5, chamando JavaScript.eval também retornará null. A disponibilidade do singleton pode ser verificada com a tag JavaScript feature tag:

func my_func3():
    if OS.has_feature('JavaScript'):
        JavaScript.eval("""
            console.log('The JavaScript singleton is available')
        """)
    else:
        print("The JavaScript singleton is NOT available")

Dica

As strings de várias linhas do GDScript, cercadas por 3 aspas """ como em ``my_func3()``acima, são úteis para manter o código JavaScript legível.

O método eval também aceita um segundo argumento do tipo Booleano que determina se o código deve ser executado no contexto global, padrão falso para prevenir poluir o namespace global:

func my_func4():
    # execute in global execution context,
    # thus adding a new JavaScript global variable `SomeGlobal`
    JavaScript.eval("var SomeGlobal = {};", true)