Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

What's the propper way to make a tween.path start each time a button is pressed?

edited November 2014 in Questions Posts: 30
Hello all, long time reader, first time poster. Thanks in advance to anyone taking the time to read this. All guidance is welcome. I am very new to Codea and programing in general, so please bare with me, as I am sure this is extremely simple to most here.

  I have created a very basic app and was trying to spice things up with a few short animations. I've successfully made a tween.path just the way I need it, and it looks great in my actual game. I'm just not sure of the best way to call the animation each time my button is pressed. So far, I have been able to to get it to start on press, but with some weird results. 

 My first couple tries caused the sprite to appear static with no animation at all. Another attempt, the animation flickered and jumped around the path, sometimes only showing while actualy touching the button.  At one point, I actually thought I had it working correctly, but then realized it only worked for the first three seconds of running the app, after that its as if the animation has already completed in the background.

 I have made a very simple example to try and wrap my head around exactly how all this tween.path stuff works. Im clearly missing something. Any help would be greatly appreciated. 
--# Main
-- *Tween.Path Post Press
--
-- What is the propper way to make a tween.path start each time a button is pressed? 

function setup()

     --create the button
     button = Button("Planet Cute:Chest Closed","Planet Cute:Chest Open",WIDTH/2,HEIGHT/2)
     button.action = function() buttonPressed() end

     --create my path
     strt = {x = WIDTH, y = HEIGHT, size = 20}

     t1 = {x = WIDTH/2, y = HEIGHT/2, size = 80}
     t2 = {x = WIDTH/1.8, y = HEIGHT/1.5, size = 100}
     t3 = {x = WIDTH/1.7, y = HEIGHT/1.2, size = 100}
     t4 = {x = WIDTH/1.3, y = HEIGHT/1.5, size = 0}

     tween.path(3, strt, {t1,t3,t4},{loop=tween.loop.once}) 

end

function draw()
    background(40, 40, 50)
    sprite("SpaceCute:Background",WIDTH/2,HEIGHT/2, WIDTH,HEIGHT)
    button:draw()

-- Currently setup to trigger animation on launch --  used to test tween.path. Comment out
   sprite("Planet Cute:Gem Green",strt.x, strt.y, strt.size)   


    function buttonPressed()
        -- would like tween path to start here
        -- what would be the correct way of doing this?       
        print("Gem Now ;)")
        end

    function touched(touch)
        button:touched(touch)
        end

end

--# Button
Button = class()

function Button:init(btnNorm,btnSel,x,y)
    self.pos = vec2(x,y)
    self.btnNorm = btnNorm
    self.btnSel = btnSel
    self.selected = false
    self.action = nil
    self.w,self.h = spriteSize(self.btnNorm)
end

function Button:draw()
    if self.selected == true then
        sprite(self.btnSel,self.pos.x,self.pos.y,self.w/1,self.h/1)  
    elseif self.selected == false then
        sprite(self.btnNorm,self.pos.x,self.pos.y,self.w/1,self.h/1)  
    end
end

function Button:touched(touch)
    if touch.state == BEGAN or touch.state == MOVING then
        if math.abs(self.pos.x - touch.x) <= (self.w/2)   
        and math.abs(self.pos.y - touch.y) <= (self.h/2)  then   
            self.selected = true
        else
            self.selected = false
        end
    elseif touch.state == ENDED then
        if self.selected == true and self.action then
            self.action()
        end
        self.selected = false
    end
end

Comments

  • dave1707dave1707 Mod
    edited November 2014 Posts: 7,530

    Try this. Also, the functions buttonPressed and touched shouldn't be in the draw function.


    displayMode(FULLSCREEN) function setup() button = Button("Planet Cute:Chest Closed","Planet Cute:Chest Open",WIDTH/2,HEIGHT/2) button.action = function() buttonPressed() end end function gemPath() strt = {x = WIDTH, y = HEIGHT, size = 20} t1 = {x = WIDTH/2, y = HEIGHT/2, size = 80} t2 = {x = WIDTH/1.8, y = HEIGHT/1.5, size = 100} t3 = {x = WIDTH/1.7, y = HEIGHT/1.2, size = 100} t4 = {x = WIDTH/1.3, y = HEIGHT/1.5, size = 0} tween.path(3, strt, {t1,t3,t4},{loop=tween.loop.once},gemDone) end function draw() background(40, 40, 50) sprite("SpaceCute:Background",WIDTH/2,HEIGHT/2, WIDTH,HEIGHT) button:draw() if strt then sprite("Planet Cute:Gem Green",strt.x, strt.y, strt.size) end end function buttonPressed() if not gem then gem=true gemPath() end end function gemDone() gem=false end function touched(touch) button:touched(touch) end --# Button Button = class() function Button:init(btnNorm,btnSel,x,y) self.pos = vec2(x,y) self.btnNorm = btnNorm self.btnSel = btnSel self.selected = false self.action = nil self.w,self.h = spriteSize(self.btnNorm) end function Button:draw() if self.selected == true then sprite(self.btnSel,self.pos.x,self.pos.y,self.w/1,self.h/1) elseif self.selected == false then sprite(self.btnNorm,self.pos.x,self.pos.y,self.w/1,self.h/1) end end function Button:touched(touch) if touch.state == BEGAN or touch.state == MOVING then if math.abs(self.pos.x - touch.x) <= (self.w/2) and math.abs(self.pos.y - touch.y) <= (self.h/2) then self.selected = true else self.selected = false end elseif touch.state == ENDED then if self.selected == true and self.action then self.action() end self.selected = false end end
  • dave1707dave1707 Mod
    Posts: 7,530

    @Circuit I changed the above code again to prevent another gem being created until the current gem is finished.

  • Thank you so much, that works perfectly! You have saved me hours of confusion. Actually, you have helped me a lot previous to this post, as I have read many of your comments on the forums. Thanks for all the knowledge and your speedy response.

  • @Dave1707, One other thing.

    I've noticed that the image doesn't actually disappear unless I take it down to "size = 0" on the last point of my path. Even then it's still there, just too small to see.

    If I change "t4" of "gemPath to something like:

    t4 = {x = WIDTH/1.3, y = HEIGHT/1.5, size = 20}
    

    How can I get the object to go away after completion? I've been playing with tween.reset but I'm not sure if this would be correct.

  • edited November 2014 Posts: 30

    @Dave1707 , Never mind, I think I got now...

    if strt then
            if gem then. 
            sprite("Planet Cute:Gem Green",strt.x, strt.y, strt.size)
            end
     end
    

    So simple

    Thanks again!

  • dave1707dave1707 Mod
    Posts: 7,530

    @Circuit Glad I could help even though you figured it out yourself.

Sign In or Register to comment.