Game thing progress #11, something I never thought I could do

Greetings! It hasn't been that long since the last time, though can't say I've been busy most of that time. Some work is happening for day 5 of the game, but it's not finished yet. It might, once again, be more walking content than all the game combined before, and that does take time. Though on that front I've been somewhat lazy, there is some stuff. But that's not what this post is about, this post is about something I thought would be too complicated to actually do in a reasonable amount of time, but turned out to only take about a week and a lot of patience. That thing is making the game work in the browser.

Now, originally I developed the whole thing using SFML, then I changed the sound system to use SDL, because SFML's sound system did not allow me to statically link in different sound formats or disable the ones I do not need. With SDL, this was possible quite easily.

Since then, I've tried a few times to make the game run in the browser by porting SFML to the browser, but that turned out to be too much for me, since it's a rather complicated library and I'm not particularly good with graphics programming, plus it uses a lot of old GL features not available in WebGL. But there's another multimedia library that has a lot of features but, unlike SFML, can run in the browser. That library is SDL, the one I previously used just to have sounds.

Over the span of about a week, I've replicated the visible interface of SFML that I use, with exactly the same names, with small changes in some places where it was easier to change it than to make my interface compatible. Inside that interface everything actually runs on SDL, or rather SDLgpu, which is a library that allows to easily use shaders with SDL. That way, I didn't have to change most of the actual game code, while getting the benefits of SDL, particularly running in the browser and modern OpenGL/GLSL versions, though I use them rather sparsely since I'm not too good at it.

Particular pains were caused, as usual, by emscripten, which is a library used to compile C++ to something web browsers can run. It's very finicky to get things working there, and you have to turn on a bunch of different compilation flags, change your source code a bit, add some conditional compilation directives where things work differently in the browser. Thankfully, this was not actually my first time porting native games to run on emscripten, there were two other games before, one running OpenFL (written in Haxe programming language), and the other one was actually running SDL, which came in handy a few times, because I already knew what to do since I've done it before. The games themselves shall not be mentioned, I'm sure you'll find them if you know where to look.

For the save system, I've opted to use the "IndexedDB" feature of browsers, which through a library provided by emscripten allows me to save files there like they were actual files on an actual filesystem, and load them on game start afterwards. Though this does not work in private browsing mode, I don't find that too much of a concern for now. I may add a way to export the saved game to a file at some point.

Another source of concern was the fact that when run on itch.io, the game is embedded as an iframe, which causes problems with getting keyboard focus. After a while I figured out that if I add a "on mouse released" event handler to the canvas and make that focus the canvas, it works fine, though I have no idea why this isn't the default behavior, obviously I want to focus it if I'm clicking on it, right?

Anyhow, the game works pretty much in the same way as before, except it runs in browser now. I've also ported my other game (also linked at the end of the post) to this updated version of the engine, and it works rather well. I've turned the resolution change button off in the browser, since it doesn't make much sense, and I've been thinking about maybe implementing some way to change the resolution better instead of the current way of 3 hard-coded resolutions, but I haven't found a good way to do it yet.

So, if you'r reading this, you can now play both games in the browser, so go do it, alright? And thank you for reading my blog post!

Comments