Godot Editor running in a web browser
By: Fabio Alessandrelli 29 May 2020
Hello Godotters! It's-a me, Fabio! In the last few months, thanks to the great sponsorship of Mozilla I've been working on a big surprise for Godot 4.0, namely making the editor available as an HTML5 application.
This DOES NOT mean that we will move completely to the Web like other engines did. It will only be provided as a complementary option to the native editor, as a way to lower the entry barrier. Let me explain further.
Godot Engine supports exporting games to the HTML5 platform (i.e. browsers). Given that the editor itself is written using the Godot Engine API it should be possible to run the editor in browsers as well.
The reason why the editor wasn’t able to run in browsers up until now was due to some historical Web browsers limitations, mostly lack of support for threading, but also file system access.
This will be beneficial in many ways to the engine itself for multiple reasons:
- It will lower the barrier for new users, which will be able to try out the engine without the need to download anything.
- Any modification towards reaching that goal will also improve the HTML5 export itself (given that the editor is made like a Godot game).
- It will allow to use Godot in a reasonable way in environments where installing/downloading applications is not an option (e.g. schools’ computers and tablets), fostering the usage of the engine for educational purposes (which is something we, as an open source community, deeply believe in).
This DOES NOT mean that Godot will move completely to the Web, nor that the Web browsers version will be the recommended way for professional development, but it will be an additional option for cases where it might be useful (again, pick the education sector as an example).
To stress this out again: The good-old native editor will always be our main focus.
After this necessary preface, let’s get to the news: a Godot Editor prototype running in browsers is being presented at this address.
Note: As of this writing, this prototype requires a recent Chromium-based browser or Firefox Nightly.
This is a very early stage version, but it allows to run the editor (including the project manager), and make simple projects, while storing the files in either your browser local storage, or an external cloud service (Dropbox is currently supported, but not recommended due to speed limitations. In the future, standard WebDAV support will allow for more providers and better speeds.) See the "Known limitations" section below.
When opening the URL you will be asked how to load the engine, specifically, selecting the persistence support. There are 4 options available:
- None – no persistence will be used, you will lose everything when you close the browser or refresh the page.
- IndexedDB – will use the IndexedDB API to store your files. This is usually limited to 50 megabytes on desktop, and 5 megabytes on mobile (this is the RECOMMENDED storage type for now).
- Dropbox – will store your files in a Dropbox folder, created specifically for the test application. You will also be able to upload files directly to Dropbox and they will be available in the engine (after refreshing the page!). This is a very powerful tool, but is currently quite slow, both when loading and saving (it will need to download the whole folder on startup, and changes will be stored asynchronously). Improvements in this area are much needed, and Dropbox support is provided as a proof-of-concept for now and in no way recommended. Cloud support (via standard WebDAV) will in time become the preferred way to use the web editor. Note: At the time of your reading, Dropbox support might not work due to limits in terms of maximum number of users.
- FileSystem API – will use the new Web FileSystem API, which could potentially expose native file system support in the future, if browser vendors agree on a safe way to do that. This is, again, provided as a proof-of-concept and browser support is very limited for now.
You can also opt to preload a zip file to the chosen virtual file system, allowing you to quickly test demo projects and load your offline projects inside the editor browser. Once the project manager starts, you will need to scan the virtual file system for new projects via the “Scan” option when preloading a zipped project. The editor config with the available projects list and other options will be stored according to your persistence method.
Once you have imported a project, or after creating a new one, you will be able to edit it, create new scenes, create new scripts, and upload assets via drag and drop. You will also be able to run your editor project inside the editor via the play button. Extra HTML UI allows you to close the game and the editor, and switch between them.
As stated above, this is a very early stage prototype, and there are some known limitations:
- SharedArrayBuffer support is still limited among browsers. Recent versions of Chrome will work, as well as Mozilla Firefox Nightly builds (the beta and stable versions don’t have SharedArrayBuffer enabled yet). Other browsers are untested.
- Importing and using audio assets is still not well supported (and may cause a deadlock prompting the browser to ask the user to stop the script).
- Closing the project manager and game the via the HTML UI works, but closing the editor might deadlock and will always cause a memory leak.
- Sometimes refreshing the page when an error occurs is not enough, this is mostly due to browsers not clearing WebAssembly memory correctly. You might find yourself in a situation (after many realoads usually) where you have to open a new browser window/tab and visit the URL again for the editor to be able to run.
- The debugger connection between the editor instance and the running game does not work currently, so output or errors will not be raised in the editor. They are however accessible from the browser console.
Getting this far required quite a bit of time (I've been working on it since February), but a lot of this work will greatly improve the HTML5 export too. Here are a few nice things that you will see in Godot 4.0:
- The exported game can now exit properly, calling will work as expected in HTML5 exports, freeing up the memory in the user machine (this could for example be useful if you present more games in the same page, and allow the user to switch among them, so you don't have to reload the page to free up memory).
- Files drop support. The user will be able to drop files in the game window, and you will get them available in the game via the signal
- Thread support! The HTML5 plaform will finally support the class.
- Simpler JS code that gives you more control over the game lifecycle.
- Safer and smaller JS code, via Closure Compiler to better minify the required JS support code.
There are still quite a few improvements that I will work on in the HTML5 platform, some of which will also benefit other platforms. Here is a sneak peak:
- Virtual keyboard in the HTML5 plaform, for working text input in mobile devices.
- Persistence support, WebDAV integration.
- Gestures for the editor, allowing using the editor from touch devices (this will also be beneficial to make native Android or iOS versions of the editor for example).
- Better HTML5 Audio support, trying to offload audio processing (e.g. effects, mixing) into a separate thread.
- GDNative support in the HTML5 platform.
- Easier interface to external JS libraries (expecially asynchronous ones), so you don't have to rely on complex .
The prototype branch (still based on 3.2).
PR that forward ports most of the changes to branch.
The game engine you waited for.
Godot provides a huge set of common tools, so you can just focus on making your game without reinventing the wheel.
Godot is completely free and open-source under the very permissive MIT license. No strings attached, no royalties, nothing. Your game is yours, down to the last line of engine code.
A different way to make games
Join the community and help create a game engine that belongs to everybody.
If you know how to code, and enjoy fun and challenging problems, you can help by fixing bugs or creating cool new features.Learn more
Documentation quality is essential in a game engine; help make it better by updating the API reference, writing new guides or submitting corrections.Learn more
Found a problem with the engine? Don't forget to report it so that developers can track it down.Learn more
You don't need to be an engine developer to help Godot. Consider donating to speed up development and make Godot Engine even more awesome!Learn more
Editor improvements for Godot 4.0
By: Juan Linietsky 29 March 2021
If you are following me on Twitter (where I post my progress on different Godot features I work on), you might have noticed that I took a two month break from rendering to work on many long standing editor improvements and features.
While I am far from being the only contributor working on editor-related tasks, I put together a list of everything I have been working for the past two months!
Improved Subresource Editing
With the new inspector in Godot 3.1, a lot of new possibilities opened, including the ability to open sub-resources in the same inspector tab. Before this, users had to go back and forth in the list of properties of each sub-resource, which was very confusing.
The new inspector worked well, but on the visual side we never really managed to nail how to deal with sub-resources. After asking the community for help and ideas, some work as put into it which hugely improved usability.
The final version does a bit less color shifting by default so it's a bit more homogeneous. Also, the new layout makes it much clearer where each subresource begins and ends.
Improved and reorganized Project Settings
The Project Settings dialog has seen a makeover. The categories have been reorganized to make more sense and reduce bloat and a new "advanced" mode has been introduced.
This new mode removes most project settings other than the basic ones to ensure that new users don't feel overwhelmed by the huge amount of options and flexibility and can learn their way through the most important customization options available.
Once confident enough, the "advanced" tab is set, which allows for editing of the rest of the settings as well as the extra customization options.
Once enabled, the "advanced" setting is remembered for the current project.
Improved Process/Pause mode
While not entirely an editor feature, Godot 4.0 unifies the process and pause settings into a single menu. This allows for disabling of nodes in a tree fashion. This was one of the most user-requested features, as Godot allows for easily hiding nodes but not disabling them.
Additionally, as can be seen above the scene tree editor will show the disabled nodes in a more grayed out fashion.
Preview Sun and Sky
Another very requested feature was also implemented, which is the ability to have a preview light and preview sun in the 3D editor. The new dialog was created mainly with two goals:
- Allow to have a quick frame of reference regarding to lighting when importing or editing 3D scenes stand-alone.
- Give new Godot users the ability to visualize their assets with a default set of high quality settings, as it is always a common source of confusion that, when just imported, assets look too plain in Godot.
As these settings are only meant for preview, they won't be visible when running the game but both have a quick way to create the actual nodes based on these settings with just a button press at the bottom.
When either nodes (DirectionalLight3D or WorldEnvironment) exist in a scene, the preview setting also disables automatically, ensuring consistency and ease of use.
Default Importer Settings
Another common problem Godot users run into is that setting default values for certain types of imported assets was confusing. This is resolved by the new "Default Importer Settings" tab in the Project Settings dialog.
Thew new tab allows to precisely customize importer options for each type of resource. This feature was also back-ported to Godot 3 and will be available on the upcoming Godot 3.3 release.
New 3D asset import workflow
Importing 3D assets was a hit or miss experience in Godot. Import options were limited to a tiny "Import" menu that attempted to do too much and fell short.
The new importer has an "Advanced" mode, which allows to precisely customize every individual node, mesh, material and animation.
Additionally, handling of external assets was re-thought. In Godot 3.x, assets are simply saved to file by name, which can be very confusing or create chaotic situations when overwriting files.
In the new importer, this process is done via manual steps, so the user has more control on which assets are moved to external files, which paths are used, etc.
As a result, it's more obvious where everything goes and what's happening during the import process.
The new system also solves the problem of assigning external materials to replace the ones in the imported file in a very elegant way, allowing to either make the materials that come with the asset external, or just replace them by existing external ones.
Ability to "keep" files
Often, users would prefer that Godot does not import some files (like PNG, CSV, etc) and deal with them manually during the game run-time.
This is now possible with the "keep" option. When selected, the assets will be kept and put in the game export "as-is".
Another very common problem users face in Godot is the long time it takes to import large amounts of images. To aid this, the new importer has been reworked to operate using multiple threads.
This results in a performance improvement of over ten times (if you have a modern computer with multiple cores).
With the editor work done, I will now go back to working on rendering for the next month to finalize the missing bits and pieces pending in my TODO list. Afterwards, it will be time to start working towards our first Godot 4.0 alpha! And again, remember we do this out of love for you and the game development community so you can have the best possible engine we can make with the same freedom as if you made it yourself.
If you are not, please consider becoming our patron!
.5 Godot Editor Pro Tips
- Pioneer elite vsx
- Homebrew potions 5e
- Westerville bike trail map
- Marshall amp input jack replacement
- Jessica whitehorse
- Pink lamp shades
- Craigslist ky com
- Smiling is charity
- Care bear wonder heart
- Tropical blue wallpaper