Rolly Bear World: Re-scaling functionality for different devices

One of Corona’s strengths is the ability to deploy across different Operating Systems. In this post we make some changes to our code base to support multiple devices (iOS and Android). As this requires some changes in our config.lua and some understanding how it works I thought it would be worthwhile to write a post about this topic. Honestly, it took me a day to figure out everything despite the many articles already written about this topic.

Still in Indonesia, we travelled to Bali, which is one of the islands of Indonesia. The trip from Lombok to Bali took us almost six hours because the boat ride was longer than expected and we had some delays along the way. The problem with Bali is that it is hard to move around. There is barely any public transportation and you either take a cab or rent a motorbike. We visited some very nice rice fields and temples. Most of Indonesia is Muslim, but Bali is Hindu. Countries with a Hindu religion are often directly recognizable because of the many temples and shrines. So Bali is rich on random temples and some very large temples. One of the temples we visited was the Mother Temple of Besakih (Stunning!). Bali is one of these places, its good that we have visited it, but we won’t come back here. Bali is a tourist island full of western stores, prices and resorts. This is just not the way we like to travel. We probably will only stay for a few days and move out.


As already mentioned many articles have already been written on the topic of rescaling your game and code for multiple operating systems and devices. So I suggest you read the following articles as they really helped me to understand the adjustments I had to make for Rolly Bear World. Because of these two great articles I won’t go into much detail in this post

http://www.coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/

http://www.coronalabs.com/blog/2013/09/10/modernizing-the-config-lua/

For Rolly Bear World I used the second article as starting point. Rob Miracle did a great job explaining the different aspects. But I suggest you also read the first article as it explains a bit more the background story which you need to fully understand the second article of Rob Miracle.

The second article argues that the first approach (as described in the first article) is outdated as it use the old Iphone resolution (380 x 480) as a starting point, while we all know that the screen sizes of today’s devices have much higher resolutions.

So which changes will we make to Rolly Bear World?
1) We adjust the config.lua file to detect the aspect ratio of the devices (resolution), so Corona SDK knows to display the lower or higher resolution art work
2) We make some adjusts to support the @2x naming convention for art work.

Corona SDK supports one definition in your code for referring to your art work and based on your config.lua file and art work naming-convention Corona SDK picks the right asset. (Nice!). Up till now, we used display.NewImage to retrieve our art work, these need to be replaced by display.NewImagRect and add two additional parameters (the width and height of your base image). Only the display.NewImagRect API support the automatic retrieval of the right art work from your project folder.

Naming convention:
Base Image –> (eg) floortitlescreen.png (for lower resolution devices).
@2x Image –> (eg) floortitlescreen@2x.png (for higher resolution devices).

The @2x Image is twice as big as the base image (enlarge it with you art work software eg GIMP or PhotoShop) and will be used for devices where the width is larger than 1024 pixels (eg iPAD Retina).

As you can see in the screenshots Rolly Bear World is now more appealing across different devices. Note that I didn’t change all the art work yet with larger files as this is something I will do in a later phase when I will optimize everything of the Rolly Bear World Project. For now, my priority is to get the functionality of the game working. I will do several iterations later on to optimize the game for the larger public :).

The revised Config.lua file:

local aspectRatio = display.pixelHeight / display.pixelWidth

application = {
   content = {
      width = aspectRatio > 1.5 and 800 or math.ceil( 1200 / aspectRatio ),
      height = aspectRatio < 1.5 and 1200 or math.ceil( 800 * aspectRatio ),
      scale = "letterbox",
      fps = 30,

      imageSuffix = {
         ["@2x"] = 1.3,
      },
   },

}

For all other changes (like display.NewImage to display.newImageRect) see my GitHub Repository.

1 Response

  1. jeff February 19, 2014 / 4:47 am

    great post. Certainly answered a lot of questions i had about re scaling.Thanks again and hope you having a great trip.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*