You open it and play
All my games are web pages. There is no app store, no installer and no waiting for a huge file. You click an address, the game loads, and a moment later you can place buildings or run your own venue. It works on a computer, a tablet and a phone, and the game adjusts to the size of the screen.
Why do it this way? First, I am a one-person studio and I make games in my spare time. I can show one version of a game to everyone at once instead of building it separately for every system. Second, it is convenient for the player: nobody has to ask a parent for permission to install, there are no updates to approve and no phone storage to free up. When a new version comes out, you just open the page and you have it.
A 3D world in the browser
The games are in 3D, and browsers can draw such pictures today thanks to a technique called WebGL. I use the Three.js library, which makes it easier to put a scene together: terrain, buildings, little people and weather. The game code itself is written in TypeScript, a language that is turned into plain JavaScript before it is sent to you.
A strong computer can handle full splendour, and a weaker phone gets a lighter version. The games have quality settings, and in some of them the game can lower the detail itself when it starts to slow down. The characters, for example, come in two versions, a richer one and a lighter one, with the same shapes.
Add the game to your home screen
A game in a browser has one drawback: on a phone, the browser bars take up space. So each of my games carries a description that lets the browser treat it like an app. Once added to the home screen, the game gets its own icon and name and starts full screen, without the address bar and buttons.
The games have a small window called “Play full screen”. It appears once after your first playthrough, and later you can find it in the menu. It explains things step by step:
- On an iPhone you open the game in Safari, tap the three-dot button at the bottom of the screen, then “Share”, choose “Add to Home Screen” and finally “Add”.
- On Android, many browsers show an “Install the game” button, and one tap is enough. If it is missing, you open the browser menu and choose “Add to Home screen” or “Install app”.
The window shows up only where it makes sense, which means on a phone or tablet, and only if the game is not already running as an app. You will not see it on a computer. I make the phone icons automatically from a single drawing of the game, because the iPhone does not like icons in the format I draw them in.
One important thing: after you add the icon, it is still the same game. Saves are kept in the browser's memory on the device, so if you notice that your old saves are missing when you start from the icon, syncing with a short code will help. I describe it in a separate article.
Can you play without internet?
Yes, to a large extent. Every game has a small helper program that runs in the background of the browser, called a service worker. The first time you open the game, it remembers the game's files in the device's memory. Later, when there is no internet, the game starts from that memory.
Two rules I follow:
- The game's main page is fetched from the network when a network is available, so you get the fresh version straight away. When there is none, the game uses the remembered copy.
- The other game files are remembered for good and change only when a new version comes out.
All my games live under one address, so they have to look after one another. Each game cleans up only its own cache and leaves the others alone. Otherwise one update could wipe the offline mode of the other games. I check this whenever I add a new game.
What will offline mode not do? It will not link devices or send a save to another device. If you use sync, saves wait in a queue and are sent when the internet returns.
Full screen and everyday comfort
Besides installing, there are everyday things I take seriously. The games need no accounts or logging in. The menu in each game looks similar: the same ☰ button, the same order of items, and Esc closes a window. That way, once you have learned one game, the rest feel familiar.
I also have a rule for small phones. On the smallest iPhone the playing field should take up at least half the screen, even with the build bar open. Any overlay, such as the tutorial, can be hidden with one easy tap. Buttons you have to hit with a finger are at least about 44 pixels, because smaller ones are simply annoying.
Touch controls
A game on a phone cannot be a mouse game with a few buttons added. That is why the texts in the games have separate versions for touch. Instead of “right-click” or “press F1”, the game tells you what to do with your finger.
The rules are shared:
- One finger moves the view. The map works like a sheet of paper under your finger: you touch and drag, and whatever is under your finger moves along with it. That sounds obvious, but in one game I once had it reversed and the map ran away from the finger, so I fixed it.
- Two fingers zoom and rotate. You spread your fingers to zoom in, and twisting with two fingers turns the camera. There are rotate buttons too.
- A tap selects or places. You mark an area with two taps on the corners, or with a long press.
- Big, round buttons for rotating an object, undo and redo sit close to your thumb.
If you prefer it differently, you can switch touch controls on or off in the settings. On a computer the mouse and keyboard work, and the arrow keys move the camera.
What next
What matters most to me is that a game starts fast and causes no trouble. So I check every change on a small phone with touch, on a tablet and on a computer. If I find something that works on only one device, it is a bug to me. If you run into one, write to me.