Monday, January 21, 2013

On Resolution and Fonts

I wanted to talk a bit about screen resolution and fonts today. A larger resolution and font has been one of the most requested features in NEO Scavenger, and it has come time to do something about it.

Where We Are Now

NEO Scavenger currently runs at 800x600 resolution. Back when I was first making the decision on resolution, I chose 1280x800, half my monitor resolution, so I could see full-screen with 2x scaled pixel art. Shortly after that, I switched to 1280x720 (720p), to better align with standard HD.

However, since NEO Scavenger was originally intended as a portal-sponsored title, I decided to scale it down to 800x600, using 1x scaled pixel art. It was a tough decision (I liked the 2x scaled look), but it made better business sense at the time. (Portals typically have an upper limit of 800 pixels for game width.)

Outside of the portals, though, 800x600 is a pretty restrictive resolution. And while NEO Scavenger can be played in resizable windows, the nearest-neighbor scaling can make things pretty ugly. So if players want to see NEO Scavenger in a larger format, what resolution makes the most sense?

User Statistics

Before deciding on a new resolution, I thought it would be helpful to see what most users have. Unfortunately, that's one statistic the in-game NEO Scavenger metrics don't track.

However, one benefit of running one's own storefront, and hosting one's own game, is that I have website logs to turn to. It's not as good as tracking that info from within the game, but it's pretty close. So I opened up Google Analytics to take a look:

Figure 1: Total Visits Sorted by Screen Resolution
Hm, that's not as clear-cut as I had hoped. The top 10 resolutions only cover about 57% of all users. Worse still, look at the lower right hand corner. That's right, there are 1336 different screen resolutions used to view! (Also, damn! Missed it by one!)

Ok, so it looks like we'll need to do some data-slicing and bucketing.

Aspect Ratio

What about aspect ratio? Overall screen size may vary quite a bit, but surely most are either standard (e.g. 4:3) or widescreen (e.g. 16:9), right?

As it turns out, between the various device types (LCD monitors, laptops, netbooks, tablets, phones, index spiders) and display configurations (portrait vs. landscape, single vs. multiple displays), there are ~400 aspect ratios in the logs.

Fortunately, this is their distribution:

Figure 2: Histogram of Aspect Ratios
In other words, only a handful of aspect ratios are in significant quantity. And if one looks closely at the values along the x-axis, many of these aspect ratios are only marginally different. So I ran some algorithms on the data to group things further.

First, I grouped identical displays with different orientations, so portrait and landscape orientations were combined (with the largest dimension reported as width). I realize this may not be perfect, since users who prefer their monitors in portrait mode may not be willing to rotate their screen to fit a wide game screen.

However, since NEO Scavenger is a landscape-oriented game, accommodating portrait mode on most monitors would restrict the game screen considerably. It's current width of 800 pixels would already break the limits on many monitors. Besides, I suspect most gamers will have a landscape orientation, as that's how most games are designed.

Second, I grouped similar aspect ratios such that there was a +/- 8% tolerance in the final aspect ratio value. For example, 1.7708 and 1.7778 would be in the same group, but 1.6 would not. Doing so reduced the spread considerably:

Figure 3: Histogram of Aspect Ratios, 8% Tolerance
Now we're starting to see some familiar faces. 16:9 is the HDTV ratio, used with displays that are meant for 720p (1280x720) and 1080p/1080i (1920x1080), as well as many widescreen computers and tablets (e.g. WXGA). 4:3 is the SDTV ratio, which was common in older televisions and desktop computers, such as 1024x768 (XGA), 800x600, 640x480, etc.

16:10 is also quite common in desktop displays, as well as many tablets. And 5:4 is a common ratio found in many non-widescreen LCD displays.

Five buckets is a much easier dataset to digest. And fortunately, the answer seems pretty clear: the vast majority of users (~80%) are on a widescreen aspect ratio.

Screen Size

So what about the actual screen sizes? Assuming I decided on a widescreen format, what size would fit the largest number of users' screens?

To answer this, I took the most common 16:9, 16:10, and 4:3 resolutions, plus a handful of other common resolutions from the top of the web logs, and calculated what percentage of users could display each size without cropping. Here's what I found:

Figure 4: % Users Supported at Various Game Resolutions
Again, it looks like we're pretty fortunate. There are 5 screen sizes that would each support 90% or more of my site's visitors.

480x320 is there because it was one of the top 15 screen sizes, but it's a bit deceptive. It's actually a common smartphone screen size (e.g. iPhone, BlackBerry, etc.), so it's not likely players of the game as much as web surfers. Furthermore, the number of users in this screen size only account for about 1% of all users. They just have a tightly-grouped bucket. Like I said, deceptive.

That leaves us with 800x600, 1024x768, 1280x720, and 1280x768. I'd really like to do a widescreen format, since the data shows that most users have that aspect ratio. However, both the 1280x720 and 1280x768 formats would leave ~10% of the site visitors with a squashed or cropped screen.

However, as I'm mulling over these values, a thought occurs to me.

Steam User Data

Each year, Steam does a hardware survey of its users, and publishes the results. And with over 6 million concurrent gamers at peak, that's a lot of useful data.

