Test Your Game on Different Displays
I recently tested out my in development Xbox Live Indie Game Super Amazing Wagon Adventure on an Xbox for the first time. Up till now all testing had been performed on my laptop. Thanks to the cross platform goodness of XNA, getting the game running was completely painless. However, I quickly learned a lesson that while completely obvious in retrospect was unexpected to me at the time: you need to test your game on different displays. I apologize to the game development veterans to which this is likely old news, but for the beginners like me, here are a few reasons why.
My development laptop has a tiny 14" display while the TV hooked up to my Xbox is a respectable 32". Seeing my game running on a large screen, I was taken back by how different everything looks,. Not only was everything bigger, but also art design choices I made for my tiny laptop screen didn't always make sense on the bigger display.
My game uses a pixel art style meant to evoke early the Atari 2600 and early home computers like the Commodore 64. A big part of this style is large blocks of solid color.
As you can see in the screen above, the main play area is a solid, tan color, and the sky is solid, bright blue. While this looked fine (to me) on my laptop, I found that the graphics looked very flat on the larger display. There simply wasn't enough visual interest to fill the large display. Not only does it look bad, but it also makes the game harder to play. Without enough detail, it can be hard to focus on the screen and hard to track motion in sidescrolling scenes.
The difference in colors between displays can be shocking. The blue sky seen in the screenshot above looks OK on my laptop, but on the larger screen the blue is so bright it's distracting and hard to look at. The green grass is not as bad but still a bit too bright. Both my laptop and my TV have LCD displays. I imagine the difference would be even more pronounced comparing a CRT and an LCD display.
Part of the difference can probably be attributed to the poor color reproduction quality of my laptop display, my TV or both. There's not much I can do about this except buy a new display. However, I also suspect that color settings and viewing angle also play a role. Unfortunately, properly calibrating the colors of a display is something I know nothing about, so I have a lot of learning to do.
TVs can crop up to 10% of the pixels at the edges of the video signal. This is mostly a problem with older CRT TVs, but even newer flat panel displays often throw out part of the picture. The safe area is the center portion of the screen which can safely be assumed intact. Thankfully, this was the one issue I was expecting. Having read about it in the XNA documentation, I've been careful to ensure all my critical interface elements (menus, health meters, etc) are in the safe area.
However, despite having known about this issue, I was still pretty surprised to see that even my 3 year old LCD display crops a good portion of the picture. In my case it crops enough of the screen that the black corners meant to emulate the curvature of an old TV are no longer visible. This is really unfortunate since the old TV effect is a big part of the visual look of my game, and the curvature of the screen is much less defined without the black corners.
In my case the solutions are all relatively simple: add more visual clutter, tune the colors, make the black corners more pronounced. I feel lucky. For example, if I had instead developed on too large of a display without testing on smaller displays, I could imagine having to make major design changes. In fact, a few large companies have released games with text that is unreadable on SD TVs. These points are especially important for games intended to be played on a TV, but there is also a huge variety in display size, resolution, and color quality among computer monitors, not to mention phones and tablets. The take away message is simple: test your game on multiple displays early and often.
6/11/12: Updated to reflect the game's new name.