Transition.to For Scaling Object

Solar2D General Questions/Discussion
#1

hi, I’m trying to create a transition, that when touch event is activated will gradually scale an object…

**local w= ball.width
local h= ball.height

function ballIncrease()
       transition.to( ball, {time=5000, w=5, h=5} )
end

function ballReturn()
    transition.to( ball, {time=500, delay= 500, w=1,h=1} )
end

local onTouch = function( event )
 
    if(event.phase == “began”)then
        ballIncrease()
    elseif (event.phase == “ended” or event.phase == “cancelled”)then
        ballReturn()
    end
end
Runtime:addEventListener( “touch”, onTouch )**

I don’t get errors or anything, but it simply doesn’t do anything…

Anyone got an idea?

#2

Hi there,

Instead of using w and h in your transition, try using xScale and yScale.  Those are the properties that actually control the scale of the object.

Hope this helps!

  • Andrew
#3

Still doesn’t do anything… :\

#4

Hi there,

Ah, there’s one other issue with your code that I didn’t notice at first.  You can’t add a “touch” listener to the Runtime object.  You have to add it to an actual display object.  (http://developer.coronalabs.com/content/events-and-listeners)  You could, for example, add it to the ball itself, or you could add it to your background image, whichever you want to trigger the growing and shrinking.  Give that a try and let me know if it works.

  • Andrew
#5

Still nothing…

Just to be clear though, can’t I create a touch event for the entire scene, regardless of where I touch?

#6

Hi there,

If you don’t mind repasting the latest, revised version of your full code (including the part where you create the ball), I’ll take a look.

You can create a touch event for the entire scene, but not through a runtime listener.  Instead, you can create a background image and apply the touch listener to that.  If you want, you can create a transparent rectangle using display.newRect() (but be aware, if you make it fully transparent, set its isHitTestable property to true in order to make sure it receives touch events).

  • Andrew
#7

Full code:

display.setStatusBar(display.HiddenStatusBar) 

local timeLastEnemy = 0 

local background = display.newImage(“bg.png”)  

local indicator = display.newImage(“charSprite.png”)  

indicator:setReferencePoint(display.CenterReferencePoint)  

indicator.x = display.contentWidth * 0.5  

indicator.y = display.contentWidth * 0.5 + 50

local acc = {}  

local centerX = display.contentWidth * 0.5

function acc:accelerometer(e)  

    indicator.x = centerX + (centerX * e.xGravity)  

end 

Runtime:addEventListener(“accelerometer”, acc)  

–[[Activates Character, Background and Accelerometer]]

local score=0

local ball=display.newImage(“Ball.png”)

ball.x=indicator.x

ball.y=indicator.y-50

ball:setReferencePoint(display.CenterReferencePoint)

    

local physics = require “physics”

physics.start()

physics.addBody(indicator, “static”, {bounce=0.5})

local grass = display.newImage(“grass.png”)

grass.y=650

physics.addBody(grass, “static”, {friction=0.3})

local function dropAction()

local crate= display.newImage(“crate.png”)

crate.width = 50

crate.height= 50

crate.y=-30

crate.x= math.random(5,1000)

crate.rotation=50

physics.addBody(crate, “dynamic”, {bounce=0.5})

print(“object created”)

–[[makes crates disappear after collision]]

local function crateRemove()

crate:removeSelf()

crate=nil

print(“object deleted”)

end

local function onLocalCollision( self, event )

        if ( event.phase == “began” ) then

timer.performWithDelay(1000, crateRemove)

end

end

crate.collision = onLocalCollision

crate:addEventListener( “collision”, crate)

end

local function dropBox()

timer.performWithDelay(math.random(500, 1500), dropAction);

end

local function gameLoop(event)

if event.time - timeLastEnemy >= math.random(1000, 2000) then

dropBox()

timeLastEnemy = event.time

end

end

–[[Touch event]]

local h= ball.yScale

local w= ball.xScale

function ballIncrease()

       transition.to( ball, {time=5000, w=5, h=5} )

end

function ballReturn()

    transition.to( ball, {time=500, delay= 500, w=1,h=1} )

end

local onTouch = function( event ) 

    if(event.phase == “began”)then

        ballIncrease()

    elseif (event.phase == “ended” or event.phase == “cancelled”)then

        ballReturn()

    end

end 

background:addEventListener( “touch”, onTouch )

–[[end of Touch event]]

Runtime:addEventListener(“enterFrame”, gameLoop)

#8

I haven’t tried running this code yet, because I notice that the transitions haven’t been change to what I was suggesting originally.  In the ballIncrease function, instead of [lua]transition.to( ball, {time=5000, w=5, h=5} )[/lua], try [lua]transition.to( ball, {time=5000, xScale=5, yScale=5} )[/lua], and make a similar change in the transition in the ballReturn function.

#9

oh I see what you mean, I just changed the w and h parameters to ball.xScale and ball.yScale. Sorry my bad.

Now it’s working, a big buggy but I think i’ll manage to fix that…

thank you :slight_smile:

#10

Hi there,

Instead of using w and h in your transition, try using xScale and yScale.  Those are the properties that actually control the scale of the object.

Hope this helps!

  • Andrew
#11

Still doesn’t do anything… :\

#12

Hi there,

Ah, there’s one other issue with your code that I didn’t notice at first.  You can’t add a “touch” listener to the Runtime object.  You have to add it to an actual display object.  (http://developer.coronalabs.com/content/events-and-listeners)  You could, for example, add it to the ball itself, or you could add it to your background image, whichever you want to trigger the growing and shrinking.  Give that a try and let me know if it works.

  • Andrew
#13

Still nothing…

Just to be clear though, can’t I create a touch event for the entire scene, regardless of where I touch?

#14

Hi there,

If you don’t mind repasting the latest, revised version of your full code (including the part where you create the ball), I’ll take a look.

You can create a touch event for the entire scene, but not through a runtime listener.  Instead, you can create a background image and apply the touch listener to that.  If you want, you can create a transparent rectangle using display.newRect() (but be aware, if you make it fully transparent, set its isHitTestable property to true in order to make sure it receives touch events).

  • Andrew
#15

Full code:

display.setStatusBar(display.HiddenStatusBar) 

local timeLastEnemy = 0 

local background = display.newImage(“bg.png”)  

local indicator = display.newImage(“charSprite.png”)  

indicator:setReferencePoint(display.CenterReferencePoint)  

indicator.x = display.contentWidth * 0.5  

indicator.y = display.contentWidth * 0.5 + 50

local acc = {}  

local centerX = display.contentWidth * 0.5

function acc:accelerometer(e)  

    indicator.x = centerX + (centerX * e.xGravity)  

end 

Runtime:addEventListener(“accelerometer”, acc)  

–[[Activates Character, Background and Accelerometer]]

local score=0

local ball=display.newImage(“Ball.png”)

ball.x=indicator.x

ball.y=indicator.y-50

ball:setReferencePoint(display.CenterReferencePoint)

    

local physics = require “physics”

physics.start()

physics.addBody(indicator, “static”, {bounce=0.5})

local grass = display.newImage(“grass.png”)

grass.y=650

physics.addBody(grass, “static”, {friction=0.3})

local function dropAction()

local crate= display.newImage(“crate.png”)

crate.width = 50

crate.height= 50

crate.y=-30

crate.x= math.random(5,1000)

crate.rotation=50

physics.addBody(crate, “dynamic”, {bounce=0.5})

print(“object created”)

–[[makes crates disappear after collision]]

local function crateRemove()

crate:removeSelf()

crate=nil

print(“object deleted”)

end

local function onLocalCollision( self, event )

        if ( event.phase == “began” ) then

timer.performWithDelay(1000, crateRemove)

end

end

crate.collision = onLocalCollision

crate:addEventListener( “collision”, crate)

end

local function dropBox()

timer.performWithDelay(math.random(500, 1500), dropAction);

end

local function gameLoop(event)

if event.time - timeLastEnemy >= math.random(1000, 2000) then

dropBox()

timeLastEnemy = event.time

end

end

–[[Touch event]]

local h= ball.yScale

local w= ball.xScale

function ballIncrease()

       transition.to( ball, {time=5000, w=5, h=5} )

end

function ballReturn()

    transition.to( ball, {time=500, delay= 500, w=1,h=1} )

end

local onTouch = function( event ) 

    if(event.phase == “began”)then

        ballIncrease()

    elseif (event.phase == “ended” or event.phase == “cancelled”)then

        ballReturn()

    end

end 

background:addEventListener( “touch”, onTouch )

–[[end of Touch event]]

Runtime:addEventListener(“enterFrame”, gameLoop)

#16

I haven’t tried running this code yet, because I notice that the transitions haven’t been change to what I was suggesting originally.  In the ballIncrease function, instead of [lua]transition.to( ball, {time=5000, w=5, h=5} )[/lua], try [lua]transition.to( ball, {time=5000, xScale=5, yScale=5} )[/lua], and make a similar change in the transition in the ballReturn function.

#17

oh I see what you mean, I just changed the w and h parameters to ball.xScale and ball.yScale. Sorry my bad.

Now it’s working, a big buggy but I think i’ll manage to fix that…

thank you :slight_smile: