Godot4 ビッグカツブロック崩し33 WebGL エクスポートの手順

※この連載の全ての記事は、タグ「ビッグカツ」の検索一覧から探すことができます。
※この連載で作ったゲームは「BigBreakOut（ゲームの作り方の記事付き） | フリーゲーム投稿サイト GodotPlayer」でプレイできます。

昔から人気の駄菓子「ビッグカツ」のフリー素材画像が公開されたので、無料・軽快な 2D / 3D 用のゲームエンジン Godot Engine 4 を使って、ビッグカツ画像を使ったブロック崩しを作成します。

使いどころは思いつきませんが、フリー素材としてどうぞご自由にお使いくださいませ！ pic.twitter.com/8F9q3hS02b
— ビッグカツといか姿フライのすぐる【公式】 (@SUGURU_BIGKATSU) December 2, 2024

「ビッグカツブロック崩し」作成の第３３回では、ウェブブラウザ上でアプリを実行できる WebGL (Web, HTML5) 形式のファイル群をエクスポートする手順を紹介します。
また、その際に選択できるエクスポートオプションについても少し紹介します。

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

前回の記事
WebGL 版のエクスポート
1. VRAM テクスチャ圧縮のモバイル向けオプションの設定
GodotPlayer へのアップロードと公開
オプションについて
まとめ
参照サイト Thank You!

前回の記事

前回は、使用した素材を紹介するクレジット画面をタイトル画面でボタンを押すと表示する実装例と、そのテスト結果を紹介しました。

WebGL 版のエクスポート

WebGL (Web) 版のエクスポートのために、メニュー「プロジェクト」→「エクスポート」を選択します。

「エクスポート」ダイアログのプリセットのリストに「Web」がない場合は、「追加」ボタンを押して表示されるメニュー「Web」を選択します。

「プロジェクトのエクスポート」ボタンを押します。

もしも、「プロジェクトのエクスポート」ボタンが押せない状態で、「WebGL にエクスポートするためのエクスポートテンプレートが見つからない」というメッセージの場合は、「エクスポートテンプレートの管理」リンクをクリックします。詳しくは以下の記事を参照してください。

出力先の html ファイルパスを指定して「保存」ボタンを押すと WebGL 版のファイル群が作成されます。
複数ファイルが出力されるので空のフォルダを指定すると良いでしょう。
また、デバッグ付きエクスポートのチェックボックスはリリース時はチェックを外しましょう。

指定したフォルダに WebGL 版のファイル群が出力されました。

VRAM テクスチャ圧縮のモバイル向けオプションの設定

オプションは特に変更しなくても良いと思いますが、モバイル向けの画像形式でもデータを持たせるために「VRAM テクスチャ圧縮」セクションの「モバイル向け」項目を ON にしました。

その際、

「ターゲットプラットフォームは、’ETC2/ASTC’ テクスチャ圧縮が必要です。プロジェクト設定で ‘Import ETC2 ASTC’ を有効にしてください。」

と表示されるので、右側の「インポートの修正」リンクをクリックして問題を解消します。
※オプションについては、後の章を参照してください。

Godot4 ビッグカツブロック崩し WebGL 版のエクスポートオプション for_mobile について１

プロジェクトを閉じる際は、画像のインポート設定の変更を保存しましょう。

Godot4 ビッグカツブロック崩し WebGL 版のエクスポートオプション for_mobile について２

GodotPlayer へのアップロードと公開

GodotPlayer へのアップロードと公開は以下の記事を参照してください。

オプションについて

公式サイトの「EditorExportPlatformWeb — Godot Engine (stable) documentation in English」に書かれている、オプションの説明文を Google 翻訳で日本語化したものを、カテゴリごとに記載します。

カスタムテンプレート

カスタムテンプレートセクションのオプションです。

String custom_template/debug

デバッグビルドに使用されるカスタムエクスポートテンプレートへのファイルパス。空のままにすると、デフォルトのテンプレートが使用されます。

String custom_template/release

リリースビルドに使用されるカスタムエクスポートテンプレートへのファイルパス。空のままにすると、デフォルトのテンプレートが使用されます。

バリアント

バリアントセクションのオプションです。

bool variant/extensions_support

true の場合、この Web ビルドの GDExtension サポートが有効になります。

GDExtension is a Godot-specific technology that lets the engine interact with native shared libraries at run-time. You can use it to run native code without compiling it with the engine.
GDExtension は、エンジンが実行時にネイティブ共有ライブラリと対話できるようにする Godot 固有のテクノロジです。これを使用すると、エンジンでコンパイルせずにネイティブ コードを実行できます。
What is GDExtension? — Godot Engine (4.x)の日本語のドキュメント

bool variant/thread_support

true の場合、エクスポートされたゲームはスレッドをサポートします。これには「クロスオリジン分離」Web サイトが必要ですが、セットアップが難しい場合があり、セキュリティ上の理由で制限されます (サードパーティ Web サイトと通信できないなど)。

false の場合、エクスポートされたゲームはスレッドをサポートしません。その結果、パフォーマンスとオーディオの問題が発生しやすくなりますが、HTTPS Web サイト上でのみ実行する必要があります。

VRAM テクスチャ圧縮

VRAM テクスチャ圧縮セクションのオプションです。

テクスチャ画像を、デスクトップに向いている S3TC 形式、モバイルに向いている ETC3 形式、それぞれで持つかどうかを true/false で設定できます。
＃推測ですが、それぞれ異なる画像形式のため、どちらもチェックした場合は、１つの画像に対して２つの形式の画像データを持ち、実行環境によってそれらを使い分けられると思います。

