昔から人気の駄菓子「ビッグカツ」のフリー素材画像が公開されたので、無料・軽快な 2D / 3D 用のゲームエンジン Godot Engine 4 を使って、ビッグカツ画像を使ったブロック崩しを作成します。
「ビッグカツブロック崩し」作成の第３５回では、ウェブブラウザ上でプレイできるように、フリーゲーム投稿サイト「 GodotPlayer 」に、WebGL 版のブロック崩しゲームをアップロードして非公開のテストプレイをした際に起きたトラブルとその対処例を紹介します。
※ GodotPlayer の問題ではなく、こちらのエクスポート、プロジェクトの設定の不備の紹介です。
※ GodotEngine 4.3 を使用しています。.NET 版ではありません。
※スクリプトは自己責任でご使用ください。
前回の記事
前回は、フリーゲーム投稿サイト「 GodotPlayer 」に、WebGL 版のブロック崩しゲームのファイルなどをアップロードして投稿しました。
画面の右側と下側が途中で切れてしまう問題
GodotPlayer にアップロードしてテストプレイすると、右端と下端が切れてしまっています。
エクスポート設定の Canvas Policy Resize オプション（結局変更は無し）
WebGL 向けエクスポートオプションの HTML/Canvas Policy Resize の既定値の Adaptive は、ウェブブラウザのサイズに合わせてゲーム画面のサイズも変更します。
int html/canvas_resize_policy
Determines how the canvas should be resized by Godot.
Godot によってキャンバスのサイズがどのように変更されるかを決定します。EditorExportPlatformWeb — Godot Engine (4.x)の日本語のドキュメント と Google 翻訳
- None: The canvas is not automatically resized.
キャンバスのサイズは自動的に変更されません。- Project: The size of the canvas is dependent on the ProjectSettings.
キャンバスのサイズは、ProjectSettings によって異なります。- Adaptive: The canvas is automatically resized to fit as much of the web page as possible.
キャンバスは、Web ページにできるだけ収まるように自動的にサイズ変更されます。
この設定を Project に変えることでサイズをプロジェクトで指定したサイズに固定できます。
しかし、ゲームの画面サイズより小さいモニターでプレイする場合、ゲーム画面全体をそのモニターで見られるようにするために画面サイズをリサイズする機能は重要なので、Adaptive は変更しないで、ウェブブラウザのサイズによってリサイズされた画面サイズにあわせてこちらでゲーム画面を伸縮させることにしました。
画面のサイズに応じて伸縮する設定
そこで、プロジェクト設定で streach_mode を Disabled から CanvasItem に変更して、アンカーをもとに画面サイズに応じて、ゲーム画面に配置されるノード群を伸縮させることにしました。
※「プロジェクト設定」ダイアログは、メニュー「プロジェクト」→「プロジェクト設定」で開きます。
Stretch Mode = Disabled (default): No stretching happens. One unit in the scene corresponds to one pixel on the screen. In this mode, the Stretch Aspect setting has no effect.
ストレッチ モード = 無効 (デフォルト): ストレッチは行われません。シーン内の 1 ユニットは画面上の 1 ピクセルに対応します。このモードでは、ストレッチ アスペクト設定は効果がありません。Stretch Mode = Canvas Items: In this mode, the base size specified in width and height in the project settings is stretched to cover the whole screen (taking the Stretch Aspect setting into account). This means that everything is rendered directly at the target resolution. 3D is unaffected, while in 2D, there is no longer a 1:1 correspondence between sprite pixels and screen pixels, which may result in scaling artifacts.
ストレッチ モード = キャンバス アイテム: このモードでは、プロジェクト設定の幅と高さで指定された基本サイズが画面全体をカバーするように引き伸ばされます (ストレッチ アスペクト設定を考慮して)。これは、すべてがターゲット解像度で直接レンダリングされることを意味します。 3D は影響を受けませんが、2D では、スプライト ピクセルとスクリーン ピクセルの間に 1:1 の対応がなくなり、スケーリング アーティファクトが発生する可能性があります。Stretch Mode = Viewport: Viewport scaling means that the size of the root Viewport is set precisely to the base size specified in the Project Settings’ Display section. The scene is rendered to this viewport first. Finally, this viewport is scaled to fit the screen (taking the Stretch Aspect setting into account).
ストレッチ モード = ビューポート: ビューポートのスケーリングとは、ルート ビューポートのサイズがプロジェクト設定の表示セクションで指定された基本サイズに正確に設定されることを意味します。シーンは最初にこのビューポートにレンダリングされます。最後に、このビューポートは画面に合わせて拡大縮小されます ([ストレッチ アスペクト] 設定を考慮して)。Multiple resolutions — Godot Engine (stable) documentation in English #streach_mode と Google 翻訳
streach_mode は、「プロジェクト設定」ダイアログの「一般」タブの左側のツリーから「表示」→「ウィンドウ」を選択して表示されるページの「ストレッチ」セクションの「モード」項目でリストから選択できます。
これにより、ゲーム画面がウェブブラウザのページにおさまり、縮小された画面サイズに応じてゲーム画面も伸縮して、画面の端が切れる問題は解消しました。
ローディング画面から進まない問題
前述の問題を解決するために、エクスポートオプションやプロジェクトの設定を変更して何度もアップロードしていると、以下のように Godot Engine のローディングが 100 % になったあとメインシーンに遷移しなくなりました。
Chrome のデバッグ機能を F12 で開いて、みると以下のように表示されていて、インポートに失敗しているようです。
BigBreakOut.js:150 Uncaught (in promise) TypeError: WebAssembly.instantiate(): Import #0 “env”: module is not an object or function
at BigBreakOut.js:150:17
結局、Web プリセットを一度削除して、作り直してからエクスポートしたファイル群を GodotPlayer のゲームのアップロードのページで再アップロードすると直りました。
Web プリセットの削除は、そのプリセットを選択してから上側のゴミ箱ボタンを押します。
その後、「追加」ボタンを押して表示されるメニューから Web を選択して、初期状態の Web プリセットを選択してから「プロジェクトのエクスポート」ボタンを押して、WebGL 向けのファイル群を作成しました。
この新たに作ったファイル群をアップロードすると、ローディング画面でとまる問題は解消しました。
まとめ
「ビッグカツブロック崩し」作成の第３４回では、ウェブブラウザ上でプレイできるように、フリーゲーム投稿サイト「 GodotPlayer 」に、WebGL 版のブロック崩しゲームをアップロードして非公開のテストプレイをした際に起きたトラブルとその対処例を紹介しました。
※ GodotPlayer の問題ではなく、こちらのエクスポート、プロジェクトの設定の不備の紹介です。
参照サイト Thank You!
- Godot Engine – Free and open source 2D and 3D game engine
- フリーゲーム投稿サイト GodotPlayer
- Xユーザーのビッグカツといか姿フライのすぐる【公式】さん: 「使いどころは思いつきませんが、フリー素材としてどうぞご自由にお使いくださいませ！ https://t.co/8F9q3hS02b」 / X
- しょかきうたげ【フリーフォント版あり】 – ぼんのう堂 – BOOTH
- Multiple resolutions — Godot Engine (stable) documentation in English #streach_mode
- EditorExportPlatformWeb — Godot Engine (4.x)の日本語のドキュメント #html-canvas-resize-policy
記事一覧 → Compota-Soft-Press
コメント