Problem with Modernizing the Config.lua spacing

[cozymonster29]

Hi,
I have a problem with spacing in my project. I’m using the modernized config.lua (from thistutorial) and I have been placing display objects so that they fit the Galaxy SIII, which means that they also fit into the iPhone 5, Droid, Sensation, Nook Color, and GalaxyTab. However, it doesn’t fit any of the Kindle Fires, iPhone, iPhone 4, iPad, iPad Retina, or my phone (Galaxy Nexus) - on those, some display objects are cut off.

Why is it getting cut off?

A screen in my project on the iPhone 5 - some display objects are not cut off

A screen in my project on the iPhone 4 - some display objects are cut off

[rob]

The Ultimate config.lua doesn’t position your items automatically.  It makes sure that 0,0 is the top left and display.contentWidth, display.contentHeight is the bottom right and there are no letterbox bars.

You are still responsible for making sure your items fit on the screen.  The iPhone 3/4 family of 3.5" phones have 88 less pixels than the iPhone 5 family. 

I don’t know how you are positioning things. 

Rob

[cozymonster29]

I was using display.contentWidth - # and display.contentHeight - # to position things, for example:

local myImage = display.newImage( "image.png", display.contentWidth - 100, display.contentHeight - 100)

I tried removing all of the display.contentWidth - and display.contentHeight - and just left the numbers there, and ran my project in the simulator. The result is a completely flipped project, which is logical why that would happen. However, my spacing problem still exists - it’s just that the bottom part is cut off, not the top.

[rob]

If you position something at:  display.contentHeight - 100, it will be 100 pixels from the bottom of the screen.  If you position something at display.contentHeight - 500, on the iPhone 5 that’s still on the screen (568 - 500 = 68 pixels from the top).  On the iPhone 3/4 devices, they are only 480pixels high, so display.contentHeight (which = 480 on those devices) becomes 480 - 500 or -20 … 20 pixels off screen at the top.

You have to put some code in your app that says to changing the spacing of your elements to make them fit.  Looking at your layout, I would have positioned very thing from the top except for your info icon.  You have plenty of space if on the shorter device, you move the “done” button up a bit. 

Rob

[cozymonster29]

I fixed it and I’m not really sure why. 

I unflipped everything so that it’s right side up, moved a few objects around, but then I changed the config.lua to the basic one that Lua Glider Provides:

application = { content = { width = 320, height = 480, scale = "letterBox", fps = 30, --[[imageSuffix = { ["@2x"] = 2, } --]] }, --[[-- Push notifications notification = { iphone = { types = { "badge", "sound", "alert", "newsstand" } } } --]] }

And now all of the content fits on the screen:

That’s the iPhone 5 - one of the devices where it was getting cut off.

[rob]

The Ultimate config.lua doesn’t position your items automatically.  It makes sure that 0,0 is the top left and display.contentWidth, display.contentHeight is the bottom right and there are no letterbox bars.

You are still responsible for making sure your items fit on the screen.  The iPhone 3/4 family of 3.5" phones have 88 less pixels than the iPhone 5 family. 

I don’t know how you are positioning things. 

Rob

[cozymonster29]

I was using display.contentWidth - # and display.contentHeight - # to position things, for example:

local myImage = display.newImage( "image.png", display.contentWidth - 100, display.contentHeight - 100)

I tried removing all of the display.contentWidth - and display.contentHeight - and just left the numbers there, and ran my project in the simulator. The result is a completely flipped project, which is logical why that would happen. However, my spacing problem still exists - it’s just that the bottom part is cut off, not the top.

[rob]

If you position something at:  display.contentHeight - 100, it will be 100 pixels from the bottom of the screen.  If you position something at display.contentHeight - 500, on the iPhone 5 that’s still on the screen (568 - 500 = 68 pixels from the top).  On the iPhone 3/4 devices, they are only 480pixels high, so display.contentHeight (which = 480 on those devices) becomes 480 - 500 or -20 … 20 pixels off screen at the top.

You have to put some code in your app that says to changing the spacing of your elements to make them fit.  Looking at your layout, I would have positioned very thing from the top except for your info icon.  You have plenty of space if on the shorter device, you move the “done” button up a bit. 

Rob

[cozymonster29]

I fixed it and I’m not really sure why. 

I unflipped everything so that it’s right side up, moved a few objects around, but then I changed the config.lua to the basic one that Lua Glider Provides:

application = { content = { width = 320, height = 480, scale = "letterBox", fps = 30, --[[imageSuffix = { ["@2x"] = 2, } --]] }, --[[-- Push notifications notification = { iphone = { types = { "badge", "sound", "alert", "newsstand" } } } --]] }

And now all of the content fits on the screen:

That’s the iPhone 5 - one of the devices where it was getting cut off.