{"id":27771410,"url":"https://github.com/antzgames/easy-web-loader","last_synced_at":"2025-04-29T22:38:51.515Z","repository":{"id":290203121,"uuid":"973626391","full_name":"antzGames/Easy-Web-Loader","owner":"antzGames","description":"Easy HTML Web Loader Plugin for Godot","archived":false,"fork":false,"pushed_at":"2025-04-28T03:06:33.000Z","size":460,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-29T22:38:38.867Z","etag":null,"topics":["addon","export","godot","godot-addon","godot-engine","godot4","html","web"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/antzGames.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-04-27T11:54:14.000Z","updated_at":"2025-04-28T07:13:09.000Z","dependencies_parsed_at":"2025-04-27T15:34:28.628Z","dependency_job_id":null,"html_url":"https://github.com/antzGames/Easy-Web-Loader","commit_stats":null,"previous_names":["antzgames/easy-web-loader"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antzGames%2FEasy-Web-Loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antzGames%2FEasy-Web-Loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antzGames%2FEasy-Web-Loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antzGames%2FEasy-Web-Loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/antzGames","download_url":"https://codeload.github.com/antzGames/Easy-Web-Loader/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251596590,"owners_count":21615011,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["addon","export","godot","godot-addon","godot-engine","godot4","html","web"],"created_at":"2025-04-29T22:38:50.863Z","updated_at":"2025-04-29T22:38:51.509Z","avatar_url":"https://github.com/antzGames.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Easy Web Loader for Godot\n\n\u003cimg src=\"https://github.com/user-attachments/assets/ea90ad51-3a26-4150-97cf-c8c2c1500a17\" width=\"50%\" height=\"50%\"\u003e\n\nEasy HTML Web Loader for Godot is a very simple plugin used for your web builds\nwhich allows you to customize your HTML loading screen, with only 2 images. Here are some highlights:\n\t\n- includes a custom HTML shell template.\n- forces the user to click so that the browser is allowed to enable audio and fullscreen.\n- loading screen and progress bar show loading progress.\n- progress bar color, and loading screen background color can be modified in the included custom HTML shell template.\n- use your own images to customize the HTML loading process.\n\n## Why is a plugin needed?\n\nBy default, Godot exports all assets (including images) into a PCK file. Therefore, your images will not be available to HTML using a simple `\u003cimg\u003e` tag.\n\nSo how do you add custom images to support a custom HTML shell? Well you need to copy the loader images over AFTER export. Many custom Godot placeholder variables are processed in the custom HTML shell, which further complicates the simple use case of custom loader images.\n\nThis plugin makes this whole process easy and simple. All you need to provide is 2 custom loader images and the plugin handles the copying over of the files and the processing of the provided custom HTML template.\n\nIn addition, the plugin solves the issue of getting the user to click the initial loading screen so that the browser has the ability to play audio and go fullscreen.\n\n## Audience\n\nThis plugin is for developers who are familiar with exporting their projects to the web.\nIf you need help in exporting your game to the web, see the official Godot [Exporting for Web](https://docs.godotengine.org/en/stable/tutorials/export/exporting_for_web.html) documentation.\n\n## Limitations\n\n- only single-threaded exports are supported.\n- only `Export Project` option supported (no PCK/ZIP)\n- your custom images must be in PNG format.\n- your custom images are recommended to be 1280×720 or smaller.\n- This is the initial release, and it was built for my own game jams. If you find bugs please open an issue.\n\n## Future Functionality\n\nThe ability to support animated WEBP/GIFs, or static JPG image files.  This would require new variable placeholders in the Custom HTML Shell. During export, the swapping out the image varaiable paceholders with any image, regardless of type and even can have unique names (currently image names have to be hard coded to `clickme.png` and `loading.png`).\n\n## Video\n\nIf you hate reading and would rather watch a video on how to install and configure this plugin, watch on [YouTube](https://youtu.be/3ZJT7RDXMqU).\n\n## Installation\n\n- Download this repository as a ZIP file.\n- Extract the ZIP file.\n- Copy the `addons` directory from the extracted ZIP file into your Godot project's `res://` filesystem.\n- Go to `Project \u003e Project Settings \u003e Plugins` and enable the plugin.\n\n\u003cimg src=\"https://github.com/antzGames/Easy-Web-Loader/blob/main/demo/images/install_plugin.jpg\" width=\"50%\" height=\"50%\"\u003e\n\n## Setting up Web Export\n\n- Go to `Project \u003e Export`\n- Add the Web template to the presets.\n- In the Custom HTML Shell field, add `res://addons/easy_web_loader/html/index_template.html`\n- Export. \n\n\u003cimg src=\"https://github.com/antzGames/Easy-Web-Loader/blob/main/demo/images/web_export_set_shell.jpg\" width=\"50%\" height=\"50%\"\u003e\n\n## Adding your images\n\nThere are two PNG images that you need to prepare. Both are recommended to be 1280x720 or smaller.\n\n- The first image needs to be renamed `clickme.png` in lower case.\n- The second image needs to be renamed `loading.png` in lower case.\n\nThe `clickme.png` needs to have a message on it requesting the user to click the image.\nThis user click is important as it allows the browser to now play audio and allow\nfullscreen mode.\n\nOnce the user has clicked the `clickme.png` image, then the image is swapped to the\n`loading.png` image and the progress bar is now shown. To change the progress bar color see the next section.\n\nOnce the loading of the game happens, the Godot Engine will start running your game.\n\n### Replace the 2 PNG files with your own\n\nReplace the `clickme.png` and `loading.png` in the `res://addons/easy_web_loader/html` folder, as shown below, with your own images, and make sure they have the same name in lower case.\n\n\u003cimg src=\"https://github.com/antzGames/Easy-Web-Loader/blob/main/demo/images/plugin_dir_structure.jpg\" width=\"50%\" height=\"50%\"\u003e\n\n## Modifying colors\n\nThis section is slightly advanced as it requires you to modify the included \nCustom HTML Shell. If you mess up, don't worry, just re-install this plugin and\nyou are back to where you started.\n\nThe Custom HTML Shell is located here: `res://addons/easy_web_loader/html/index_template.html`\n\nThe Godot editor hides HTML files for some reason so you need to edit this file\nusing an external editor.\n\n### Loading Screen backgroud color\n\nYou can change the `background-color` of the loading screen, modify this section in \nthe Custom HTML Shell:\n\t\n```html\n\u003cstyle\u003e\n\tbody {\n\t\ttouch-action: none;\n\t\tmargin: 0;\n\t\tborder: 0 none;\n\t\tpadding: 0;\n\t\ttext-align: center;\n\t\tbackground-color: black;  /* change background color */\n\t}\n```\n### Progress Bar color\n\nYou can change the `accent-color` of the progress bar, modify this section in \nthe Custom HTML Shell:\n\t\n```html\n\t/* change the built in browser progress color */\n\tprogress {\n\t\taccent-color: #e44033\n\t}\n```\n\n## Demo\n\nA demo scene is included in this repository to test if everything works.\n\n## Behind the scenes\n\nThis plugin registers a custom `EditorExportPlugin` which extends `EditorPlugin` with Godot's editor.\n\nEditorExportPlugins are automatically invoked whenever the user exports the project. This class has may cool methods. The one I use is the `_export_begin()` method, which is called at the beginning of the export process.\n\nInside my plugin's `_export_begin` method, and only during `web` exports, the 2 image loader files are copied over to the export directory. That is basically all this plugin does.  During non `web` exports, like desktop or mobile exports, my plugin does nothing.\n\n## License\n\nMIT License\n\nCopyright (c) 2025 Antz\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantzgames%2Feasy-web-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fantzgames%2Feasy-web-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantzgames%2Feasy-web-loader/lists"}