Godot Editor in a web browser


Godot Editor in a web browser

By: Fabio Alessandrelli

Hello Godotters! Fabio here! The last couple of months have seen me work hard on something big for Godot. It’s a HTML5 editor.

This doesn’t mean that we will be able to move entirely to the Web in the same way other engines have. The native editor will still be available, but it will serve as an alternative to this option. This is to reduce the entry barrier. Please allow me to explain.

Justification

Godot Engine can export games to the HTML5 Platform (i.e. browsers. It should be possible for the editor to also run in browsers, as it is written with the Godot Engine api.

Because of some limitations in older browsers, the editor was not able to be run in them up to now. This included file system access and threading support.

The WebAssembly and WebAssembly threads have been added. It is possible now to enjoy a nearly native user experience while running an editor on the Web with the Native API.

For multiple reasons, this will prove to be a benefit in many different ways.

  1. It will reduce the barrier so that new users can try the engine without having to download anything.
  2. Any modification to reach that goal also will improve the HTML5 export itself (given the editor’s role as a Godot Game).
  3. 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, encouraging educational use . This is something we strongly believe in, as an open-source community.

While this does NOT mean Godot is moving completely to the Web nor will the Web browsers versions be the preferred way of professional development, it could be useful in certain cases (e.g., the education sector).

We want to stress it again: The old-fashioned native editor will continue to be our primary focus .

Now let’s talk about the important preface: is a Godot Editor prototype running in browsers. It will be presented at .

Notice: The prototype needs a modern Chromium based browser (or Nightly) as of the time of writing.

It is a first-stage edition, however it is capable of running the editor, including the project manager, and storing files either in the browser’s local storage or external cloud services. Dropbox is currently not supported due to limitations on speed. The standard WebDAV feature will be available in the future. It will support more providers with better speeds. Refer to below for the list of “Known limitations”.

Utilisation

After opening the URL, you’ll be asked how to load it, and specifically which persistence support. There are four options:

  • No persistence will ever be used. Everything will disappear when the browser is closed or the page refreshed.
  • IndexedDB– This will use the IndexedDB to store your files. This storage is typically limited to 50 Megabytes for desktops and 5 Megabytes for mobiles (this is currently the RECOMMENDED storage option).
  • Dropbox– Will store files in a Dropbox Folder, specifically created for testing. You can also upload files directly through Dropbox. They will then be accessible in the engine after refreshing the page. While this tool is very powerful, loading and saving files is quite slow. The engine will have to download all of the contents on startup. Any changes made will be kept asynchronously. There are many improvements needed in this area. For now, Dropbox support is just a proof of concept and not recommended. Standard WebDAV will soon be the best way to access the cloud editor. Dropbox support is not available right now due to restrictions on the maximum number of users.
  • FileSystem API– This API will utilize the Web FileSystem API. It could be possible to expose native support for file systems in the future if the browser vendors are able to agree on a secure way. As a proof-of concept, browser support is not available at this time.

A zip file can also be preloaded to the virtual file system. You will have the ability to load demo projects into the editor browser and to run tests. After the project manager has started, you’ll need to scan the virtual folder system for new project files using the “Scan” option. You can store your editor configuration, including the list of available projects and additional options, according to how you persist.

The project’s editing and running

Editing a project after it has been imported, or creating one from scratch, will allow you to create scenes, edit them, make new scripts and drag and drop your assets. Your editor project can also be run inside the editor by pressing the play button. You can also switch between editor and game by using additional HTML UI.

Limitations that are known

It is an early prototype and it has limitations.

  • SharedArrayBuffer support has been limited by browsers. They will support Firefox Nightly and Google Chrome . SharedArrayBuffer is not enabled in the beta or stable versions. Others browsers have not been tested.
  • The importation and use of audio assets are not supported. It may result in a deadlock that prompts the browser to ask users to end the script.
  • You can close the project manager or game via the HTMLUI. However, closing the editor could cause deadlocks and a memory leak.
  • Refreshing the page when there is an error can sometimes not be enough. Most likely, browsers are not clear WebAssembly Memory correctly. After many reloads, it is possible to find yourself in a position where the editor cannot run.
  • Because the debugger connection between editor and running game doesn’t work at the moment, print() out or errors in editor will not be raised. However, they are available from the browser console.

All work done to date

It took me a long time to get this far (I worked on it since February), but I am confident that this will help greatly with HTML5 export. You will be able to see some nice things in Godot 4.

  • Now the export game will exit correctly by calling get_tree(). This frees up memory on the user’s machine.
  • Files drop support. User will have the ability to drag files from the browser window into the game. You will then be able access them via the file_dropped signal
  • Support thread! The HTML5 platform will now support the thread class.
  • Rudimental Operating System.execute Support has been added to HTML5 export. This allows you “catch” the call using JavaScript code. This allows you to change between the project manager/project editors and the game to be run.
  • Code for JS Engine is easier and allows you to have more control over your game’s entire lifecycle.
  • Closure Compiler makes it easier to generate smaller JS code.

Stay tuned for more

I am still working on a lot of improvements in the HTML5 platform. Others will benefit from them. Let’s take a look at this sneak peek:

  • The HTML5 Plaform has a virtual keyboard that allows you to input text on your mobile device.
  • WebDAV integration, persistent support
  • The editor can be used from touch devices by using gestures (the editor will work on iOS and Android, too).
  • Better HTML5 audio support. This is a way to reduce the processing of audio (e.g. effects and mixing into a separate thread.
  • GDNative support for HTML5 platforms
  • Interface to other JS libraries is easier (excepting asynchronous), and you no longer need to rely upon complex JavaScript.eval.

Bibliography

A prototype branch, still based on the 3.2.

PR which forward ports the majority of changes to Master Branch.