-
-
Notifications
You must be signed in to change notification settings - Fork 21k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Splash image support and new progress bar for HTML5 Web Export #91128
Splash image support and new progress bar for HTML5 Web Export #91128
Conversation
d961ed3
to
7c8a4a9
Compare
@@ -170,6 +170,7 @@ void EditorExportPlatformWeb::_fix_html(Vector<uint8_t> &p_html, const Ref<Edito | |||
replaces["$GODOT_PROJECT_NAME"] = GLOBAL_GET("application/config/name"); | |||
replaces["$GODOT_HEAD_INCLUDE"] = head_include + custom_head_include; | |||
replaces["$GODOT_CONFIG"] = str_config; | |||
replaces["$GODOT_SPLASH"] = p_name + ".png"; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In a future PR, we could have Godot write a lossless WebP instead of PNG as it'll have a smaller file size. The downside is that WebP can't be used as an Open Graph image, but we don't define the splash as an Open Graph image right now (perhaps we could).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@Calinou Usually, games aren't shared directly by the player link, so it's not that bad.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Amazing work! 💙
The only comment I have, is that between this change, and the change in #85939 we are again starting to add more and more substitution variables to the template, which is something we tried to avoid since #46200 .
That said, I don't think this is a blocker for the PR given it won't break the existing templates (that substitution is "optional").
Again, this looks fantastic, so I think it's worth merging as is!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great PR, thanks!
Thanks! And congrats for your first merged Godot contribution 🎉 |
Intro
With the increasing popularity of the Godot engine, more and more users are reaching for it, often trying their hand at creating small games during organized compo/jams. Due to the nature of such events, the preferred export type for their production is HTML5.
So far, it's the only export that hasn't supported the ability to display a splash image when the game loads, despite the fact that the image is included in the saved project. The user has the option to create a custom HTML template, but for small games basically no one does this, relying on the engine's default settings.
That being said, I would like to propose an upgrade to the default HTML Shell used by Export to Web.
Goals
Display splash image (Godot or user-selected) when loading game files in the browser. This required exposing a new constant $GODOT_SPLASH from /platform/web/export/export_plugin.cpp.
Minor HTML, CSS and JS optimization to better handle the game loading status overlay.
Unify the progress bar by using a <progress> element that supports both percentage progress and indeterminate mode display. Browser support
Demo
Loading example game:
Loading in landscape mode:
Loading in portrait mode:
Error dialog:
Changes in HTML
A warning has been added when JavaScript in the browser is disabled.
The “status” div has been greatly simplified.
An <img> tag has been added to display the splash image.
HTML5 <progress> tag has been added in place of the custom created progress bar and spinning wheel.
Changes in CSS
Common settings for elements are set together.
The #status overlay is made invisible at first by visibility: hidden, so it doesn't obscure a possible error message about Javascript not being supported.
Splash image is centered on viewport and responsive up to 100% horizontally and vertically.
The progress bar displays over the splash image at 10% of the viepower height from the bottom.
The background color of the error message has been changed to a more reddish.
Javascript
Added reference to #status and removed references to #statusProgressInner and #statusIndeterminate
Changed startup statusMode in case onProgress is never called before setStatusMode('hidden')
Removed manual animation of the spinning wheel.
Simplified setStatusMode removes the #status block completely when the status is changed to 'hidden' after loading the game.
Simplified onProgress using the capabilities of the HTML5 <progress> element (when value and max are removed, the browser automatically displays a bounce animation).
export_plugin.cpp