Web player screen resolution

Hi everyone! My turn to write something on this here interblag, and, since I'm me, it'll be a little techy: we're gonna talk screen resolutions.

---

This story started when one of our friends suffered through our game while having to scroll up and down continuously, because the web player window was too big for her laptop screen. Unfortunately, our budget does not currently allow us to solve this problem by sending everyone free giant monitors, so I spent some time making sure our game looks good at a variety of screen resolutions. In general, this comes down to three things:

• Deciding on a minimum supported resolution
• Making sure everything fits at this minimum
• Gracefully handling higher resolutions, and if possible, lower ones as well

To decide on what minimum resolution we would/could support, we had a look at the very handy Steam Hardware Survey. Here, we found that 1024x768 and 1366x768 together make up over 20% of the machines on Steam, so we decided that 1024x768 would be a good minimum resolution to target.

Fitting everything in wasn't too bad, if a tight fit for some dialog boxes. And hey, limitations breed creativity, so it's good to restrict Willem in how much text he can throw at you in a single screen ;-) If your screen is bigger, the dialog boxes won't fill as much of the screen, and if it's wider, you get to see a bit more of the scenery.

By default, Unity's web player plugin is set to a fixed size. For small monitors, this may be too large, so you're forced to scroll your browser window up and down to see the whole game, as was the case for our friend. If you have a huge monitor, it'll fit, but you're looking at a postcard sized game in the middle of a sea of nothingness. It was easy enough to switch that to a relative size - now the web player always takes up the full browser window. If your monitor meets our minimum supported resolution, all will be well, right?

Well... There was one oversight: your browser also takes up some space with its title bar, address bar, etc. Not a problem for big screens, but small screens really need all the space they can get. However, we don't want to force the game into full screen, so the game just shows you a warning if the window ends up smaller than the recommended minimum.

Full screen mode
Upon adding the full screen mode, we ran into another, unrelated problem: it would use a much lower resolution than your screen could support. This thread over at answers.unity3d.com had the answer: when switched to full screen, the web player chooses its resolution by picking the smallest of these:

• your native screen size
• the size set in your build settings for the standalone build

It's rather counter intuitive that the web player would be dependent on the standalone build's settings, but there you go. The quick and dirty fix, then, was to set the standalone build to some outrageously high resolution, like 8000x6000. That way, the web player always switches to your primary display's native resolution - exactly what we want!

Failing gracefully
So what if someone still tries to play the game at a lower resolution? After deciding on a minimum resolution, I had set a fixed height for the dialog windows, which caused a really bad layout problem on lower resolution screens: the dialog reply buttons would fall off the screen, leaving the player with no clue they could even do anything, effectively killing the game for them at the start of the first mission. Now, if you play the game on a low resolution screen, the game will squish everything into the available height, so you can at least see what's going on.

There you go - my first blog post! A bit on the overly detailed side, but maybe the information will come in handy for someone. Not sure what I'll write about next - I'm mostly inclined to talk about the technical/coding aspects of Powargrid, so let me know if there's anything you're interested in!

Happy hacking,
Michiel