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.
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.
- 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.