Button fly in with tween

Questions
1

Can i let a button fly in
Here is the code i use but then i lose the touche. How does this come


function setup()
       pos=vec2(300,100)
    x2=300
    y2=300
 tween(0.5,pos,{x=x2,y=y2},{easing= tween.easing.backOut  ,loop= tween.loop.once})
 
     button1 = Buttons("Cargo Bot:Condition Green","Cargo Bot:Condition Green",0,0)
    
    button1.action =
    function()
        
    end
   
end

-- This function gets called once every frame
function draw()
    -- This sets a dark background color 
    background(40, 40, 50)

    -- This sets the line thickness
    strokeWidth(5)
pushMatrix () 
    
 translate(pos.x,pos.y)
    button1:draw()
  popMatrix() 


end

function touched(touch)
    button1:touched(touch)
end

Buttons = class()

function Buttons:init(btnOne,btnTwo,x,y)
    self.pos=vec2(x,y)
   self.btnOne=btnOne
   self.btnTwo=btnTwo
   self.selected=false
   self.action=nil
   self.w,self.h=spriteSize("Cargo Bot:Condition Green")
end

function Buttons:draw()
   if self.selected == true  then
       sprite("Cargo Bot:Condition Green",self.pos.x,self.pos.y,self.w+90,self.h)
   elseif self.selected == false then
       sprite("Cargo Bot:Condition Green",self.pos.x,self.pos.y,self.w+90,self.h)
   end
       
end

function Buttons:touched(touch)
   if touch.state == BEGAN or touch.state == MOVING  then
       if math.abs(self.pos.x - touch.x) <= (self.w/2+90) 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
2

Here’s a working version, with multiple buttons:


function setup()
    buttons = {}
    local count = 4
    for i = 1, count do
        buttons[#buttons + 1] = Buttons("Cargo Bot:Condition Red","Cargo Bot:Condition Green",100 + (WIDTH - 200) * ((i - 1) / (count - 1)),300)
        
        buttons[#buttons].action = function()
            print("Touched button " .. i)
        end
    end
end

-- This function gets called once every frame
function draw()
    -- This sets a dark background color 
    background(40, 40, 50)

    -- This sets the line thickness
    strokeWidth(5)
    
    for i = 1, #buttons do
        buttons[i]:draw()
    end
end

function touched(touch)
    for i = 1, #buttons do
        buttons[i]:touched(touch)
    end
end

Buttons = class()

function Buttons:init(btnOne,btnTwo,x,y)
    self.pos={x=0,y=0}
   self.btnOne=btnOne
   self.btnTwo=btnTwo
   self.selected=false
   self.action=nil
   self.w,self.h=spriteSize("Cargo Bot:Condition Green")
    tween(0.5,self.pos,{x=x,y=y},{easing= tween.easing.backOut  ,loop= tween.loop.once})
end

function Buttons:draw()
   if self.selected == true  then
       sprite(self.btnTwo, self.pos.x,self.pos.y,self.w+90,self.h)
   elseif self.selected == false then
       sprite(self.btnOne,self.pos.x,self.pos.y,self.w+90,self.h)
   end

end

function Buttons:touched(touch)
   if touch.state == BEGAN or touch.state == MOVING  then
       if math.abs(self.pos.x - touch.x) <= (self.w/2+90) 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

The problem was that you were only changing where they were visually, but to the Button’s code, it was still in the bottom left corner. If you took away the translate() and changed it so it says when the button was pressed, you can see what the program was thinking was on the screen.

3

It workshop fine thanks. But is it possible to put it outside of the class button.
Because now every button i make moves with that one tween.
And if i won’t my button to disapear again when i push it won’t work