Tutorial: Moderizing the config.lua question

[system]

I was reading the article “Developing for iPad Retina Display” and it states that "You create graphical assets as usual, and then make sure to have duplicate graphics that are exactly double the width and height of the original images…

star.png       128x128

star@2.png  256x 256"

And after reading the article I interepreted that @3 would be three times the original asset and @4 would be 4 times the original asset and that Corona would then select the appropriate asset for each device based on the appendage (@2, @3…).

The for Cross Platform Apps I would set my config.lua as

width = 320; height = 480 and scale = “zoomStretch”.

I also read "Tutorial: the Ultimate “config.lua File” and it referenced the @2 graphhic asset is 1.5 times the size of the original asset and @4x is 3 times the original asset.

Next I read “Tutorial: Modernizing the config.lua” which gave me a different width, height and scale with the understanding this would better accomodate all of the device sizes that Apple comes out with.

Do I still save my @2 assets at twice the size of the original asset?

Do I still save my @4 assets at three times the size of the original asset?

Does this mean I no longer need @3 assets?

The more I read the more confused I’ve become.

Thanks,

Lori

[bjsorrentino]

Hi Lori,

The most important thing to realize is that these naming suffixes and which “sets” of images you decide to include (and their sizes) are relative. You don’t necessarily need to name them as @2x, @4x, etc. You could, in fact, define whatever suffixes you want, as long as you define them in the “config.lua” file so that Corona knows which suffixes to look for.

As for sizes, they also don’t necessarily need to be directly related to their names, although most developers adhere to that practice. Meaning, the @2x images are usually twice the size or the base images, and @4x are four times the size. Rarely do people include @3x in that mix… most common is to use @1x, @2x, and @4x.

My suggestion is to use a 320x480 content area and include assets up to @4x. That would mean the content area would scale up as large as 1920 pixels (height) with no loss of quality (blurring) of the images. An iPad Retina is 2048 pixels tall, so there would be a slight bit of up-scaling with your largest images, but not enough to make them blurry on that device.

Brent

[rob]

The 1.5x and 3.0 x are decision points of when to use the @2x or @4x image.  If we did 2.0, then any screen 639 pixels or less would pick up the 1x images.  The @2x images would be used on screens of 640px to 1280px and the @4x images will only be used on screens larger than 1280px.  If your only doing iOS devices this is fine since you’re only dealing with 320, 640 (and larger for phones now), 768 and 1535px screens.  The 1x would be used on iPhone 3’s. @2x would be used on the iPhone 4’s, 5’s and 6’s (including 6 plus) and the non-retina iPads and iPad mini’s.  The @4x images would only be used on Retina iPads.

But when you factor Android in, then things get really more complex.  Some older phones are 480px wide.  Some tables are 600px wide, some are 720px, 800px, and so on.  By using 1.5x, we are saying any screen 480px and smaller get the 1x graphics. For order Droid’s it will use the 1x images with some sizing up.  But when you got o a 7" Google Nexus 7 tablet that’s 600px wide, stretching the 1x graphic up will be too blurry.  By using 1.5x, anything 481 - 960 px get the medium size image and anything 961 px or wider gets the @4x image.

This is a bunch of techno babble, but it explains why we chose the numbers we did.  These tutorials are just suggestions and each developer has to go with what is right for them.

Rob

[system]

Thank you both!

[system]

I am really really struggling to figure out the config.lua.  I’ve finished most of the coding in the game and now I need to complete the config.la and the graphics.   After that I need to finish up the IAP (they are working in the game just need to have them work with Apple).

When I use the code below the graphics do well in the simulator on iPhones but the iPad Air and iPad mini are not centered.  

l_ocal aspectRatio = display.pixelHeight / display.pixelWidth_

     application = {

          content = {

               width = aspectRatio > 1.5 and 800 or math.floor( 1200 / aspectRatio ),

                height = aspectRatio < 1.5 and 1200 or math.floor( 800 * aspectRatio ),

                scale = “letterBox”,

                fps = 30,

      imageSuffix = {

         ["@2x"] = 1.3,

      },

   },

}

When I use the code below it doesn’t work correct on any of them.

--------------------------

–IPAD

--------------------------

