CODEWITHSUNDEEP
buttoncoronasdk
user1919334
user1919334

Reputation: 11

Corona SDK inverting button

I am trying to make a button class for my game. It has a white background and black text. I want it to invert when it is pressed down.

The problem is that the draw event interferes with the touch event because the draw event sets the color and I call the draw event every enterFrame. If I could test to see if the screen is being touched and where it is being touched inside the enterFrame event that would solve my problem, but as far as I can tell the only way to test these these things is inside the touch event.

How would I accomplish the inverting?

Here is my code:

--Button Class
local button = {}
local button_mt = { __index = button }  -- metatable

--button.new function
function button.new (x, y, width, height, text) -- constructor
        
    local newButton = {
    x = x,
    y = y,
    width = width,
    height = height,
    text = text,
    rect = display.newRoundedRect (x-width/2, y-height/2, width, height, 10),
    displayText = display.newText (text, x, y, native.systemFont, 16),
    inverted = false,
    timer = 5
    };
    
    return setmetatable( newButton, button_mt );
end

--Button activate function
function button:activate()
self.rect:addEventListener ("touch", self);
self.displayText:setTextColor (0, 0, 0);
end

--Button touch event
function button:touch (event)
if event.phase == "ended" or event.phase == "cancelled" then
    self.inverted = false;
else
    self.inverted = true;
end
end

--Button draw function
function button:draw()
self.displayText.x = self.x;
self.displayText.y = self.y;
self.rect.x = self.x;
self.rect.y = self.y;
self.rect.width = self.width;
self.rect.height = self.height;
self.displayText.text = self.text;
if self.inverted then
    self.displayText:setTextColor (255, 255, 255);
    self.rect:setFillColor (0, 0, 0);
else
    self.displayText:setTextColor (0, 0, 0);
    self.rect:setFillColor (255, 255, 255);
end
end

return button;

Edit: Okay I am getting somewhere, but now your finger has to be moving for it to stay inverted

Almost got it now. The button inverts and changes back, but if you touch the button and without releasing your finger slide your finger off the button it stays inverted.

Upvotes: 1

Views: 1015

Answers (1)

speeder
speeder

Reputation: 6296

Try this, setFocus make the system throw all touch events on the focused thing. As you set focus on the button after begging a touch or moving a touch into it, the focus will be "hijacked", from now on the button will track the touch, and anywhere you move your finger on the screen it will remain tracking it.

As soon as you lift your finger it will trigger the "ended" phase.

Note that lifting the finger ANYWHERE on the screen will trigger "ended" phase, thus I suggest you use event.target.contentBounds to track where the button is, check if the finger is inside or not, and appropriately consider it a real "ended" thing or "cancelled" thing on your own.

function button:touch (event)
if event.phase == "ended" or event.phase == "cancelled" then
    display.getCurrentStage():setFocus(nil)
    self.inverted = false;
else
    display.getCurrentStage():setFocus(event.target)
    self.inverted = true;
end
end

Upvotes: 1

Related Questions