Edit: Sorry for the vague title lol
So if you guys ever played cookie clicker, when you tap on the cookie, the cookie would “contract and expand”.
Here is what I mean:
How can you replicate this?
If your cookie is a display object, then add a simple transition to the touch event. When the display object is touched, you initiate a transition that will increase the xScale and yScale of the event target. Then, just add an onComplete listener to the transition that launches another transition that will scale down the object to its normal size. Finally, you get that nice bouncy effect by including easing effects in both transitions.
i would do a transition of xScale, yScale to 0.8 on begin touch event.
on end touch event i would return to 1.0 with bouncing effect.
to complicate things, i would also make transition cancel if it detects any transition still going to be able to do the one i want without problems.
if you don’t understand what i just said, just go read the manual and study transitions, this should be a 5 minutes problem. difficult level 0.
I agree with both of the above comments, but would also like to add that it may be worth checking out the transition2 module by @Marcus Ranner which has a built in ‘reverse’ feature so you don’t need to call a separate function to make the animation return to its starting state.
Ah interesting I’ll try these out Thanks guys!
you can also get it done with a single transition, as long as you override the final value, for example:
local function ease(a,b,c,d) return c+d\*(((1-a/b)^2)-((1-a/b)^40))\*1.23 end local function reset(t) t.xScale,t.yScale=1,1 end button = display.newRect(100,100,50,50) function button:touch(e) if (e.phase=="began") then transition.to(self,{time=300,xScale=1.2,yScale=1.2,transition=ease,onComplete=reset}) end end button:addEventListener("touch")Dave’s solution is pleasantly elegant.
I would perhaps add an extra condition to all suggested approaches that you should prevent a new transition from firing until the previous one has finished.
I added my suggestion to Dave’s initial code.
local function ease(a,b,c,d) return c+d\*(((1-a/b)^2)-((1-a/b)^40))\*1.23 end local function reset(t) t.xScale,t.yScale=1,1;t.canTouch=true end button = display.newRect(100,100,50,50) button.canTouch = true function button:touch(e) if (e.phase=="began" and e.target.canTouch) then e.target.canTouch = false transition.to(self,{time=300,xScale=1.2,yScale=1.2,transition=ease,onComplete=reset}) end end button:addEventListener("touch")
Can be done with a single transition
object.canTouch = false transition.to(object,{time=300,xScale=1.2,yScale=1.2,transition=easing.continuousLoop, onComplete=function(target) target.canTouch=true end})If your cookie is a display object, then add a simple transition to the touch event. When the display object is touched, you initiate a transition that will increase the xScale and yScale of the event target. Then, just add an onComplete listener to the transition that launches another transition that will scale down the object to its normal size. Finally, you get that nice bouncy effect by including easing effects in both transitions.
i would do a transition of xScale, yScale to 0.8 on begin touch event.
on end touch event i would return to 1.0 with bouncing effect.
to complicate things, i would also make transition cancel if it detects any transition still going to be able to do the one i want without problems.
if you don’t understand what i just said, just go read the manual and study transitions, this should be a 5 minutes problem. difficult level 0.
I agree with both of the above comments, but would also like to add that it may be worth checking out the transition2 module by @Marcus Ranner which has a built in ‘reverse’ feature so you don’t need to call a separate function to make the animation return to its starting state.
Ah interesting I’ll try these out Thanks guys!
you can also get it done with a single transition, as long as you override the final value, for example:
local function ease(a,b,c,d) return c+d\*(((1-a/b)^2)-((1-a/b)^40))\*1.23 end local function reset(t) t.xScale,t.yScale=1,1 end button = display.newRect(100,100,50,50) function button:touch(e) if (e.phase=="began") then transition.to(self,{time=300,xScale=1.2,yScale=1.2,transition=ease,onComplete=reset}) end end button:addEventListener("touch")Dave’s solution is pleasantly elegant.
I would perhaps add an extra condition to all suggested approaches that you should prevent a new transition from firing until the previous one has finished.
I added my suggestion to Dave’s initial code.
local function ease(a,b,c,d) return c+d\*(((1-a/b)^2)-((1-a/b)^40))\*1.23 end local function reset(t) t.xScale,t.yScale=1,1;t.canTouch=true end button = display.newRect(100,100,50,50) button.canTouch = true function button:touch(e) if (e.phase=="began" and e.target.canTouch) then e.target.canTouch = false transition.to(self,{time=300,xScale=1.2,yScale=1.2,transition=ease,onComplete=reset}) end end button:addEventListener("touch")Can be done with a single transition
object.canTouch = false transition.to(object,{time=300,xScale=1.2,yScale=1.2,transition=easing.continuousLoop, onComplete=function(target) target.canTouch=true end})