From d47b8617c47f673b51168aa03a8f4687420ce38b Mon Sep 17 00:00:00 2001 From: Fabio Alessandrelli Date: Fri, 12 Mar 2021 18:59:17 +0100 Subject: [PATCH] Update the "Customizing the HTML5 Shell" page (#4748) Co-authored-by: Hugo Locurcio --- .../platform/customizing_html5_shell.rst | 192 +++++++++--------- 1 file changed, 99 insertions(+), 93 deletions(-) diff --git a/tutorials/platform/customizing_html5_shell.rst b/tutorials/platform/customizing_html5_shell.rst index 248933ba9..8c4bb2731 100644 --- a/tutorials/platform/customizing_html5_shell.rst +++ b/tutorials/platform/customizing_html5_shell.rst @@ -5,7 +5,7 @@ Custom HTML page for Web export While Web export templates provide a default HTML page fully capable of launching the project without any further customization, it may be beneficial to create a custom -HTML page. While the game itself cannot be directly controlled from the outside, +HTML page. While the game itself cannot easily be directly controlled from the outside yet, such page allows to customize the initialization process for the engine. Some use-cases where customizing the default page is useful include: @@ -20,32 +20,48 @@ Some use-cases where customizing the default page is useful include: The default HTML page is available in the Godot Engine repository at `/misc/dist/html/full-size.html `__ -and can be used as a reference implementation. Another sample HTML page is available at -`/misc/dist/html/fixed-size.html `__. -It differs from the default one by having a fixed size canvas area and an output widget below it. +but the following template can be used as a much simpler example: -.. note:: It is recommended to use developer tools provided by browser vendors to debug - exported projects. Output generated by the engine may be limited and does not - include WebGL errors. +.. code-block:: html + + + + + My Template + + + + + + + + Setup ----- -As evident by the default HTML page, it is mostly a regular HTML document. To work with -Godot projects it needs to be fully realized, to have a control code that calls -the :js:class:`Engine` class, and to provide places for several placeholders, which are -replaced with their actual values during export. +As shown by the example above, it is mostly a regular HTML document, with few placeholders +which needs to be replaced during export, an html ```` element, and some simple +JavaScript code that calls the :js:class:`Engine` class. -.. image:: img/html5_export_options.png +The only required placeholders are: -- ``$GODOT_BASENAME``: - The base name from the *Export Path*, as set up in the export options; suffixes are omitted - (e.g. ``game.html`` becomes ``game``). This variable can be used to generate a path - to the main JavaScript file ``$GODOT_BASENAME.js``, which provides the :js:class:`Engine` - class. A splash image shown during the booting process can be accessed using this variable - as well: ``$GODOT_BASENAME.png``. +- ``$GODOT_URL``: + The name of the main JavaScript file, which provides the :js:class:`Engine` class required + to start the engine and that must be included in the HTML as a ``