Up to date
This page is up to date for Godot 4.2
.
If you still find outdated information, please open an issue.
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.
HTML5 export allows publishing games made in Godot Engine to the browser. This requires support for WebAssembly, WebGL and SharedArrayBuffer in the user's browser.
Atenção
Projects written in C# using Godot 4 currently cannot be exported to the web. To use C# on web platforms, use Godot 3 instead.
Dica
Use the browser-integrated developer console, usually opened with F12 (Cmd + Option + I on macOS), to view debug information like JavaScript, engine, and WebGL errors.
Atenção
Godot 4's HTML5 exports currently cannot run on macOS and iOS due to upstream bugs with SharedArrayBuffer and WebGL 2.0. We recommend using macOS and iOS native export functionality instead, as it will also result in better performance.
Godot 3's HTML5 exports are more compatible with various browsers in general, especially when using the GLES2 rendering backend (which only requires WebGL 1.0).
Versão WebGL¶
Godot 4.0 and later can only target WebGL 2.0 (using the Compatibility rendering method). There is no stable way to run Vulkan applications on the web yet.
See Can I use WebGL 2.0 for a list of browser versions supporting WebGL 2.0. Note that Safari has several issues with WebGL 2.0 support that other browsers don't have, so we recommend using a Chromium-based browser or Firefox if possible.
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.
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.
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).
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.
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¶
Some browsers restrict autoplay for audio on websites. The easiest way around this limitation is to request the player to click, tap or press a key/button to enable audio, for instance when displaying a splash screen at the start of your game.
Ver também
O Google oferece informações adicionais sobre suas Políticas de autoplay (Web Audio autoplay policies).
Apple's Safari team also posted additional information about their Auto-Play Policy Changes for macOS.
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.
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.
Aviso
To ensure low audio latency and the ability to use Thread in web exports, Godot 4 web exports always use SharedArrayBuffer. This requires a secure context, while also requiring the following CORS headers to be set when serving the files:
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
If you don't control the web server or are unable to add response headers, use coi-serviceworker as a workaround.
If the client doesn't receive the required response headers, the project will not run.
The generated .html
file can be used as DirectoryIndex
in Apache
servers and can be renamed to e.g. index.html
at any time. Its name is
never depended on by default.
The HTML page draws the game at maximum size within the browser window.
This way, it can be inserted into an <iframe>
with the game's size, as is
common on most web game hosting sites.
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.
Aviso
Entregar o módulo WebAssembly (.wasm
) com um tipo MIME diferente de :mimetype: application/wasm pode prevenir algumas otimizações de inicialização.
Delivering the files with server-side compression is recommended especially for
the .pck
and .wasm
files, which are usually large in size. The
WebAssembly module compresses particularly well, down to around a quarter of its
original size with gzip compression. Consider using Brotli precompression if
supported on your web server for further file size savings.
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)
Dica
The Godot repository includes a Python script to host a local web server. This script is intended for testing the web editor, but it can also be used to test exported projects.
Save the linked script to a file called serve.py
, move this file to the
folder containing the exported project's index.html
, then run the
following command in a command prompt within the same folder:
# You may need to replace `python` with `python3` on some platforms.
python serve.py --root .
On Windows, you can open a command prompt in the current folder by holding Shift and right-clicking on empty space in Windows Explorer, then choosing Open PowerShell window here.
This will serve the contents of the current folder and open the default web browser automatically.
Note that for production use cases, this Python-based web server should not be used. Instead, you should use an established web server such as Apache or nginx.
Chamando JavaScript a partir do script¶
In web builds, the JavaScriptBridge
singleton is implemented. It offers a single
method called eval
that works similarly to the JavaScript function of the
same name. It takes a string as an argument and executes it as JavaScript code.
This allows interacting with the browser in ways not possible with script
languages integrated into Godot.
func my_func():
JavaScriptBridge.eval("alert('Calling JavaScript per GDScript!');")
private void MyFunc()
{
JavaScriptBridge.Eval("alert('Calling JavaScript per C#!');")
}
O valor da última instrução do JavaScript é convertido para um valor GDScript e retornado por eval()
sob certas circunstâncias:
JavaScript
number
is returned as floatJavaScript
boolean
is returned as boolJavaScript
string
is returned as StringJavaScript
ArrayBuffer
,TypedArray
andDataView
are returned as PackedByteArray
func my_func2():
var js_return = JavaScriptBridge.eval("var myNumber = 1; myNumber + 2;")
print(js_return) # prints '3.0'
private void MyFunc2()
{
var jsReturn = JavaScriptBridge.Eval("var myNumber = 1; myNumber + 2;");
GD.Print(jsReturn); // prints '3.0'
}
Qualquer outro valor no JavaScript é retornado como null
.
HTML5 export templates may be built without
support for the singleton to improve security. With such templates, and on
platforms other than HTML5, calling JavaScriptBridge.eval
will also return
null
. The availability of the singleton can be checked with the
web
feature tag:
func my_func3():
if OS.has_feature('web'):
JavaScriptBridge.eval("""
console.log('The JavaScriptBridge singleton is available')
""")
else:
print("The JavaScriptBridge singleton is NOT available")
private void MyFunc3()
{
if (OS.HasFeature("web"))
{
JavaScriptBridge.Eval("console.log('The JavaScriptBridge singleton is available')");
}
else
{
GD.Print("The JavaScriptBridge 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.
The eval
method also accepts a second, optional Boolean argument, which
specifies whether to execute the code in the global execution context,
defaulting to false
to prevent polluting the global namespace:
func my_func4():
# execute in global execution context,
# thus adding a new JavaScript global variable `SomeGlobal`
JavaScriptBridge.eval("var SomeGlobal = {};", true)
private void MyFunc4()
{
// execute in global execution context,
// thus adding a new JavaScript global variable `SomeGlobal`
JavaScriptBridge.Eval("var SomeGlobal = {};", true);
}
Variáveis de ambiente¶
You can use the following environment variables to set export options outside of the editor. During the export process, these override the values that you set in the export menu.
Export option |
Environment variable |
---|---|
Encryption / Encryption Key |
|