【Godot】Webエクスポートをする際の注意点

はじめに

Godotでwebアプリケーションを作った時に躓いた所を書いていきます。

出力された.htmlファイルを開いても実行できない

出力された.htmlファイルをダブルクリックで開いてもFailed to Fetchと表示されて実行できません。
ブラウザが非対応とかそういうことではなく、エクスポートされたhtmlファイルはサーバー上で実行される事が前提になっているからです。(参考動画)
Project > ExportでHTML5エクスポートの設定を行うと右上にエクスポートされたhtmlをブラウザ上で実行するボタンが現れます。

print()、print_debug()が表示されない

上述の通りにブラウザ上で実行してもGodot Editor上にはprint()、print_debug()の内容はおろかエラーさえ出力されません。エラーが発生するとUIは動いているのに反応しない...という状態になります。
print()やエラーはブラウザの開発者コンソール上に表示されます。

ローカルファイルシステムがwebサーバーのものになっている

access=FileDialog.ACCESS_FILESYSTEMと設定してローカルに保存させようと思ったらwebサーバーのファイルシステムが表示されました。

Godot内で作成したファイルをローカルに保存させるにはJavaScript.download_buffer(buffer:PoolByteArray, name:String, mime:String)が使用できます。
ただしJavaScriptシングルトンはデスクトップ向けのビルドでは無効になっている(デフォルトの場合)為、OS.has_feature("JavaScript")で条件分岐させてJavaScriptシングルトンが有効な場合のみに実行させる必要があります。

• 例1: テキストファイルをDLさせる

  var f:=File.new()
  f.open("temp.txt",File.WRITE)
  f.store_var("abc")
  f.close()
  f.open("temp.txt",File.READ)
  JavaScript.download_buffer(f.get_buffer(f.get_len()),"test.txt","text/plain")
  
  # もしくは
  JavaScript.download_buffer("abc".to_utf8(),"test.txt","text/plain")
  

• 例2: png画像をDLさせる

  var img:Image=save_texture.get_data()
  var f:=File.new()
  img.save_png("temp.png")
  f.open("temp.png")
  JavaScript.download_buffer(f.get_buffer(f.get_len()),"test.png","image/png")
  
  # もしくは
  var img:Image=save_texture.get_data()
  JavaScript.download_buffer(img.save_png_to_buffer(),"test.png","image/png")
  

html5向けのバイナリはWindowsではコンパイルできない

Windowsにemsdkを導入してもjavascriptにはコンパイルできないようです。
今回はカスタムテンプレートを使おうとしただけですが、GDNativeもコンパイルできないと困るかも。

その他

何かあれば追記します。