Developing games for multiple devices on iOS: Part 1 – how screen differences effect gameplay

One of the challenges of writing games for multiple devices is that there are typically several form factors you need to support. In the Android world, you literally have hundred of devices to consider, though you can target popular ones and probably make most people happy. I haven’t done too much development on Android however so can’t give too much detail here.

In the iOS world, it’s a bit easier since you have a much smaller universe of models to tend to. Grouping all the similarly sized devices into categories (and excluding old models that aren’t supported anymore) you end up with only six device types, which isn’t too bad.

There are only two things to really be concerned with for each screen type: it’s resolution (number of pixels horizontally and vertically) and physical size. Sometimes you hear about pixel density (DPI or PPI), but this can be derived from the size and resolution of the screen.

In this series of articles I’m going to talk about some of the challenges I came up when porting Play The Field from iPad to iPhone, and along the way give some ideas that may help you doing the same for your game. PTF is a minimalist RTS game, but I expect many of the things I discuss will apply to other game types as well.

Though as I mentioned above there are six devices types on iOS to worry about (at least as of May 2015), I’m just going to focus on iPad Retina (which I originally wrote the game for) and iPhone 6. You can see the full list of specs for all currently supported iOS devices here here.

Before I get any deeper I’ll explain a little more about how Play The Field works. There are two sides, the user and the computer, and each has their own units – you can think of them as little tanks if you like though the game is mostly non-violent. There are different unit types, but most share in common the following characteristics: movement speed and attack distance, both specified in pixels.

Movement speed represents how many pixels the unit can move in a turn, and attack distance is the maximum distance to an enemy before it can begin attacking it. One more important piece of information is that there is a series of levels, each with a different layout of enemy units, and I wrote the engine to scale the layout to the screen size.  So if a certain level contains 10 units in a circle, this circle will be adjusted to fit properly on any resolution without being cut off.

iPad Retina has a resolution of 2048 x 1536, and iPhone 6 has 1334 x 750. The latter is a little smaller than you would expect given the resolution difference, because the pixel density is roughly 23% higher. What this means is that if I draw a circle of a certain radius (in pixels) on both devices, the one on the iPhone 6 will be approximately 23% smaller. In the case of PTF, I determined this was not a major problem so I left the unit sizes the same. If the density difference was significantly higher, I would have had to scale all the unit sizes accordingly.

The problems begin when you consider how the levels get rendered on each device. Just ignoring the menus for now, there is 2048 – 1334 = 714 pixels extra in the vertical direction on the iPad Retina, as compared to the iPhone 6. Assuming I don’t change the speed of the units or the board layout at all, it would take units significantly that much longer to cross the board. Also, assuming I don’t change the attack distance, this means the board is effectively more cramped. For example, on some levels where I could have added a unit safely without being attacked immediately by an enemy, now there is less space and my unit will get attacked right away. As a user playing the game on both devices and comparing, because the physical distance is almost the same, this difference would seem strange. After all users don’t actively think about resolution.

I knew these factors could have a pretty major effect on the gameplay, so I play-tested the levels on the iPhone to see how it was. Fortunately, though the game had a different feel, most levels were playable and still had a good degree of challenge. I did tweak a few things to make them work better on the smaller resolution, however. For example, I removed the red area (which blocks unit placement) on one stage because it limited the user’s choice too much. Another option I had when doing the port was to just scale everything down to match the lower resolution: the unit size, speed, and attack distance. In theory, this should keep the gameplay the same as the larger device, as if you were watching recording an iPad on a camera and replaying it on a small TV.

But this approach has its own issues. First, the units would not be much physically smaller, which would render them hard to see as well as hard to select. Accidentally selecting the wrong unit would also happen more often. Also, the speed of units (as seen visually), which had been carefully adjusted, would now be significantly slower on the iPhone. This is because the units are moving the same speed relative to the number of pixels available, but the physical size of the screen is smaller so this translates to less distance per movement.

Yet another option would be to redesign each level from scratch for the smaller form factor of the iPhone. This has the potential to have the best user experience because things are fine-tuned, but it puts a heavy burden on the developer for the redesign process. I am considering doing this eventually, but for the initial iPhone release I just wanted something that was playable and fun, and was able to achieve that without the extra work.

But alas, our work is not yet done! There is still one more area where I had to put in extra time to fit the iPhone’s smaller screen and resolution – the menu system.

I’ll dedicate part 2 of this series to the menu changes I made.

References

http://www.iosres.com

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s