iPhone 5 Support
Last week I had a good discussion on my devlog thread at TIGSource forums on how Power Heroes should support different screen sizes. As you may have noticed in all the screenshots etc. the map size is 16 x 9 tiles, which translates to 480 x 270 pixels when using 30 x 30 pixel tiles (actually they are 10 x 10 but scaled up 3x, or 6x for retina displays). The HUD is 50 (100) pixels high and sits on top of the map, so together they fill up a 480 x 320 (or 960 x 640 retina) screen perfectly.
16 x 9 map on < iPhone5 (resolution 480 x 320 / 960 x 640)
The Problem
Apple introduced a larger screen with iPhone5. On landscape mode, its vertical resolution was kept at 640 pixels, but horizontally it was expanded to 1136 pixels. This is an awkward resolution because it is not a multitude of the base 480 pixels of the earlier models. For example, compared to iPhone 4S, there is now 176 pixels more horizontal space available for use. If the game had the player moving around a scrolling map, this would not be such a problem. But because the game is built around static maps, I have to think of another solution if I want to fully utilise the new screen estate.
176 pixels is enough to expand the game's maps by two tiles, but this won't fill the screen completely. The above 16 x 9 map, now resized to 18 x 9, will look something like this:
18 x 9 map on iPhone5 (resolution 1136 x 960)
See the nasty black bars? Not too elegant.
The Solution?
User eobet (thanks!) on the devlog thread came up with this idea: use 20 x 9 maps and allow the left/rightmost tiles be about 50% off-screen. Like this:
Full 20 x 9 view of the map on iPhone5 (resolution 1136 x 960)
Then on an older device the same map would look like this:
16 x 9 view of the same map on < iPhone5 (resolution 480 x 320 / 960 x 640)
16 x 9 looks kind of constrained now that we saw the full view, doesn't it? But this could be one way to have support for various screen sizes. I could design all maps using a 20 x 9 canvas and then center it on screen in the game. 20 x 9 is big enough to fill the whole 1136 x 640 screen.
But wait, there are a few issues with this solution.
The Issues
The first one is mainly a visual one. How should I treat the half tiles on the edges of the map? Allow sprite movement on these tiles, basically being 50% off screen? Limit movement to full tiles only, creating an invisible wall that no one can pass (until area is cleared)?
The second one: I can't put anything outside the 16 x 9 area that's relevant to gameplay, because players with smaller screens would not be able to see or access this space. If you look at the screenshots above, the edges are blocked with various structures except for the paths leading to and from the area. It would still work on both screen sizes if the edges were open space, but then larger screens would get an advantage over smaller screens by having more space to move around. Whether this is a big deal or not I don't know.
The third one is about enemies. Enemy spawn system currently works so that enemies can enter the area from all four edges of the map. Now if I block the edges on 20 x 9 maps, enemies can no longer spawn from left or right. They are limited to spawning from the top and bottom only.
So, in a nutshell, my options are:
- Open the edges and have the enemy spawn system as it is and give players with iPhone5+ more space to move in.
- Close the edges, keep the movable area the same across different devices and alter the spawn routine.
And then I have the visual half-tile problem on the edges.
Sounds like more playtesting.