if ( string.sub( system.getInfo(“model”), 1, 4 ) == “iPad” ) then

   application =

   {

      content =

      {

         width = 360,

         height = 480,

         scale = “letterBox”,

         xAlign = “center”,

         yAlign = “center”,

         imageSuffix =

         {

            ["@2x"] = 1.5,

            ["@4x"] = 3.0,

         },

      },

   }

   

   --------------------------

   --iPHONE 5

   --------------------------

   elseif ( string.sub( system.getInfo(“model”), 1, 2 ) == “iP” and display.pixelHeight > 960 ) then

      application =

      {

         content =

         {

            width = 320,

            height = 568,

            scale = “letterBox”,

            xAlign = “center”,

            yAlign = “center”,

            imageSuffix =

            {

               ["@2x"] = 1.5,

               ["@4x"] = 3.0,

            },

         },

      }

      --------------------------------

      --iPHONE 3,4 and Older IPOD Touch

      ---------------------------------

 elseif ( string.sub( system.getInfo(“model”), 1, 2 ) == “iP” ) then

    application =

    {

       content =

       {

          width = 320,

          height = 480,

          scale = “letterBox”,

          xAlign = “center”,

          yAlign = “center”,

          imageSuffix =

          {

             ["@2x"] = 1.5,

             ["@4x"] = 3.0,

          },

       },

    }

_ I would greatly appreciate any assistance.   _

_ Thanks _

_ Lori _

[rob]

Hey Lori. Please don’t take this wrong, but your config.lua should be one of the first things you address since it controls how you layout everything. The config.lua you posted here:

local aspectRatio = display.pixelHeight / display.pixelWidth application = { content = { width = aspectRatio \> 1.5 and 800 or math.floor( 1200 / aspectRatio ), height = aspectRatio \< 1.5 and 1200 or math.floor( 800 \* aspectRatio ), scale = "letterBox", fps = 30, &nbsp; &nbsp; &nbsp; imageSuffix = { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ["@2x"] = 1.3, &nbsp; &nbsp; &nbsp; }, &nbsp; &nbsp; }, }

Should do everything you need to do. It defaults to center alignment. The string “letterBox” should be “letterbox”, but that’s also the default so it’s not going to change things.

If it’s not centering on the iPad’s its likely an issue with your code. For instance, lets say this is how you’re loading your background:

local background = display.newImageRect("background.png", 570, 360) background.anchorX = 0 background.anchorY = 0 background.x = 0 background.y = 0

Will draw the background starting at 0, 0 and fill left and down.

But consider this:

local background = display.newImageRect("background.png", 570, 360) background.x = display.contentCenterX background.y = display.contentCenterY

The background will be centered on the screen.  On the iPhone some of the screen will be off screen on the sides since it’s a wider screen.

The other code isn’t going to help you at all. Both are assuming you will be centering things that need to be centered and drawing things around the edges.  Some things need to be a relative distance from the edge, others a relative distance from the center.

Consider the two images below. One is an iPad shape screen, the other is a more of an iPhone 5/6 shape.   See how things like the home and gear icon are the same distance from the left edge. In these cases, I can do something like:

homeButton.x = 25

That’s easy.  But the score needs anchored to the right edge. So I would do:

scoreText.x = display.contentWidth - 50

Things along the top, set the .y to value you want. Along the bottom, set .y to display.contentHeight - 20 for instance.  Everything else, you would place some distance from the center:

bigTree.x = display.contentCenterX - 50

Rob

[system]

Hard lesson learned on this end.    I’ll take it in stride as a first attempt at programming.   I’ve got this saying…“it takes as long as it takes”.

I will give your recommendation above a try.  

Thanks for responding so quickly!

Have a great evening.

Lori

[system]

Rob,

I’ve updated what I consider the most difficult of my screens and it appears to be working like a champ!  I’ve still got more screens to update.    I’m also viewing the change on all the different size devices.

One last question.  Above you indicated to anchor the score to the right edge I would do:  scoreText.x = display.contentWidth - 50

     Which I did and it works great. 

What if I wanted to do the same concept to anchor to the left edge?  Top of screen?  Bottom of screen?

Thanks,

Lori

[bjsorrentino]

Hi Lori,

When I work with “letterbox” scale (and I almost always do since it’s my personal preference), I find that setting two variables early on in “main.lua” is extremely valuable for positioning objects that should be “anchored to one side”. These variables are really simple calculations, honestly, and they will be dynamically calculated no matter what screen or device you’re testing on (assuming it’s “letterbox” scale setting).

Basically, they tell you the width and height of the letterbox bars (empty space) on any device:

[lua]

local letterboxWidth = (display.actualContentWidth-display.contentWidth)/2

local letterboxHeight = (display.actualContentHeight-display.contentHeight)/2

[/lua]

Using these, you can simply add or subtract the value from the position of any object which needs to be pushed up against one side of the screen. For the left, you’d subtract “letterboxWidth”, or for the right side, add “letterboxWidth”. Same concept with “letterboxHeight” and the top/bottom of the screen.

If you need to use these in multiple scenes of a Composer-based app, I suggest that you set them to Composer variables that will be known throughout the app, using the “.setVariable()” and “.getVariable()” APIs:

https://docs.coronalabs.com/api/library/composer/setVariable.html

https://docs.coronalabs.com/api/library/composer/getVariable.html

Hope this helps,

Brent

[system]

Great!  Thanks for the help.  I’ll give it a try.

[rob]

To anchor to the top or left, simply use the number of pixels.   Object.x = 50

Then on every device, it will be 50 pixels from the left edge.  Object.y = 50

will keep it 50 pixels from the top edge.  Object.y = display.contentHeight - 50

will keep it 50 pixels from the bottom edge.

Rob

[system]

Awesome!   Thanks for all the help.

Lori

[system]

I’m not sure why this is happening.  But I am using some overlay pop ups.  I’m  centering them on the screen and I was trying to use the same method of using display.contentCenterX and display.contentCenterY in placing the object on the overlay (buttons, headings etc).  It appears to work fine on the iPhones but the centering is off on the iPad’s.   Since everything is working from the center I am perplexed - it seems like it should work the same.

Any thoughts or ideas would be appreciated.

Thanks,

Lori

[bjsorrentino]

Hi Lori,

The most important thing to realize is that these naming suffixes and which “sets” of images you decide to include (and their sizes) are relative. You don’t necessarily need to name them as @2x, @4x, etc. You could, in fact, define whatever suffixes you want, as long as you define them in the “config.lua” file so that Corona knows which suffixes to look for.

As for sizes, they also don’t necessarily need to be directly related to their names, although most developers adhere to that practice. Meaning, the @2x images are usually twice the size or the base images, and @4x are four times the size. Rarely do people include @3x in that mix… most common is to use @1x, @2x, and @4x.

My suggestion is to use a 320x480 content area and include assets up to @4x. That would mean the content area would scale up as large as 1920 pixels (height) with no loss of quality (blurring) of the images. An iPad Retina is 2048 pixels tall, so there would be a slight bit of up-scaling with your largest images, but not enough to make them blurry on that device.

Brent

[rob]

The 1.5x and 3.0 x are decision points of when to use the @2x or @4x image.  If we did 2.0, then any screen 639 pixels or less would pick up the 1x images.  The @2x images would be used on screens of 640px to 1280px and the @4x images will only be used on screens larger than 1280px.  If your only doing iOS devices this is fine since you’re only dealing with 320, 640 (and larger for phones now), 768 and 1535px screens.  The 1x would be used on iPhone 3’s. @2x would be used on the iPhone 4’s, 5’s and 6’s (including 6 plus) and the non-retina iPads and iPad mini’s.  The @4x images would only be used on Retina iPads.

But when you factor Android in, then things get really more complex.  Some older phones are 480px wide.  Some tables are 600px wide, some are 720px, 800px, and so on.  By using 1.5x, we are saying any screen 480px and smaller get the 1x graphics. For order Droid’s it will use the 1x images with some sizing up.  But when you got o a 7" Google Nexus 7 tablet that’s 600px wide, stretching the 1x graphic up will be too blurry.  By using 1.5x, anything 481 - 960 px get the medium size image and anything 961 px or wider gets the @4x image.

This is a bunch of techno babble, but it explains why we chose the numbers we did.  These tutorials are just suggestions and each developer has to go with what is right for them.

Rob

[system]

Thank you both!

[system]

I am really really struggling to figure out the config.lua.  I’ve finished most of the coding in the game and now I need to complete the config.la and the graphics.   After that I need to finish up the IAP (they are working in the game just need to have them work with Apple).

When I use the code below the graphics do well in the simulator on iPhones but the iPad Air and iPad mini are not centered.  

l_ocal aspectRatio = display.pixelHeight / display.pixelWidth_

     application = {

          content = {

               width = aspectRatio > 1.5 and 800 or math.floor( 1200 / aspectRatio ),

                height = aspectRatio < 1.5 and 1200 or math.floor( 800 * aspectRatio ),

                scale = “letterBox”,

                fps = 30,

      imageSuffix = {

         ["@2x"] = 1.3,

      },

   },

}

