Making buttons fit to any device on CORONA?.

Solar2D General Questions/Discussion
#1

Hi Guys,

I have a problem regarding the buttons in my app mainmenu.

I cant seems to fit the buttons to any devices. The buttons will be stretched or out of place. 

Any ideas?

Here is the Buttons code:

Enter\_Btn = widget.newButton { width = 157, --width of the image file(s) height = 222, --height of the image file(s) defaultFile = "Images/Enter.png", --the "default" image file onRelease = onEnterBtnRelease -- event listener function } Enter\_Btn.x = display.contentWidth \* 0.25 Enter\_Btn.y = display.contentHeight / 3.5 

There are 4 buttons, 2 on top 2 below. It cant seems to fit to the device screen.

I am testing out on Iphone 5 in the simulator. Once I placed everything correctly on the Iphone 5 and changes to another device, the buttons became stretched and overlapping each other. 

#2

Check your content scaling settings on your config.lua.

I always use letterBox to avoid any type of distortion.

Read here more info:  http://coronalabs.com/blog/2010/11/20/content-scaling-made-easy/

#3

I think I did use Letterbox.

Here is my config.lua:

local aspectRatio = display.pixelHeight / display.pixelWidth application = { content = { width = aspectRatio \> 1.5 and 320 or math.ceil( 480 / aspectRatio ), height = aspectRatio \< 1.5 and 480 or math.ceil( 320 \* aspectRatio ), scale = "letterBox", fps = 30, imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, }

Is there anything wrong with the config.lua?

It seems that some of my image in the app is working fine as it is able to fit the screen of any devices.

*** I came to realise that the problem only occurs on Apple product Simulator. Every android simulator works fine(Able to fit without overlapping)

#4

“letterbox”, not “letterBox”.

#5

Just FYI, both “letterbox” and “letterBox” should be accepted by Corona… this is one rare case where case-sensitivity doesn’t matter. :slight_smile:

Brent

#6

Thanks for all the reply.

But does anyone know why Apple devices simulator will give me that problem?

I tried on Galaxy Tab, Galaxy S3, Kindle Fire 7" and 9" and NexusOne, all of it will “adjust” itself and no overlapping problem.

Overlapping problem happens only on Apple device simulator.

#7

Why do you use that formula to define your width & height?

#8

Check your content scaling settings on your config.lua.

I always use letterBox to avoid any type of distortion.

Read here more info:  http://coronalabs.com/blog/2010/11/20/content-scaling-made-easy/

#9

I think I did use Letterbox.

Here is my config.lua:

local aspectRatio = display.pixelHeight / display.pixelWidth application = { content = { width = aspectRatio \> 1.5 and 320 or math.ceil( 480 / aspectRatio ), height = aspectRatio \< 1.5 and 480 or math.ceil( 320 \* aspectRatio ), scale = "letterBox", fps = 30, imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, }

Is there anything wrong with the config.lua?

It seems that some of my image in the app is working fine as it is able to fit the screen of any devices.

*** I came to realise that the problem only occurs on Apple product Simulator. Every android simulator works fine(Able to fit without overlapping)

#10

“letterbox”, not “letterBox”.

#11

Just FYI, both “letterbox” and “letterBox” should be accepted by Corona… this is one rare case where case-sensitivity doesn’t matter. :slight_smile:

Brent

#12

Thanks for all the reply.

But does anyone know why Apple devices simulator will give me that problem?

I tried on Galaxy Tab, Galaxy S3, Kindle Fire 7" and 9" and NexusOne, all of it will “adjust” itself and no overlapping problem.

Overlapping problem happens only on Apple device simulator.

#13

Why do you use that formula to define your width & height?