09 August 2013
Guest Piece: Optimizing for Mobile Device Resolutions
Anthony Keffel is the founder of 3ID Studios, a small indie company in Germany. His full time work is as a lecturer of Information Graphics and Mobile Development at a private academy. The Amazing Funfair Games is Anthony’s first mobile game and is built with Corona SDK.
In today’s post, Anthony shares tips on optimizing mobile apps for a variety of devices and resolutions.
When you start designing apps, you may face some unexpected things. After working on many images for a variety of devices, I’d like to give you some tips for your design, especially if you’re new to design and game development. Throughout the piece, I will use examples from my recent game: The Amazing Funfair Games.
Market Diversification
One of the challenges you’ll encounter are the many devices in the market and their different screen sizes/resolutions. When I first started to design my game, Apple just had released the iPad 2. Nobody had heard about “Retina“ or “Full HD“ for mobile. After I made the basic game interface, I encountered a few problems.
The “Tall” iPhone 5
When I first tested my game on the iPhone 5, my graphics no longer fit! I still wanted to use one interface design for all devices, so I went back and adjusted everything to a basis of 1536×2048 pixels (Retina iPad resolution). Later, I could scale them down in my image editing program to basically any size — iPhone 5, iPhone 4, iPad Mini, and any number of smaller Android phones and tablets.
 |
 |
 |
When you look at the screens, you can see the problem between the “tall” iPhone 5 (in portrait orientation) and the “wide” iPad. In this case, there’s a lot of empty space on the iPad. You will typically face these kind of issues when you work with scaling.
The solution I used was to crop the interface on the iPhone 5, but retain the essential aspects on screen. To fill the extra space for wider devices, I just expanded the non-gameplay-essential design parts (look at the counter). I call this the “magic screen.“ However…
Content Scaling Doesn’t Scale the Gameplay
After implementing the “magic screen,“ I finished the code and began to test. On small devices, everything worked well, but the testers on tablets didn’t like some parts of the game. For example, on the left screenshot you see the game on an iPhone 5 while in the middle you see the original “magic screen” version — it looks fine, generally, but almost half of the screen isn’t used for the gameplay!
Ultimately, I decided to make a “full size” version — If the screen is big enough, the player gets more space for the candies.
 |
 |
 |
Just remember…
- Try to give the user the “best” overall game experience on his/her device.
- Test it – test it – test it again!
Hopefully, this brief case study helps you understand the challenges — and potential solution to — developing an app for multiple device screen sizes. For more detailed guides and tutorials on this, please visit the “Corona Basics” section of Corona University.
Michael Peiffert
Posted at 16:18h, 09 AugustI will have to disagree on this.
The problem here is that your users won’t have the same gameplay depending on what device they will play.
Meaning that the game may become completely unbalanced!
It can be a problem if you have leaderboards as it can be easier to score for users with a certain device.
I think it’s important that all users have the same experience.
Because of the those reasons, you just can’t keep your game balanced for every kind of screen on the market (Android…)
In the case of your game, you can keep the gameplay area on the iPad for the iPhone 5.
You just need to add some background on the right and the left to fill the void.
It’s way more easier to do this that having to balance your game for every device.
Anthony
Posted at 02:56h, 10 AugustHello Michael,
you’re right – if you have global/online leader boards there would be a problem with the different scores. In my case I have a “closed” system, so in my opinion this way make the best experience. I agree – if the gameplay is too different between two devices you have to fix it – but in my case there will be just some points more on bigger devices, that’s ok.
I think you have to take a look at each individual case and decide which way is the best for the game.
Pablo Isidro
Posted at 16:24h, 09 AugustReally helpful example, Thanks!
If the objective of the game is to have some kind of “global” scores, yes, the game will be unbalanced. But I think in some cases it will be ok.
Mayur
Posted at 00:12h, 14 AugustThanks for the information, got some good stuff here, Design is the topmost priority thing in every app creation, but later it the second important thing is performance of the app on multiple devices with different configurations. I raised this point because now days Android is booming everywhere & many of OEM companies manufacturing devices with different configurations.