button hit area after scaling

skyhelpme · April 19, 2016, 11:23pm

I am trying to animate a button from small to its normal size. So I created it using:

local btn = widget.newButton({

defaultFile = defaultFilePath,

overFile = overFilePath,

width = 1,

height = 1,

x = 100, y = 100

})

after that I use “transition.to” to animate it to desire size 125x125 from 1x1

transition.to( btn, { time = 700, delay = 2000, transition=easing.inQuart, xScale=125, yScale=125} )

the button looks good and with size 125x125, however seems the hit area got scale up a lot more than the button and covering the entire screen. So no matter where I click on the screen it will trigger the onPress of the “btn”.

I tried to remove the line transition.to and change the width and height to 125 when I define the button, then it works fine, but I just couldn’t have the animation to scale it up. Is it a bug on scaling or did I mess up something here? Thanks.

bjsorrentino · April 20, 2016, 8:23pm

Hi @skyhelpme,

This doesn’t seem to be an issue with the button. Unless the button actually is the full size of the screen at some point (and it’s probably not at 100x100 or even 125x125), the touch response you’re getting is not coming from the button, but instead somewhere else.

Also, you haven’t specified an actual listener function for the button (within its declaration, as should be done), so there’s no way it can be dispatching a touch event.

Basically, your touch response is coming from somewhere else in your code, not the button. Look for where that is and you should be able to fix things. The button scaling does not appear to be the issue here.

Take care,

Brent

skyhelpme · April 20, 2016, 9:08pm

Hello Brent,

Thanks for checking. However, the code I posted here is just a short version, actually I do have the onRelease listener attached to the object. I have created a demo and attached in this reply. Please check.

If you just open the project and run it in the simulator, the button should work fine. The click area is good as well. However, I would like to animate it so it scales up.

If you go to scenes/landing.lua, uncomment line 29-30, and comment line 31-32 to make it like:

width = 1,

height = 1,

–width = 125,

–height = 125,

and then also uncomment line 40 the transition.to

If you restart the program in the simulator, you will find that the button now scales up however the hit area is much larger than itself. That’s where I got confused.

bjsorrentino · April 23, 2016, 3:23am

Hi @skyhelpme,

Did you solve this yet? I looked at your code, and here’s my advice:

When you create the button, don’t “artificially” set its width/height to much smaller than the images it’s based on. In other words, since the images are 125x125, keep your width/height declarations at 125 each.
Now, immediately after you create the button, set its scale to 1/125th of its size (0.008). This will naturally reduce the button down to a tiny size.
When you transition its size, just scale it back up to xScale and yScale of 1, bringing it back to 100% (125x125).

Hope this helps,

Brent

skyhelpme · April 23, 2016, 4:07am

Hi Brent,

I did exactly what you suggested two days ago and that was my final approach. I don’t call it “solved” because we should be able to initialize it with 1x1, then scale up to 125x125.

even the image is in 125x125, if I initialize the button with 1x1, the image will scale down 125 times, right? And at that time the hit area is still correct. The hit area got messed up only after we scale the button up, so I think it may be a bug in corona? Or, is there a way for us to define the hit area?

Thanks.

bjsorrentino · April 23, 2016, 6:10am

Hi @skyhelpme,

Just to clarify, you could scale up from a smaller button if you really wanted to, but I wouldn’t advise it because the visual quality would suffer, just like when you stretch a bitmap in an image editor program. Also, as noted in the documentation for widget buttons, the defined width/height are “The width and height of the image files.”. So, those should always match your actual image file dimensions, no matter what kind of scaling you’re applying afterward. In your case, you were abnormally tweaking the widget construction by setting a 1x1 width/height on a 125x125 image object.

Best regards,

Brent

skyhelpme · April 23, 2016, 6:15am

Hello Brent,

I see. So if I wanna animate a button from from 0 to 125x125, what’s the correct way to do that? I don’t mind to change all my code, I would rather do it right instead of putting trick to hack it.

Thanks

bjsorrentino · April 23, 2016, 6:23am

Hi again,

I would do similar to what (I think) you’re already doing, where you configure the widget button at its full “natural” size, then immediately after, set its scale to 0. When the time comes to scale it up, just use the transition line you’re already using, setting its final scale to 1.

Brent

skyhelpme · April 23, 2016, 6:29am

ok, thanks. So I will keep that in my code for right and close this ticket.

Thanks for your help!

bjsorrentino · April 20, 2016, 8:23pm

Hi @skyhelpme,

This doesn’t seem to be an issue with the button. Unless the button actually is the full size of the screen at some point (and it’s probably not at 100x100 or even 125x125), the touch response you’re getting is not coming from the button, but instead somewhere else.

Also, you haven’t specified an actual listener function for the button (within its declaration, as should be done), so there’s no way it can be dispatching a touch event.

Basically, your touch response is coming from somewhere else in your code, not the button. Look for where that is and you should be able to fix things. The button scaling does not appear to be the issue here.

Take care,

Brent

skyhelpme · April 20, 2016, 9:08pm

Hello Brent,

Thanks for checking. However, the code I posted here is just a short version, actually I do have the onRelease listener attached to the object. I have created a demo and attached in this reply. Please check.

If you just open the project and run it in the simulator, the button should work fine. The click area is good as well. However, I would like to animate it so it scales up.

If you go to scenes/landing.lua, uncomment line 29-30, and comment line 31-32 to make it like:

width = 1,

height = 1,

–width = 125,

–height = 125,

and then also uncomment line 40 the transition.to

If you restart the program in the simulator, you will find that the button now scales up however the hit area is much larger than itself. That’s where I got confused.

bjsorrentino · April 23, 2016, 3:23am

Hi @skyhelpme,

Did you solve this yet? I looked at your code, and here’s my advice:

When you create the button, don’t “artificially” set its width/height to much smaller than the images it’s based on. In other words, since the images are 125x125, keep your width/height declarations at 125 each.
Now, immediately after you create the button, set its scale to 1/125th of its size (0.008). This will naturally reduce the button down to a tiny size.
When you transition its size, just scale it back up to xScale and yScale of 1, bringing it back to 100% (125x125).

Hope this helps,

Brent

skyhelpme · April 23, 2016, 4:07am

Hi Brent,

I did exactly what you suggested two days ago and that was my final approach. I don’t call it “solved” because we should be able to initialize it with 1x1, then scale up to 125x125.

even the image is in 125x125, if I initialize the button with 1x1, the image will scale down 125 times, right? And at that time the hit area is still correct. The hit area got messed up only after we scale the button up, so I think it may be a bug in corona? Or, is there a way for us to define the hit area?

Thanks.

bjsorrentino · April 23, 2016, 6:10am

Hi @skyhelpme,

Just to clarify, you could scale up from a smaller button if you really wanted to, but I wouldn’t advise it because the visual quality would suffer, just like when you stretch a bitmap in an image editor program. Also, as noted in the documentation for widget buttons, the defined width/height are “The width and height of the image files.”. So, those should always match your actual image file dimensions, no matter what kind of scaling you’re applying afterward. In your case, you were abnormally tweaking the widget construction by setting a 1x1 width/height on a 125x125 image object.

Best regards,

Brent

skyhelpme · April 23, 2016, 6:15am

Hello Brent,

I see. So if I wanna animate a button from from 0 to 125x125, what’s the correct way to do that? I don’t mind to change all my code, I would rather do it right instead of putting trick to hack it.

Thanks

bjsorrentino · April 23, 2016, 6:23am

Hi again,

I would do similar to what (I think) you’re already doing, where you configure the widget button at its full “natural” size, then immediately after, set its scale to 0. When the time comes to scale it up, just use the transition line you’re already using, setting its final scale to 1.

Brent

skyhelpme · April 23, 2016, 6:29am

ok, thanks. So I will keep that in my code for right and close this ticket.

Thanks for your help!