Godot4 Chrome で開いた WebGL版アプリの不具合の確認と対処例

無料・軽快な 2D / 3D 用のゲームエンジン Godot Engine 4 で作ってエディタのデバッグ実行では動作したのに WebGL 版にエクスポートしてウェブブラウザからテストすると動作しなかった、ツイートボタンを押したときに呼ばれる自作の tweet 関数を例として、原因の推測対処例を紹介します。
※原因は自身の作ったスクリプトであり公開する場を提供してくださっている GodotPlayer 様には問題はありません

※ GodotEngine 4.3 を使用しています。.NET 版ではありません。
※スクリプトは自己責任でご使用ください。
※ WebGL アプリの表示には Chrome を用いました。

WebGL 版だと関数が動作しない

以下のように Tweet ボタンが押された際のイベント関数(button_up シグナルの受信側メソッド)で sc_util.gd ファイルに定義した自作の tweet 静的関数を呼び出して、ツイートする処理の動作を確認すると、エディターのデバッグ実行では動作するのに、WebGL 版では動作しません

## ButtonTweet の button_up シグナルの受信側メソッドです。
## WebGL で動作しない場合は Chrome なら F12 キーで Console を表示してエラーがないか確認してください。
func _on_button_tweet_button_up():
	# %23 は # を、 %0A は改行(\n) を URL クエリパラメータで表します。
	var msg_hashtag_and_new_line = "Tweet Test ツイート用のテストです。%23SakuraCrowdAssets %0A"
	# 小数第1位までの表記例です。
	var time: float = 12345.67890
	var msg_time_score = "小数第1位までの表記例 → " + str("%.1f" % time)
	# 連結した文字列が入力された状態のツイートの URL を開きます。
	var msg = msg_hashtag_and_new_line + msg_time_score
	ScUtil.tweet(msg)
	return
Godot4 WebGL 版でボタンを押してツイートのページを開こうとしても開きません(自身のスクリプトの問題です)
Godot4 WebGL 版のツイート関数が動作しない場合の対処例1

指定した文字列でツイートするページを表示するスクリプト例

指定した文字列でツイートするページを表示するスクリプト例は以下の記事を参照してください。

問題の原因

動作しないことが確認できたゲームのページで F12 キーを押して Chrome のデベロッパーツールを表示して、 Console にエラーメッセージがないか確認しました。
※ Chrome デベロッパーツールのさまざまな開き方については「Chrome DevTools を開く  |  Chrome for Developers」を参照してください。

そうすると、エラーメッセージが大量に出ています。

これはボタンを押す(実際に tweet 関数を実行する)タイミングではなく起動直後に確認できたので、おそらくシーンに追加されているノード必要なスクリプト全て最初に読み込んでいて、その一部の読み込みに失敗(パースエラー)したと思います。

Godot4 WebGL 版のツイート関数が動作しない場合の対処例2

エラーメッセージ群の最初に表示されたのが以下のエラーメッセージでした。

SakuraCrowdAssets.js の EditorPlugin という型が見つからないというメッセージです。
※ SakuraCrowdAssets はプロジェクト名でありアプリ名なので、WebGL 版にエクスポートする際に必要な gd スクリプトを全て js スクリプトに変換してまとめたものだと思います。

SakuraCrowdAssets.js:474 USER SCRIPT ERROR: Parse Error: Could not find type "EditorPlugin" in the current scope.

EditorPlugin はエディター拡張で用いるクラスです。
その EditorPlugin を用いる静的関数と、 tweet 静的関数同じ sc_util.gd に定義していました。

そのため tweet 関数を呼び出すボタンのノードをシーンに配置した際に、tweet 関数を呼び出す準備をするために sc_util.gd ファイルを読み込んで、 EditorPlugin クラスの名前が見つからないパースエラー(読み込みのエラー)が発生して、そのファイル内の全ての関数が使えない状態になったのだと推測しました。

これに対処するため sc_util.js の静的関数群EditorPlugin を用いた関数そうでない関数で、定義する gd ファイルを分けました

  • sc_util.gd : 実行時用の関数群のスクリプト
  • sc_util_editor.gd : EditorPlugin などを用いてエディタ上でのみ動作する関数群のスクリプト

テスト

再び WebGL 版をエクスポートして 「フリーゲーム投稿サイト GodotPlayer 」にアップロードしたところ、F12 キーで表示した Chrome のデベロッパーツールの console にエラーメッセージは表示されなくなりました

Godot4 WebGL 版のツイート関数が動作しない場合の対処例3

ツイートのボタンを押すと sc_util.gd の tweet 関数が動作してその URL が開くことも確認できました。

以前は is_editor_plugin で分けて動的に読み込んでいた?

今回は、gd スクリプトでエディタでしか機能しない関数を、ファイル単位で分けることで、エディタ上にしかない EditorPlugin クラスのパースエラー対処できました。

しかし、類似の問題を調べているとフォーラムで、ファイル単位で分けただけではなく、それを is_editor_hint 関数エディタ上かそうでないかを判定して、エディタ上ならば load 関数でその gd ファイルを動的に読み込む処理などが議論されていました。
※ is_editor_hint 関数や @tool アノテーションに関しては公式サイト「エディタでコードを実行する — Godot Engine (4.x)の日本語のドキュメント」を参照してください。

func _ready():
	if Engine.is_editor_hint():
		var editor = load("res://some_script_using_editor_interface.gd")
		editor.connect_reimported(_on_resource_reimport)
Scripts fail to load with a parse error on exported projects if it uses editor classes · Issue #91713 · godotengine/godot

もしも、古いバージョンで WebGL 版などをエクスポートした際に、今回紹介した gd のファイル分割だけで解決しない場合は、こちらも参照してみてください。
Scripts fail to load with a parse error on exported projects if it uses editor classes · Issue #91713 · godotengine/godot

まとめ

今回は、無料・軽快な 2D / 3D 用のゲームエンジン Godot Engine 4 で作ってエディタのデバッグ実行では動作したのに WebGL 版にエクスポートしてウェブブラウザからテストすると動作しなかった、ツイートボタンを押したときに呼ばれる自作の tweet 関数を例として、原因の推測対処例を紹介しました。
※原因は自身の作ったスクリプトであり公開する場を提供してくださっている GodotPlayer 様には問題はありません

参照サイト Thank You!

記事一覧 → Compota-Soft-Press

コメント

Ads Blocker Image Powered by Code Help Pro

お願い - Ads Blocker Detected

このサイトは広告を掲載して運営しています。

ポップアップを閉じて閲覧できますが、よろしければ

このサイト内の広告を非表示にする拡張機能をオフにしていただけませんか?

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

タイトルとURLをコピーしました