So I grabbed their screen size data, did some number crunching, and applied the same filters and sorting as above. Here's what I found:

Figure 5: Histogram of Aspect Ratios, 8% Tolerance (with Steam)

Figure 6: % Users Supported at Various Game Resolutions (with Steam)
First of all, it's good to see similar numbers. I can't say for sure if my calculations are accurate, but at least they're precise :)

Once again, we see that widescreen is a big winner. And in fact, the gap between 16:9 and 16:10 is more pronounced. Perhaps even more heartening is that the top two widescreen resolutions are more widely available to Steam users. Just about 95% for 1280x720, and 94% for 1280x768.

The "Right" Resolution

So what's the "right" resolution for NEO Scavenger? I'm leaning towards 1280x720. Knowing that widescreen is more widely supported than not, I'd prefer to chose a widescreen format. The question is, which one?

Of the widescreen formats, it seems 1280x720 (720p) and 1280x768 (WXGA) are the two most viable. 720p is slightly more widely supported than WXGA in both my and Steam's users, so that's one reason to prefer that format. 720p also seems like a more standardized format, since it is the HDTV standard, and many devices are designed to support it for that reason (tablets, consoles, projectors, etc.).

The main reason to go with 1280x768 would be to get the extra vertical real-estate. However, when looking up screen sizes, it occurred to me that many 16:10 devices are computers, and this extra vertical height might be a design response to the OS taskbar. It's possible that designing software for 16:9 still fits a 16:10 monitor better, since it leaves room for tabs or other OS UI.

I can also see that 16:9 outstrips 16:10 considerably, in pure aspect ratio terms. It would seem that no matter the reasoning behind 16:10, 16:9 simply has more reasons to choose it.

So, 720p it is.

What About the 10%?

Unfortunately, choosing 720p still makes life difficult for 10% of my users (or 5% if you judge by Steam's numbers). What about them?

And what about the Flash portals? I'm always saying how I'd like to publish NEO Scavenger's demo on portals for broader awareness. Won't this screw that up?

It does. And to the question prior: I'd like to support them too, if possible. So my current plan is to see if there's some way I can setup the UI to work in both 800x600 and 1280x720 modes. It's a daunting task, since the available real-estate is quite different. And it means storing either two different sets of coordinates and zoom, or else some sort of UI-scaling rules.

Neither are going to be trivial. But I think it's at least worth trying.

And What About Fonts?

Right, I mentioned fonts too, didn't I?

Fonts are another area that needs improvement in NEO Scavenger. More than a few users have complained of eye strain trying to read the tiny pixel font in NEO Scavenger.

I'd like to just bump up the font size, and be done with it. However, the font I'm using is actually a custom made one. So simply scaling it up won't make it clearer. It'll still be pixelated, because that's how it was designed.

I briefly started toying with 3rd party fonts, like Arial, Verdana, etc., but then the question of licensing popped into my head. I did some research, and for a moment, thought I was in the clear. Then I saw a comment that gave me pause.

So I did some more research, and then it seemed like I was in the clear again (search for the string "SWF" in that last link). Unfortunately, after an hour-and-a-half of this ping-pong, I was only learning one thing: font licensing is in a state of hell, and I want to have nothing to do with it.

My current leaning is to just eat the time cost and make my own font again, just for a larger size this time. The only thing that bothers me is that I don't want to "guess and check" a bunch of times if each time means designing a font. They don't take too long to make if you know what you're doing, but I can't afford to make 15 different fonts just to find out each doesn't look right.

So what I may do is use well-known fonts to gauge the size and style I want, then go make my own in the same style and size.


Lastly, a note about scaling. Whatever screen size I choose, it won't fit everyone's screen. So when the game goes to full screen, it won't always be a perfect fit. So I have some choices to make.

The first one is whether or not to scale at all. I think this one's a given. Some folks just want to zoom in, and see things bigger. So I plan to make the game scale up to fit the full screen, but maintain the aspect ratio, using black to pad the extra space. I'll probably also add an option to just leave it at 1x zoom with black bars at full screen, for those who want it (should be trivial to add).

The second is what type of filtering to use. Up until now, it used the default flixel nearest-neighbor filtering. This type of filtering produces clean, crisp images when zooming in whole increments (e.g. 2x, 3x, 4x). However, fractional zooms (e.g. 1.5, 2.1) produce horrendous artifacts. This is likely the source of many font complaints so far.

I could switch it to use bicubic (or similar) filtering. This would make things look smoother when scaled, but would also introduce blurring. I opted not to do this originally because it's usually better used on photos than pixel art.

However, it may be an improvement over nearest-neighbor if I am to allow non-integer scaling of the game (which is likely, given the wide array of screen sizes in use). I think other games, even pixel art games, are doing this nowadays, too.

And then there's the question of whether to change fonts when scaling. This might be overkill, but it might look better if graphics use one filter, and fonts another. I haven't tested it out yet, though.

For now, I'm getting things setup for alternate screen sizes in the code, so I can start testing these ideas. I welcome any advice or experience on the matter!