When I use the code below it doesn’t work correct on any of them.

--------------------------

–IPAD

--------------------------

if ( string.sub( system.getInfo(“model”), 1, 4 ) == “iPad” ) then

   application =

   {

      content =

      {

         width = 360,

         height = 480,

         scale = “letterBox”,

         xAlign = “center”,

         yAlign = “center”,

         imageSuffix =

         {

            ["@2x"] = 1.5,

            ["@4x"] = 3.0,

         },

      },

   }

   

   --------------------------

   --iPHONE 5

   --------------------------

   elseif ( string.sub( system.getInfo(“model”), 1, 2 ) == “iP” and display.pixelHeight > 960 ) then

      application =

      {

         content =

         {

            width = 320,

            height = 568,

            scale = “letterBox”,

            xAlign = “center”,

            yAlign = “center”,

            imageSuffix =

            {

               ["@2x"] = 1.5,

               ["@4x"] = 3.0,

            },

         },

      }

      --------------------------------

      --iPHONE 3,4 and Older IPOD Touch

      ---------------------------------

 elseif ( string.sub( system.getInfo(“model”), 1, 2 ) == “iP” ) then

    application =

    {

       content =

       {

          width = 320,

          height = 480,

          scale = “letterBox”,

          xAlign = “center”,

          yAlign = “center”,

          imageSuffix =

          {

             ["@2x"] = 1.5,

             ["@4x"] = 3.0,

          },

       },

    }

_ I would greatly appreciate any assistance.   _

_ Thanks _

_ Lori _

[rob]

Hey Lori. Please don’t take this wrong, but your config.lua should be one of the first things you address since it controls how you layout everything. The config.lua you posted here:

local aspectRatio = display.pixelHeight / display.pixelWidth application = { content = { width = aspectRatio \> 1.5 and 800 or math.floor( 1200 / aspectRatio ), height = aspectRatio \< 1.5 and 1200 or math.floor( 800 \* aspectRatio ), scale = "letterBox", fps = 30, &nbsp; &nbsp; &nbsp; imageSuffix = { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ["@2x"] = 1.3, &nbsp; &nbsp; &nbsp; }, &nbsp; &nbsp; }, }

Should do everything you need to do. It defaults to center alignment. The string “letterBox” should be “letterbox”, but that’s also the default so it’s not going to change things.

If it’s not centering on the iPad’s its likely an issue with your code. For instance, lets say this is how you’re loading your background:

local background = display.newImageRect("background.png", 570, 360) background.anchorX = 0 background.anchorY = 0 background.x = 0 background.y = 0

Will draw the background starting at 0, 0 and fill left and down.

But consider this:

local background = display.newImageRect("background.png", 570, 360) background.x = display.contentCenterX background.y = display.contentCenterY

The background will be centered on the screen.  On the iPhone some of the screen will be off screen on the sides since it’s a wider screen.

The other code isn’t going to help you at all. Both are assuming you will be centering things that need to be centered and drawing things around the edges.  Some things need to be a relative distance from the edge, others a relative distance from the center.

Consider the two images below. One is an iPad shape screen, the other is a more of an iPhone 5/6 shape.   See how things like the home and gear icon are the same distance from the left edge. In these cases, I can do something like:

homeButton.x = 25

That’s easy.  But the score needs anchored to the right edge. So I would do:

scoreText.x = display.contentWidth - 50

Things along the top, set the .y to value you want. Along the bottom, set .y to display.contentHeight - 20 for instance.  Everything else, you would place some distance from the center:

bigTree.x = display.contentCenterX - 50

Rob

[system]

Hard lesson learned on this end.    I’ll take it in stride as a first attempt at programming.   I’ve got this saying…“it takes as long as it takes”.

I will give your recommendation above a try.  

Thanks for responding so quickly!

Have a great evening.

Lori

[system]

Rob,

I’ve updated what I consider the most difficult of my screens and it appears to be working like a champ!  I’ve still got more screens to update.    I’m also viewing the change on all the different size devices.

One last question.  Above you indicated to anchor the score to the right edge I would do:  scoreText.x = display.contentWidth - 50

     Which I did and it works great. 

What if I wanted to do the same concept to anchor to the left edge?  Top of screen?  Bottom of screen?

Thanks,

Lori