Webのエクスポート

HTML5エクスポートは、ブラウザにGodotエンジンで作られたゲームを公開することができます。これには、ユーザーのブラウザで WebAssemblyWebGL をサポートする必要があります。

重要

通常は F12 で開いたブラウザ統合開発者コンソールを使用して、JavaScript、エンジン、WebGL エラーなどの デバッグ情報 を表示します。

注意

FirefoxやChromiumベースのブラウザを含む、多くのブラウザは、file:// プロトコルごとにローカルで開いたときに、エクスポートされたプロジェクトをロードしません。 これを回避するには、ローカルサーバーを使用します。

ちなみに

Pythonは、ローカルサーバーを起動するための簡単な方法を提供しています。Python 2 で python -m SimpleHTTPServer を使用するか、Python 3 で python -m http.server を使用して、現在の作業ディレクトリを http://localhost:8000 で提供します。

WebGL 2

OpenGL ES 3 レンダラーがGodotから削除され Vulkan が採用されるまで、GLES3 オプションが選択されている場合、HTML5エクスポートでは WebGL 2 が使用されます。

警告

置き換えなしにGodotから削除されることが予想されるため、WebGL 2の使用はお勧めしません。

WebGL 2はすべてのブラウザーでサポートされているわけではありません。FirefoxChromium系 (クローム、オペラ)は、最も人気のあるWebGL 2をサポートしているブラウザですが、SafariEdge では動作しません。iOS では、すべてのブラウザは、WebKitの(すなわち、Safariなど)に基づいているので、同様に動作しません。

GodotのWebGL 2レンダラーには3Dの問題があり、メンテナンスが行われなくなりました。

制限事項

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

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

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

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

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

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

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

オーディオ自動再生

Chromeは、ウェブサイトでの音声の再生方法を制限しています。プレイヤーがオーディオを有効にするには、クリックしたりタップするなどの、キーを押す操作が必要がある場合があります。

参考

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

class_HTTPClientclass_HTTPRequest

HTTPクラスには、HTML5プラットフォームに関するいくつかの制限があります。

  • StreamPeer へのアクセスおよび変更はできません
  • スレッド/ブロックモードは使用できません
  • フレームごとに複数回進行できないため、ループ内のポーリングはフリーズします
  • チャンク応答なし
  • ホスト検証を無効にできません
  • 同一生成元ポリシーに従います

エクスポートされた .html ファイルを再利用することはできません

それぞれのプロジェクトはそれ自身のHTMLファイルを生成しなければなりません。エクスポート時に、特定のエクスポートオプション用に 生成されたHTMLファイル に複数のテキスト プレースホルダが置き換えられます。他の直接の 生成されたHTMLファイル への変更は以後のエクスポートでは失われます。生成されたファイルのカスタマイズは、WebエクスポートHTMLページのカスタマイズを見て下さい。

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

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

実装されていない機能

現在、HTML5 プラットフォームでは次の機能を使用できません:

  • スレッド
  • GDNative
  • C#
  • エンジンとオペレーティングシステム間のクリップボード同期
  • class_HTTPClient および class_WebSocketClient 以外のネットワーク処理

ちなみに

`list of open HTML5 issues on Github <https://github.com/godotengine/godot/issues?q=is:open+is:issue+label:platform:html5>`__でオープンされているHTML5の問題のリストをチェックして、疑問に関わる問題がないか確認してみてください。一覧にない場合は、あなたの知りたいことを伝えるために、新しいIssueをオープンしてください。

ファイルの提供

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

生成された .html ファイルは、Apacheサーバーで DirectoryIndex として使用でき、いつでも index.html などの名前に変更できますが、その名前はデフォルトでは全く依存しません。

HTMLページは、ブラウザウィンドウ内で最大サイズでゲームを描画します。この方法で、ほとんどのWebゲームホスティングサイトで一般的であるように、ゲームのサイズで <iframe> に挿入できます。

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

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

ご用心

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

サーバー側の圧縮でファイルを配信することは、通常はサイズが大きい .pck ファイルと .wasm ファイルで特に推奨されます。WebAssemblyモジュールは、gzip圧縮によって元のサイズの約4分の1にまで圧縮されています。

エクスポートオプション

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

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

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

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

Webビルドでは、JavaScript シングルトンが実装されます。同名のJavaScript関数と同様に機能する eval と呼ばれる単一のメソッドを提供します。文字列を引数として受け取り、JavaScriptコードとして実行します。これにより、Godotに統合されたスクリプト言語では不可能な方法でブラウザと対話できます。

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

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

  • JavaScript番号はGDScriptとして返されます class_float
  • JavaScriptブール値はGDScriptとして返されます class_bool
  • JavaScript文字列はGDScriptとして返されます class_String
  • JavaScriptのArrayBuffer、TypedArray、DataViewはGDScriptとして返されます class_PoolByteArray
func my_func2():
    var js_return = JavaScript.eval("var myNumber = 1; myNumber + 2;")
    print(js_return) # prints '3.0'

その他の JavaScriptの値は null として返されます。

HTML5エクスポートテンプレートは、シングルトンをサポートせずに構築できます。 このようなテンプレートおよびHTML5以外のプラットフォームでは、 JavaScript.eval を呼び出すと null も返されます。 シングルトンの可用性は、 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")

ちなみに

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

eval メソッドはグローバルな実行コンテキストでコードを実行するかどうかを指定する2番目のオプションのブール引数も受け入れます。デフォルトではグローバルな名前空間を汚染しないように false になります:

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