Buttons are an interesting beast in Corona SDK, because there are multiple ways to build them. In the end, though it all boils down to this. You need a graphic for the button and you need a function to handle when its tapped.
Lets start with the basics of touch and tap events. Corona SDK is an event based product which means that things happen when various events happen like touching the screen, shaking the device, etc.
Touching the screen created two types of events that can be monitored for and processed by your code. They are “tap” and “touch”.
With “touch” you get an event fired off when the user touches the screen, another event if they move their finger while touching the screen and then you get an event when they lift up their finger. Most buttons respond when the user lifts the finger.
Using “touch”, you can change the graphic to a a different “down” or “pressed” look. You can if they move their finger too far decide to cancel the touch or when you get the “ended” phase, i.e. they lifted their finger, you can put the button back to its original look and then do whatever you want with the code now that your button has been pressed.
The other event, which to me is much easier to deal with for buttons is the “tap” event. You get one trigger event when the tap is finished.
Lets look at the simplest case using “tap”
-- create a display object with the buttong graphic
local playButton = display.newImageRect("playbutton.png", 128,48)
-- center the button
playButton.x = display.contentWidth / 2
playButton.y = display.contentHeight / 2
-- Add it to a group. If you're using storyboard, "group" should be
-- created for you. If you're using Director, then it will be
-- "localGroup". You might have your own display group to add it to.
group:insert(playButton)
local function pressedPlay(event)
-- the user has tapped the play button and now you have its event.
-- put your code here to do whatever you need to do when the player
-- taps play
end
-- now attach your button function to the button itself
playButton:addEventListener("tap", pressedPlay)
That is the simplest case. No animation for a down-state for the button, no hoopla.
Now if you want fancier stuff, there are three ways to handle that.
-
Change the above to a “touch” event instead of a “tap”.
Then you can either have two display.newRect()'s sitting on top of each other, one has an .isVisible Property of true, the other false and your code will toggle them during the “began” phase event and toggle back on “ended”. Or you can use a movieclip (an external Lua file floating around in the sample code or from the website) and instead of a display.newRect, you use movieclip.newAnim() and load in the two different images and you’re pressedPlay can play which ever graphic is appropriate for the current state of the button. Sounds a bit complicated? Well that’s a great segway to …
-
Use the ui.lua library which has a ui.newButton() call where you can pass in the names of your up and down graphics, and the function to call when its done. It’s a pretty powerful yet simple button controller that does all of #1 above for you. The draw back is there are a trillion versions out there, some support retina graphics, others don’t. You will want to find the latest one with the largest version number. Your mileage may vary.
-
Use the new widget based button controller. This builds more native looking buttons. Its easy to get a basic button, but a bit harder to get a more complex looking button going. See widget.newButton (I think)
[import]uid: 19626 topic_id: 20867 reply_id: 82244[/import]
