Godotでwebエクスポートする方法

GodotというOSSでは一番有名なゲームエンジンがある。
そのGodotで作ったアプリをwebブラウザから使用できる形式でエクスポートする方法を調べたので、以下に記載する。

方法

基本的に参考 に記載してあるドキュメントを参考にするのが一番正しい。

Godot でWebエクスポートするには、以下の手順を踏むと良い。

  1. Godot エディタの左上のメニューからProject > Exportを選択
  2. 画面上部のAdd を選択し、HTML5やWebとなっているテンプレートを選択
  3. 画面下部のExport Projectを選択し、適当なファイル名や保存場所を入力し保存

以上の手順でhtml形式で保存できる

Javascriptの呼び出し

これについても、基本的に参考 に記載してあるドキュメントを参考にするのが一番正しい。

JavaScriptBridgeというシングルトンオブジェクトを利用することで、GDScript側からJavascriptの関数を呼び出せる。

呼び出すJavascriptの関数は、方法の2 で選択したテンプレートのHead Includeに含めることで、エクスポートされるhtmlファイルのheadタグ内にスクリプトとして含ませることができる。
そうして設定したスクリプトをGDSctiptから呼び出すという形になる。
Head Include内には、ライブラリを含ませることもできるため、それによりライブラリ関数も使用できるようである。

逆にJavascriptからGDScriptの関数の呼び出し方法は分からなかった。

GDScriptからJavascriptの関数を呼び出す方法の例

まず、Head Includeに呼び出したい関数myFuncを定義する。

<script>
function myFunc() {
    alert("My func!");
}
</script>

そして、GDScript内で以下のように呼び出す。

func _ready():
	# Get the `window` object, where globally defined functions are.
	var window = JavaScriptBridge.get_interface("window")
	# Call the JavaScript `myFunc` function defined in the custom HTML head.
	window.myFunc()

注意事項

Javascript関数の引数はJavascriptオブジェクトである必要がある。
Stringやintは自動的に変換してくれるが、Array等のオブジェクトは変換してくれない。
そのため、Array等のオブジェクトを引数にするには、以下のようにJavascriptオブジェクトを生成して呼び出す必要がある。

var arr = JavaScriptBridge.create_object("Array", 10)
window.foo(arr)

デバッグについて

開発中にブラウザ上で実行するには、 方法の2 まで完了していれば、設定したテンプレートを基にリモートデバッグが実行できるようになる。
このとき、Godotエディタで指定したブレークポイントには反応しないため注意が必要である。
ブレークポイントを設定するには、ブラウザの開発者モードを使用する必要がある。

ただし、開発者モードではGDScriptで書かれたコードはWebAssenbly化されている可能性がある。
そのため、このデバッグ機能を使う目的は主にJavascriptの呼び出しで定義したJavascript関数の動作についてデバッグする場合に用いるのが良さそう。

参考