play the jitoh-san

play the jitoh-san(プレイザジトーさん)とは

Godot 4ゲームエンジンを使ってジトーさんのことをちょっとブンドドして遊べるものにしてみようという自己満足的企画。ゲームボーイライクの2Dアクションで、スプライトからできるだけ自分で用意してやってみようというおべんきょう企画でもあります。

プレイザジトーさん2月号

※ブラウザでいますぐ遊べます。
 30MB強あるのと、キーボードがないと操作ができないので注意。
 タイトル画面進行:Enter
 移動:左右/AD
 ジャンプ:X/スペース
 攻撃(10ダメージ):Z
 追撃(20ダメージ):攻撃モーション中にZ
 調べる:上/W
 溶ける:下/Sを押しっぱなし
 ステージクリア後・終了後:キャラモーション後にZ/X/Enterで進行
※ゲーム中のジトーさんが完全に猫なのは画力とドット仕様の問題。

以下技術的なメモとかいろいろ。

旧バージョン

プレイザジトーさん1月号

Godot4 Webエクスポートで必要なもの

詳しい解説は公式と参考文献のほうを確認されたしですが、Godot4のWebエクスポートを動作させるためにはページ表示時のサーバからのHTTPレスポンスヘッダに特定ブラウザ機能の許可をしておく必要があります。

許可の指定は.htaccessで行えますが、以前WordPressの特定のファイルアクセスを封鎖する際に記入したwordpress-htaccess.confが今回も使えるので、

sudo vi /opt/bitnami/apache/conf/vhosts/htaccess/wordpress-htaccess.conf

こちらで開いて末尾に以下のように指定を追加してあります。

<Directory "/opt/bitnami/wordpress/godot_files/">
Header set Cross-Origin-Embedder-Policy "require-corp"
Header set Cross-Origin-Opener-Policy "same-origin"
</Directory>

※/opt/bitnami/wordpress/はこの構成のwebrootです。WordPressとの衝突がないようGodot公開用ディレクトリとしてgodot_filesディレクトリを作成し、そのディレクトリのみを対象としてあります。サーバ全体にかけても害はなさそうですが一応くらいのそれ。

カスタムテンプレート

大まかに言うと、Godotは配布しようという形式に関わらず(Windows用のexeファイルであろうと、WEB公開用のwasmファイルであろうと)実態としてはGodotエディタが丸々入っています。なので公式が提供しているテンプレートはエディタで操作できる範囲も入っており、3D関連だのネットワーク関連だのファイルタイプ対応の類だのが結構な数含まれています。

中でもFreeTypeとmbedTLSとENetはライセンス表記の必要なモジュールなので、ライセンス表記を削ったり容量を減らそうと思った場合はGodot自体をコンパイルしなおしてあげる必要が生じます。

今回はWEB公開用のwasmファイルを出力したいだけなので、先達の内容に沿いまして以下の手順をざっと進めておきます。

  • Python 3.12.2のインストール
  • Emscripten SDKのインストール
  • Godot 4.2.1のソースコードを用意
  • 公式のプラクティスに沿って除外するモジュールをgodotのソースフォルダにcustom.pyとして配置
    いろいろ試行錯誤したのですが、今回は結局プラクティスページの例になっているものに上部の5点を加えたものとしました。
disable_3d = "yes"
disable_advanced_gui = "yes"
module_freetype_enabled = "no"
module_text_server_adv_enabled = "no"
module_text_server_fb_enabled = "yes"

module_basis_universal_enabled = "no"
module_bmp_enabled = "no"
module_camera_enabled = "no"
module_csg_enabled = "no"
module_dds_enabled = "no"
module_enet_enabled = "no"
module_gridmap_enabled = "no"
module_hdr_enabled = "no"
module_jsonrpc_enabled = "no"
module_ktx_enabled = "no"
module_mbedtls_enabled = "no"
module_meshoptimizer_enabled = "no"
module_minimp3_enabled = "no"
module_mobile_vr_enabled = "no"
module_msdfgen_enabled= "no"
module_multiplayer_enabled = "no"
module_noise_enabled = "no"
module_navigation_enabled = "no"
module_ogg_enabled = "no"
module_openxr_enabled = "no"
module_raycast_enabled = "no"
module_regex_enabled = "no"
module_squish_enabled = "no"
module_svg_enabled = "no"
module_tga_enabled = "no"
module_theora_enabled = "no"
module_tinyexr_enabled = "no"
module_upnp_enabled = "no"
module_vhacd_enabled = "no"
module_vorbis_enabled = "no"
module_webrtc_enabled = "no"
module_websocket_enabled = "no"
module_webxr_enabled = "no"
module_zip_enabled = "no"

disable_3d = “yes” … 3D機能なので今回は使わないのでyes
disable_advanced_gui = “yes” … TextEditノードなど。いまは使っていないのでyes
module_freetype_enabled = “no” … TrueTypeやOpenTypeといった形式のフォントを使用する場合に使う。通常はnoにしないものだが、今回フォント自分で描いてるので…
module_text_server_adv_enabled = “no” … 逆順のような複雑なテキスト処理を行う場合。行わないのでnoにしてある
module_text_server_fb_enabled = “yes” … 上記をnoにしてある場合はこれをyesにしないと文字がすべて消えるので注意。yesにすること

準備が整ったらセットアップ&コンパイル。コンソールでEmscriptenディレクトリ側で

emsdk.bat install latest
emsdk.bat activate latest

のちにgodotディレクトリ側で

scons platform=web target=template_release javascript_eval=no

するとgodotディレクトリ配下のbinディレクトリに godot.web.template_release.wasm32.zip ができるので、このzipファイルが「カスタムテンプレート」になります。
※なんか”attempt to add bitcode file after LTO.”で怒られて完了しないことがありますが、PC再起動したら直りました。なんなんだ…

0.2.13版でjitoh_2.wasmが33.9 MBから24.0 MBまで削減できました。6割ちょい。容量もさることながら、FreeTypeとmbedTLSとENetが無効化できたのでライセンス表記を減らすことができたので目標達成といったところ。

参考文献

Godot Engine 4.2ドキュメント
Peanuts Code様
WorkToolSmith様「ド基礎からのGodot」
【Godot Engine】カスタムテンプレートを作成する方法
and 星のカービィ(主に初代の挙動とデザインを参考させてもらっています)