Behind the Scenes: Adventures in Responsive HTML Game Design from a Non-Web Developer

So, a question I get a lot is “why isn’t your game on the app store?” 

This is a very fair question. ChoiceScript games are easily accessible through the app store if they are published with Choice of Games or Hosted Games; many VNs have an app version or were designed specifically to be played on mobile. Outside of that, a lot of people read on their phones, whether it’s the news or eBooks or fanfic, or any number of other things. It might seem a little odd from the outside to make such a text-heavy game and not make it available as an app. 

When I was starting out, I don’t think this even occurred to me. I personally don’t use my phone for much (the dry eye is real), so thinking in terms of mobile development just wasn’t in consideration. When I first started, any mobile compatibility happened because it was built into the base SugarCube template. This, of course, meant that as I added more and more stuff on top of it, the less mobile compatible it became. I remember there was a time when the game would only present itself in landscape mode, which made it pretty awkward for mobile players who preferred playing and reading in portrait mode. Eventually I hit a point where I needed to learn at least a little bit about responsive web design and try to make Wayfarer has compatible on both mobile and PC as possible. 

This has been… a challenge. I am not a web developer and I don’t have a background in web development. I, quite literally, do not know what I am doing and I am making it up as I go along. : ) 

While I do rely a lot on the responsiveness that is in my UI template, but like with the default SugarCube UI, I have also had to adjust things as I added more features to this one. I really did not understand media queries or a number of other CSS things that would obvious to a web developer—I was trial and erroring my way through making something that was (hopefully) readable regardless of the size of your viewport.

There are some consequences to this: the game definitely looks better on PC since it was designed for PC first and mobile second (which is kind of a no-no in web development, as I’ve come to understand—so much is mobile now, it’s generally smoother to develop your design ideas for mobile first and then for desktop). While I think the base game looks pretty good, the Journal, Codex and other menus still need some work. There’s sizing issues with icons, I’m not happy with the placement of some elements. And of course the menu selection on mobile is really, really small (I know! I know! It's a lot of stuff to squish into that box!)

It’s not easy to take something that fills a full screen and squeeze it down into portrait mode and still have it relate all of the necessary information without losing out. 

There’s also some weird moments where on some small viewports the companion/faction cards are very small, and then you go a step smaller and boom, they’re big again. I know why it is like that, but can I fix it? Um. Not right now. 

(Related to this—there is an error in the stylesheet when it comes to the media queries for small viewports and “extra small” font is larger than “small” font. This is another case of I know why it is like this but I can’t fix it easily without messing up something else or confusing myself.) 

But to answer the question of “why isn’t your game on the app store?” Wayfarer is a HTML game, and there’s a lot of really good stuff that comes out of this—namely that is accessible across all kinds of devices. As long as you can run a browser, you can play the game. For now, I am happy with the system I have and playing the game through the browser. It would add too much to my workflow to package it as an app and get it on the app store while it is in development. Eventually, of course, I would like to make it available as an app and on Steam, but there is no point in pursuing that until it is finished.