Up to date

This page is up to date for Godot 4.2. If you still find outdated information, please open an issue.

Webのエクスポート

参考

This page describes how to export a Godot project to HTML5. If you're looking to compile editor or export template binaries from source instead, read 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.

注意

Projects written in C# using Godot 4 currently cannot be exported to the web. To use C# on web platforms, use Godot 3 instead.

ちなみに

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.

注意

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).

WebGL version

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.

エクスポートオプション

実行可能なWeb書き出しテンプレートが使用可能な場合は、エディタの [シーンを停止] ボタンと [編集したシーンを再生] ボタンの間にボタンが表示され、既定のブラウザでゲームをすばやく開いてテストできます。

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).

カスタムHTMLシェルファイルへのパスが指定されている場合、デフォルトのHTMLページの代わりにそれが使用されます。Custom HTML page for Web exportを参照してください。

Head Includeは、生成されたHTMLページの <head> 要素に追加されます。これにより、たとえば、WebfontsやサードパーティのJavaScript APIをロードしたり、CSSを組み込んだり、JavaScriptコードを実行したりできます。

重要

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.

制限事項

セキュリティとプライバシーの理由から、ネイティブ プラットフォームで簡単に動作する多くの機能は、Web プラットフォーム上でより複雑になります。GodotゲームをWebに移植する際に注意する必要がある制限事項の一覧を次に示します。

重要

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).

データ永続化のためのクッキーの使用

user:// ファイルシステムの永続性が必要な場合、ユーザーはCookie(特にIndexedDB)を許可する必要があります。 iframe で提供されているゲームを再生する場合は、サードパーティのCookieも有効にする必要があります。Incognito/privateブラウジングモードも永続性を妨げます。

OS.is_userfs_persistent() というメソッドを使うと、user:// ファイルシステムが永続的かどうかをチェックすることができますが、場合によっては誤検出することもあります。

Background processing

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.

フルスクリーンとマウスキャプチャ

ブラウザは、任意に フルスクリーンに入る ことを許可しません。同じことが カーソルのキャプチャ にも当てはまります。代わりに、これらのアクションはJavaScript入力イベントへの応答として発生する必要があります。Godotでは、これは、_ input_unhandled_input などの押された入力イベントコールバック内から全画面表示に入ることを意味します。Input シングルトンを照会するだけでは不十分です。関連する入力イベントは現在アクティブでなければなりません。

同じ理由で、エンジンが有効な入力イベントハンドラ内から起動されない限り、全画面表示のプロジェクト設定は機能しません。これには HTMLページのカスタマイズ が必要です。

オーディオ

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.

参考

Googleは、`Webオーディオの自動再生ポリシー<https://sites.google.com/a/chromium.org/dev/audio-video/autoplay> ` に関する追加情報を提供しています。

Apple's Safari team also posted additional information about their Auto-Play Policy Changes for macOS.

警告

Access to microphone requires a secure context.

ネットワーク

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:

  • StreamPeer へのアクセスおよび変更はできません

  • スレッド/ブロックモードは使用できません

  • フレームごとに複数回進行できないため、ループ内のポーリングはフリーズします

  • チャンク応答なし

  • ホスト検証を無効にできません

  • 同一生成元ポリシーに従います

クリップボード

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.

警告

Requires a secure context.

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.

警告

Requires a secure context.

起動スプラッシュが表示されない

デフォルトのHTMLページは、ロード中に起動スプラッシュを表示しません。ただし、画像はPNGファイルとしてエクスポートされるため、カスタムHTMLページ で表示できます。

ファイルの提供

Web用にエクスポートすると、プレゼンテーション用のデフォルトのHTMLページなど、Webサーバーから提供される複数のファイルが生成されます。 カスタムHTMLファイルを使用できます。Custom HTML page for Web exportを参照して下さい。

警告

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.

エクスポートされた他のファイルは、 .html ファイルの横にある名前のままで提供されます。 .wasm ファイルは、エンジンを実装するバイナリWebAssemblyモジュールです。 .pck ファイルは、ゲームを含むGodotメインパックです。 .js ファイルには起動コードが含まれており、エンジンにアクセスするために .html ファイルによって使用されます。 .png ファイルには、ブートスプラッシュイメージが含まれています。 デフォルトのHTMLページでは使用されませんが、 カスタムHTMLページに含まれています。

.pck ファイルはバイナリで、通常はMIMEタイプ application/octet-stream で配信されます。.wasm ファイルは application/wasm として配信されます。

警告

application/wasm 以外のMIMEタイプでWebAssemblyモジュール(.wasm)を配信すると、起動時の最適化が妨げられる可能性があります。

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)

ちなみに

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.

スクリプトからJavaScriptを呼び出す

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!');")

最後のJavaScriptステートメントの値はGDScriptの値に変換され、特定の状況下では eval() によって返されます:

  • JavaScript number is returned as float

  • JavaScript boolean is returned as bool

  • JavaScript string is returned as String

  • JavaScript ArrayBuffer, TypedArray and DataView are returned as PackedByteArray

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

その他の JavaScriptの値は 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")

ちなみに

上記の my_func3() のように、3つの引用符 """ で囲まれたGDScriptの複数行の文字列は、JavaScriptコードを読みやすくするのに役立ちます。

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)

環境変数

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.

HTML5 export environment variables

Export option

Environment variable

Encryption / Encryption Key

GODOT_SCRIPT_ENCRYPTION_KEY