Help: Why is this happening on my button?

Solar2D General Questions/Discussion
#1

Hi! This been bugging me for while. I don’t know what should I do. I tried all the means changing its height. but no luck. Please take a look

All screenshot is on different devices. I included the code to show that I didnt change anything.

My config.lua is the one that dynamically changes base on the device(not the 320x480 something) the one with ceiling something.

the image size of the button is: 1200x600 (@2x) and 600x300 (normal)

I design it like that cuz im planning to have a text inside it.

can anyone help me with this?

#2

Uhm… Why is what happening and to what button? You’ll probably get more response if you clarify what you mean. I even looked at the screenshot earlier today but I still don’t know what you mean. Everything looks right to me, depending on how you designed it.

#3

If you’re talking about your back button, and why it’s moving around so much, I think it’s because you’re relying on absolute positions and sizes (width = 600, height = 300, ypos = ypos + 300) when you should be scaling sizes and distances dynamically based on screen size . When placing buttons on a screen, you can either have assets that are built for different screen resolution OR if you’re using a single source asset, scale the buttons and button spacing from other objects with dimensions that are calculated relative to the screen size.

You need to be scaling your buttons relative to screen size if you have a single source asset.  

I think the code you’ve posted so far doesn’t let us see the whole picture of what’s happening here, can you please post all of the code related to the button spacing on this screen?  Like for instance, what is ypos defined as, how are your back & loading buttons placed.  Please place all code for this.

#4

The problem is that the iPhone 5 is a narrow but tall device and the iPad is a wide and short device.  It seems to me  you are positioning your button some relative distance from the bottom of the screen.  This is a normal thing to do, but your background isn’t allowing enough space for the button.

Rob

#5

Thanks guys for the reply… I reviewed what Rob said… but isn’t ipad is much taller than iPhone? Any solution to this? what steps should I do? do I have to get the aspectration of the device and have a set of parameters in each? Thanks again.

Jam

#6

Again please post all the code related to this issue and we can help you much better.

#7

Thanks guys for the reply… I reviewed what Rob said… but isn’t ipad is much taller than iPhone?

In terms of physical dimensions yes, but their aspect ratios are different, the iPhone 5 is 16:9 while the iPad is 4:3.  So things don’t scale 1:1.  Your math needs to account for this.

#8

This is referred to as Aspect Ratio.  While an iPhone 5 is 1136 pixels tall and 640 pixels wide, and a retina iPad is like 1536px wide and 2048px high, that seems like a big difference, but in Corona SDK you define a content area like:

320 x 480

Which happens to be a 2:3 aspect ratio, which is the shape of the iPhone 4 screen. Corona SDK will then make that area standard across all devices.  So the effective screen size for an iPhone 5 becomes 320 x 568 where as the iPad could be 360 x 480 (to kind of keep everything the same relative size). 

Of course you could build your config.lua in a way where you didn’t take advantage of this scaling, but it ends up being way more work on you in the end.

Rob

#9

That config.lua really makes  difference… oh well. I taught that implementing it will make my UI positioning much better… but it’a not… I guess I’ll stick to the 320x480 next time. Thanks guys :slight_smile:

#10

Uhm… Why is what happening and to what button? You’ll probably get more response if you clarify what you mean. I even looked at the screenshot earlier today but I still don’t know what you mean. Everything looks right to me, depending on how you designed it.

#11

If you’re talking about your back button, and why it’s moving around so much, I think it’s because you’re relying on absolute positions and sizes (width = 600, height = 300, ypos = ypos + 300) when you should be scaling sizes and distances dynamically based on screen size . When placing buttons on a screen, you can either have assets that are built for different screen resolution OR if you’re using a single source asset, scale the buttons and button spacing from other objects with dimensions that are calculated relative to the screen size.

You need to be scaling your buttons relative to screen size if you have a single source asset.  

I think the code you’ve posted so far doesn’t let us see the whole picture of what’s happening here, can you please post all of the code related to the button spacing on this screen?  Like for instance, what is ypos defined as, how are your back & loading buttons placed.  Please place all code for this.

#12

The problem is that the iPhone 5 is a narrow but tall device and the iPad is a wide and short device.  It seems to me  you are positioning your button some relative distance from the bottom of the screen.  This is a normal thing to do, but your background isn’t allowing enough space for the button.

Rob

#13

Thanks guys for the reply… I reviewed what Rob said… but isn’t ipad is much taller than iPhone? Any solution to this? what steps should I do? do I have to get the aspectration of the device and have a set of parameters in each? Thanks again.

Jam

#14

Again please post all the code related to this issue and we can help you much better.

#15

Thanks guys for the reply… I reviewed what Rob said… but isn’t ipad is much taller than iPhone?

In terms of physical dimensions yes, but their aspect ratios are different, the iPhone 5 is 16:9 while the iPad is 4:3.  So things don’t scale 1:1.  Your math needs to account for this.

#16

This is referred to as Aspect Ratio.  While an iPhone 5 is 1136 pixels tall and 640 pixels wide, and a retina iPad is like 1536px wide and 2048px high, that seems like a big difference, but in Corona SDK you define a content area like:

320 x 480

Which happens to be a 2:3 aspect ratio, which is the shape of the iPhone 4 screen. Corona SDK will then make that area standard across all devices.  So the effective screen size for an iPhone 5 becomes 320 x 568 where as the iPad could be 360 x 480 (to kind of keep everything the same relative size). 

Of course you could build your config.lua in a way where you didn’t take advantage of this scaling, but it ends up being way more work on you in the end.

Rob

#17

That config.lua really makes  difference… oh well. I taught that implementing it will make my UI positioning much better… but it’a not… I guess I’ll stick to the 320x480 next time. Thanks guys :slight_smile: