Mobile is going to be the next big thing. With an estimated worth of over $25 billion by 2015, Flurry expects mobile consumption to exceed TV and web very soon. Unfortunately the mobile market is severely fragmented both in terms of the hardware as well as the software. There are no uniform standards of development (HTML-5 is a good attempt but it is still far from perfect) and the difference in screen size, resolution and hardware capabilities are mind boggling. A year back when we were thinking of developing something for the mobile platform we had a lot of decisions to make - including the concept, idea and how to go about it and which platforms to target. Given that we had almost zero budget and very limited time to spare we spend a good amount of time researching which technology to use to develop our app.

mobile consumption flurry

Why Corona SDK?

We had lots of option to chose from. We wanted to target at the very least Apple and Android. These two combined capture a majority of mobile market. Developing natively was out of question as it would have been prohibitively time consuming (moreover no one in the development team has a Mac and for a good long time I did not even have an android phone!). So we had to chose a cross-platform development framework or SDK to satisfy our needs. We considered HTML-5 and wrapping it with Phonegap as our first choice. But after little bit of tweaking we felt it is still not polished enough to be used  for commercial apps. Next we considered Cocos2d-x, Moai SDK,  Gideros mobile, Gamemaker, GameSalad and Corona SDK. Most of them are very good platforms with their own strengths and weaknesses. We needed rapid development capabilities without compromising on speed. In our opinion Cocos2d-x is the most powerful platform amongst these, but has a steep learning curve and is not as polished as Cocos2d (which targets only iOS). GameSalad is strongly lacking in control but makes development very easy. Gamemaker frankly is not yet ready to be used for commercial development. Moai SDK is solid and gives a lot of control, though the documentation is lacking and the community behind it is not that good. Corona hits the sweet spot between rapid development and control over your app. It is based on Lua (a scripting language) which is extremely easy and it took us literally minutes to get started. More importantly there is a vibrant community behind the SDK who share code and ideas freely which makes it very easy to troubleshoot in case you are stuck. The pricing was also just right for us (they give student discounts). For mobile development it is absolutely essential that the framework evolve fast enough to cope up with the changing mobile technologies. Corona SDK as a commercial product is pretty good at it. It has it's own limitations but for most apps it suffices. In the next section I will discuss some of the tips and tricks we learned developing our app for multiple platforms from a single codebase using Corona SDK

Handling screen size fragmentation 

The fragmentation in screen size and resolution in android devices is nothing new. With the introduction of the new iPads and iPhone 5 even the screen sizes now vary a lot within the Apple devices as well.  The trick to handle different device screen size and resolution is to simply ignore it! Corona makes it really simple to handle scaling (in android when developing natively you have to rely on device independent pixels or DIPs), so the only thing that really matters is the aspect ratio. Select a base resolution (this could be the device that you think will be majority), for us we selected the iphone 4S as our base device (960 X 640, aspect ratio 1.5). Now note down the range of aspect ratios you want to target.  Based on research we realized that almost all devices (>99%) have aspect ratios between 1.33 to 1.78. So all you need to do is some basic calculations to generate a template size with a safe region and bleed region. Anything within the safe region is guaranteed to be safe across devices and the background needs to be designed in such a way that it extends upto the bleed areas. Here are the formulas to generate the template size from the base size -

templateHeight = baseWidth x maxAspect  = 640*1.78 ~ 1140 pixels

templateWidth = baseHeight/minAspect = 960/1.33 ~ 722 pixels

template

Here is the config file

  1.  
  2. application =
  3. {
  4. content =
  5. {
  6. width = 640,
  7. height = 960,
  8. scale = "letterbox",
  9. fps = 60,
  10. xalign = "center",
  11. yalign = "center",
  12. },
  13.  
  14. license =
  15. {
  16. google =
  17. {
  18. key = "#####",
  19. },
  20. },
  21. }
  22.  

All elements need to be placed inside the safe areas. You can use display.screenOriginX and display.screenOriginY to move elements across the bleed area (if available). The background is same size as the template size. See an example below.
quiz

 

Cross Platform from Single Codebase without using Globals

One easy way of handling multiple platforms is to detect the current platform and execute code accordingly. It can be very tempting to use globals. NEVER USE GLOBALS. It goes against the concept of data abstraction, the very essence of Software engineering. It is easy to avoid Globals. Use a settings.lua file and define everything you need across your codebase here:

settings.lua

  1.  
  2. local S = {}
  3.  
  4. -----------------------------SET BEFORE BUILD------------------------
  5. -- define build platform
  6. -- Google Play 1
  7. -- Amazon 2
  8. -- IOS 3
  9.  
  10. S.buildFor = 1;
  11.  
  12. -----------------------------SET BEFORE BUILD------------------------
  13.  
  14. --Content size
  15. S.H = display.contentHeight;
  16. S.W = display.contentWidth;
  17. --Content scale
  18. S.S = display.contentScaleX;
  19.  
  20. --Offsets
  21. S.Ox = display.screenOriginX;
  22. S.Oy = display.screenOriginY;
  23.  
  24. S.platform = system.getInfo( "platformName" ) ;
  25.  
  26. --Platform specific font loading
  27. if "Win" == system.getInfo( "platformName" ) then
  28. S.TrbFont = "Trebuchet MS";
  29. S.cpl = "Champagne & Limousines";
  30. S.dsd = "DS-Digital";
  31. S.stnr = "Steiner";
  32. else
  33. -- Mac, iOS and android
  34. S.TrbFont = "TrebuchetMS";
  35. S.cpl = "Champagne&Limousines";
  36. S.dsd = "DS-Digital-Italic";
  37. S.stnr = "Steiner";
  38. end
  39.  
  40. --Switch on analytics
  41. S.ifAnalytics = true;
  42.  
  43. return S;
  44.  

Now import the settings file in other codes...

  1.  
  2. --Hide status bar
  3. display.setStatusBar(display.HiddenStatusBar);
  4.  
  5. --Required packages
  6. local settings = require("settings");
  7. local licensing = require("licensing");
  8. local analytics = require("analytics");
  9.  
  10. --Start licensing services and analytics
  11. if "Android" == settings.platform then
  12. --init the android licensing system
  13. if(settings.buildFor == 1) then
  14. licensing.init("google");
  15. end
  16. --init analytics
  17. analytics.init( "####" );
  18. elseif "iPhone OS" == settings.platform then
  19. analytics.init( "####" );
  20. end
  21.  

In fact you can change the variables in the settings.lua and it is the best way to share data across storyboards. If your app implements in-app purchases it is also advisable to store this information in the settings.lua.

We hope that the tips and pointers are helpful to you. Thanks to Corona SDK we were able to launch our app in a very short time (we were working part-time on the project) simultanously on Apple store, Google Play and Amazon. We were surprised when we saw a large number of people using DSLRs but never going out of auto mode! Elements of Photography was developed with the hope that more people use their DSLRs to its full extent. You may check out the app at the link below.

signature

Related Posts Plugin for WordPress, Blogger... Print This Post Print This Post
Tagged with:  

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Visit our friends!

A few highly recommended friends...

Archives