🦁

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

2022/11/07に公開約2,000字

はじめに

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もコンパイルできないと困るかも。

その他

何かあれば追記します。

GitHubで編集を提案

Discussion

ログインするとコメントできます