bool vram_texture_compression/for_desktop

true の場合、S3TC アルゴリズムを通じてテクスチャをデスクトップ用に最適化できます。

他サイト様「DXTC(S3TC)圧縮のアルゴリズムとは？～前編～ | OPTPiX Labs Blog」によると、 S3TC アルゴリズムは、いくつものゲーム機でも使われている画像の非可逆の圧縮・伸長の技術で、jpeg などのように、その圧縮形式も指します。

bool vram_texture_compression/for_mobile

true の場合、ETC2 アルゴリズムを通じてテクスチャをモバイル向けに最適化できます。

他サイト様「ETC圧縮のアルゴリズムとは？ | OPTPiX Labs Blog」によると ETC2 アルゴリズムも、画像の圧縮・伸長の技術で、圧縮形式も指します。
さきほどの S3TC(DXTC) と補完しあうよう非可逆圧縮の特徴を持っています。

HTML

HTML セクションのオプションです。

bool html/export_icon

true の場合、プロジェクトアイコンは、このアプリケーションの Web ページのファビコンとして使用されます。

String html/custom_html_shell

エクスポートされた Web ビルドをラップするカスタム HTML ページ。空のままにすると、デフォルトの HTML シェルが使用されます。

詳細については、「HTML5 シェルのカスタマイズ」チュートリアル (Customizing HTML5 Shell) を参照してください。

String html/head_include

タグなど、内に含める追加の HTML タグ。

注: タグはプロジェクト名に基づいて自動的に含まれるため、追加する必要はありません。

int html/canvas_resize_policy

Godot によってキャンバスのサイズがどのように変更されるかを決定します。

None なし: キャンバスのサイズは自動的に変更されません。
Project プロジェクト: キャンバスのサイズは、ProjectSettings によって異なります。
Adaptive アダプティブ: Web ページにできるだけ収まるように、キャンバスのサイズが自動的に変更されます。

bool html/focus_canvas_on_start

true の場合、ブラウザウィンドウがすでにフォーカスされている場合、アプリケーションがロードされるとすぐにキャンバスがフォーカスされます。

bool html/experimental_virtual_keyboard

実験的: このプロパティは将来のバージョンで変更または削除される可能性があります。

true の場合、仮想キーボードのサポートが Web ページに埋め込まれ、必要に応じてタッチスクリーンデバイスに表示されます。

Progressive Web App

Progressive Web App セクションのオプションです。

bool progressive_web_app/enabled

true の場合、この Web ビルドはプログレッシブ Web アプリケーション（progressive web application） (PWA) に変わります。

bool progressive_web_app/ensure_cross_origin_isolation_headers

有効にすると、プログレッシブ Web アプリは各リクエストにクロスオリジン分離ヘッダー (COEP/COOP) があることを確認します。

これにより、エクスポートされたゲームを提供するためのセットアップが簡素化されます。

String progressive_web_app/offline_page

ページをホストしているサーバーが利用できない場合に表示するページ。このページはクライアントのマシンに保存されます。

int progressive_web_app/display

このプログレッシブ Web アプリケーションに使用する表示モード。ブラウザやプラットフォームが異なると、同じように動作しない場合があります。

Fullscreen, 全画面: アプリを全画面で表示し、ブラウザーのすべての UI 要素を非表示にします。
Standalone, スタンドアロン: アプリを別のウィンドウに表示し、ブラウザーのすべての UI 要素を非表示にします。
Minimal UI, 最小限の UI: アプリを別のウィンドウに表示し、ナビゲーション用のブラウザーの UI 要素のみを表示します。
Browser, ブラウザ: アプリを通常の Web ページとして表示します。

int progressive_web_app/orientation

Web アプリケーションをモバイルデバイスで実行するときに使用する方向。

Any: 向きは強制されません。
Landscape, ランドスケープ: 強制的に水平レイアウト (高さよりも幅が広い) になります。
Portrait, 縦方向: 強制的に垂直方向のレイアウト (幅よりも高さ) を設定します。

String progressive_web_app/icon_144x144

この Web アプリケーションの最小アイコンへのファイルパス。定義されていない場合は、デフォルトでプロジェクトアイコンが使用されます。

注: アイコンが 144×144 ではない場合、最終ビルドに合わせて自動的にサイズ変更されます。

String progressive_web_app/icon_180x180

この Web アプリケーションの小さなアイコンへのファイルパス。定義されていない場合は、デフォルトでプロジェクトアイコンが使用されます。

注: アイコンが 180×180 ではない場合、最終ビルドに合わせて自動的にサイズ変更されます。

String progressive_web_app/icon_512x512

この Web アプリケーションの最小アイコンへのファイルパス。定義されていない場合は、デフォルトでプロジェクトアイコンが使用されます。

注: アイコンが 512×512 ではない場合、最終ビルドに合わせて自動的にサイズが変更されます。

Color progressive_web_app/background_color

Web アプリケーションの背後で使用される背景色。

まとめ

「ビッグカツブロック崩し」作成の第３３回では、ウェブブラウザ上でアプリを実行できる WebGL (Web, HTML5) 形式のファイル群をエクスポートする手順を紹介しました。
また、その際に選択できるエクスポートオプションについても少し紹介しました。

参照サイト Thank You!

記事一覧 → Compota-Soft-Press

Godot4 ビッグカツブロック崩し33 WebGL エクスポートの手順

前回の記事