Creating webapps using a game engine

Did you ever expect that it would be possible to write web applications with a game engine? The idea never occurred to me until recently and it is more powerful than I imagined.

Why?

So what's the deal.. a reader of my previous articles might know I started developing qCPT (software for cone penetration tests) a while ago but it keeps bothering me to write software that has to be installed on the users system. I expect that a lot of software will be ported to the web and I should be prepared for that. But I hate web development.. it's awful (for me).. css, javascript, debugging in the browser.. no real IDE that will help me.. so I tried multiple things like Python with Flask, Angular etc etc and managed to finish some apps but I still do not like to work that way.

Meet Godot!

I always liked game engines and because of that I often visit this website https://gamefromscratch.com/ with great videos and news feeds. He often mentioned Godot and last weekend I looked into this (free and open source) game engine. To my surprise the developers of Godot were busy porting their software to the web using their own engine.. this was interesting!

After a little more reseach I found out that more people use Godot to write software instead of games. Writing software with Godot is one thing but Godot has an export option for all the stuff you write to different platforms.. including HTML5.. which makes it great for webapps.. yeah!.. nice..

So there are the ingredients that filled up part of my weekend.. to see if it is possible to write a CPT viewer using Godot and exporting it to the web.

Part 1, experience with Godot to write software

User interface

The user interface (UI) of Godot is off course meant for game development and very user friendly because you can drag and drop all the needed components. It is actually quite easy to create the UI for your software / app. Since games often require UI's as well (like the start and end menu) Godot has a large set of widgets including menu buttons, panels and even file dialogs.

Setting up the UI for my testapp was easy thanks to the layout options that are available. It is not as convenient as -let's say- QtCreator but to be honest if you start from scratch you will probably be as efficient in Godot as QtCreator because both have its flaws and strengths though I am sure that Godot will take more time for complicated UI's and off course lacks specific UI elements (like a chart) that other UI libraries might have. You will have to build them yourself (or stroll down the plugins lane of Godot.. maybe you are in luck).

part of the IDE to create your user interface

Coding

Godot has a built-in code editor which is great. It offers autocompletion, debugging and easy code navigating. The only thing I had to do is change the default font size because it can be quite big and you cannot remove all panels outside the code editor because you need to access them as well. Buy a big monitor ;-)

So how does it compare to QtCreator which I use a lot. It's no problem.. it has all the nice options (mini code browser, method filter etc). The only problem I had was the debugger. It does its job but it also jumps to empty lines which is a bit funny and the amount of info you get from the debugger is less than that of QtCreator. So it is more limited but it didn't slow down the development of my code.

the IDE using the code editor

GDScript

Godot uses the GDScript programming language and one thing should be noted.. GDScript != Python eventhough you might be tempted to think so. It is however a very easy language and very close to Python. Many times you can try to use a function that you know will work in Python and it will work in GDScript.. unfortunately not always so be prepared to read the docs.

The most important mindf*ck for me was to realize that each script is a class. This takes a bit of time to get used to but once you realize this simple concept it is fine.

It was easy to convert some Python code I had to GDScript. It will take time to get to know the available classes and functions but it is much easier to go from Python to GDScript then to -for example- Rust which I have used recently. So if you know Python, it will help!

Part 2, experience with Godot to build software

Once I got the hang of GDScript it was quite easy to write a simple app. I just wanted the user to be able to select a file from their filesystem and show a simple chart. The most difficult thing was to find out which object to use for drawing and how to overwrite the function that is responsible for drawing. Fortunately it turns out that the Godot documentation is excellent so a little search gave me the answer I looked for

Godot documentation - custom 2d drawing

After a couple of hours, mainly spent on getting to know the UI and GDScript I was able to get the app working on my system. I simply used the Play button and got what I expected..

Yeah I know.. not too beautiful.. no header, no legend, etc.. etc.. but that was not what I was here for. I wanted to use a game engine to write software and I did. But here's the magic..

Part 3, experience with Godot to build and deploy a webapp

There is nice button in Godot showing the HTML5 logo.. which -after installing some dependencies- should create a webapp out of your code. So I pressed the button and indeed.. I saw the exact same user interface in my browser!

Alas.. things were a bit more complicated. I could only upload files from a virtual filesystem and there was no way to access my local drive. Now, I can get very theoretical about this but it turned out that the FileDialog object in Godot restricts access to the users filesystem. Great, but not for me.. so I spent a couple of hours to find a solution which I did.

The Godot community is really nice and helpful and after posting my problem to a discord channel I got a link to software (Pixelorama built with godot) that enabled users to upload file from their filesystem in the webapp.

Pixelorama - built with Godot a link to a great example of how complex software built with godot (and running in a webbrowser!) can be..

Since the app was open source I managed to find the code responsible for the upload (which was in fact a plugin for Godot) and it made use of Javascript within GDScript. I managed to adjust the code to my needs and now my webapp also enables users to upload files from their computer.

running the app in Firefox and uploading a local file

For me this is magic.. this means that I have found a way to convert my software in a fun and easy way into webapps. Yes, I realize that it looks ugly and it will probably crash on wrong files and the quit button has no usage etc. etc. but these are minor problems compared to the possibilities of writing your code once and after that be able to export it to something running on a PC or on the web or even on a mobile phone. I loved QtCreator for being able to be platform independent but Godot also compiles to a web application without all the need of normal web development. I can even upload it to itch.io and get it running for other users (be nice, no error checking and limited gef reading capabilities).

The app on itch.io

Overall idea and experience

After trying out Godot for this simple app I think I have found a way to build webapps that will work for me. The code might not be as intuitive as using Python or C++ and the IDE might not be as slick as VScode but the added web export is worth it. There are still many things to check like does it connect to databases, can I run python scripts from GDscript, does it lack essential UI elements and how much time will it take to build them, but I will find out in time. For now I will be porting part of my existing Python code to GDscript because there is an amazing object in GDscript which enables users to use visual scripting and this is exactly what I want for my modular levee assessment system. It would be great if this makes life easier than my current node-red bindings.

Apart from the visual scripting options it will be great to use the excellent 2D and 3D visualization options of Godot.. it is a game engine after all!

So I am looking forward to enhance the CPT app to make it look a little nicer and with a 3D interactive view of the correlated soil layers :-)

To be continued...