Welcome back to WebUrbEX my Godot project where you explore the retro internet.
If you’ll remember, last time my game looked like this:
Well, now it looks like this:
I mean… now that I put them side by side, not that impressive a leap. Aesthetically, almost good for web1.0 feels but with some bits of godot tab ui breaking the art style that I can’t seem to shift. But under the hood, it’s doing a lot of stuff to put that all together.
To be completely clear: I am not a webdev. I (probably) understand most of the basic principles but the only couple times I’ve touched website code since school IT classes have been just to fix up the occasional wordpress hiccup. That being said I’m going to try to talk about how the new websites in WebUrbEx work in relation to how real websites work:
IRL Websites are made out of pages written in HyperText Markup Language, aka “words with <tags> around them</tags> that tell the internet whether the words are formatted or bright magenta or have text that appears if you hover over them. Markup can also point to other content on the site like image files. If you’re of the age to have recieved the same IT education I did (which was already ancient by the time I got it) you’ll probably have made some HTML “website” in notepad that eventually devolved into just being the word fart in bright blue blown up to take up most of the screen.
Godot’s UI text elements can parse BBCode, a markup language developed for forum users in the 90s. the syntax is a little bit different, it uses [square brackets] rather than <inequality symbols>, but otherwise it can do all the font-formatting and coloring we need. It can even embed images in the text elements… kinda.
OK great, so that means we have all we…
Ah… yes. That thing.
If you feed html directly into a web browser it kinda has to guess at how to display it… and normally it falls back to “like a colorful word document”. CSS is more elaborate instructions for the browser on how to arrange the site when displaying it. In short: this looks like a column of text next to the CSS3 logo because the CSS style sheet file for wordpress says “put two WordPress Column blocks next to each other when displaying them”. It does a bunch of other stuff too like setting or overriding defaults.
If you view the source code for a site (use the shortcut Ctrl+U) you’ll see a bunch of <div> tags that break the site up into chunks. The site’s CSS scripting interprets that to arrange it in a fairly consistent way, and can be shared between different HTML files.
Godot organises its UI using container nodes in its scene tree, each that organises ui elements under them in a certain way It’s a fairly robust UI system, probably one of the nicest I’ve worked with in a long time. While you can make your own scenes in advance, I want a system that can load sites from a couple of files rather than needing to make a scene file for each site. Fortunately you can build up a scene tree at runtime in code using gdscript or C#.
OK so let’s say I want to make a “website”. I write a text document with the markup in BBCode and the style sheet file in C#, maybe some pngs too if I’m feeling fancy. All good for if I’m hardcoding it into the engine. But I kinda want to make this open to the user, and it also doesn’t solve the issue of clogging up my resources directory with the files for all these websites.
Ideally I’d want something that loads in the content/markup externally, and both Godot and System.IO have tools for loading in external files, so we can load in the markup from a plain text file at runtime and that works. It also has tools for compiling gdscript at runtime, so we can load in our equivalent style sheets too… but… gdscript isn’t just in the engine to set up scene trees. It can code… everything. So loading in any gdscript file that can be provided by the end user is bad. Very bad. Catastrophic. Don’t Do That.
If I was a much crazier idiot here is where I’d reveal I’d written my own CSS or custom style sheet language interpreter… but that seemed like a lot of effort to put in before actually making any progress on developing things for the game. So forget style sheets, pretend you didn’t read the last 8 1/2 paragraphs of this article. Instead I decided to just set up one UI scene tree and force every site to use that format.
The format is pretty simple. The site asks the markup file to provide a Title, Tagline and sentence for the About tab.
Then it takes in chunks of markup between the custom tags [page] and [/page] and treats them as different pages of the same website.
Going through the markup, it adds each page into an “archive” list that shows up on the archive tab and allows users to flip between pages.
In somewhat of a nod to the idea of giving the user the ability to script how their website looks I also threw in the ability to read a file called “style.txt” that lets them specify some details like the default font sizes and colors and what order the archive displays in.
On top of supporting custom backgrounds it will allow using a preset one using the style options.
And that’s how to make something that can make a bunch of websites all of which look the same in Godot.
I decided to call this the Easy Web Archive Framework. I like the idea that in Lore, this is some kind of website building framework made by a bunch of bedroom webdevs to help other amateurs who aren’t webdevs (aka me) to put together gaudy looking websites about their special interests. One of the first websites I built was the site shown above that explains how to use it.
This might be a little basic looking for Y2K, definitely a lot less fancy than geocities sites could look, and I might push the date on the website backwards or forwards to indicate an earlier or later date of invention.
So yeah that’s what I’ve been up to over the new year. I’m not planning on releasing this to be played around with just yet because I want to improve on the browser so that it can search or go to the url of sites. At the moment the only way for me to get to a site is to set them up as an option under bookmarks, which obviously is neither scalable nor modding friendly. But once I’ve got that down I’m going to put this new version up on itch for people to mess around with.
I’m also planning on making some more advanced versions of EWA as I go along but keeping pages using the old versions in to show a progressing, dynamic “internet” in my game rather than one completely frozen in one period of time. Ideally eventually I’d want to make it feasible that someone could have made something looking like that comics website I showed earlier in a later version of the framework, with actual style sheets (I swear I’ll make something to script those eventually), gif support, ways to leave comments, ways to access sub-domains, right click download menus, etc.
Til next time, fellow sad oldies,
-Matt
Pingback: Making a search engine in Godot – Severalfighters