New button

Getting Started Newbie Questions
#1

Hello all, 

I would like to use a button from my computer instead of a down loaded widget, I tried entering playredBtn, but since it’s not a widget I got lost after --forward declarations and other locals.  

Here are all the codes that show playBtn.

-- forward declarations and other locals local playBtn ------------------------------------------------------------------------------- -- 'onRelease' event listener for playBtn local function onPlayBtnRelease() ------------------------------------------------------------------------------- -- create a widget button (which will loads level1.lua on release) playBtn = widget.newButton { label="Play Now", labelColor = { default={0, 0, 0}, over={128} }, default="button.png", over="button-over.png", width=154, height=40, onRelease = onPlayBtnRelease -- event listener function } playBtn.x = display.contentCenterX playBtn.y = display.contentHeight - 125

Sorry the button is so large.

Appreciate any help, 

Thank you

#2

You have it close:

-- forward declarations and other locals local playBtn ------------------------------------------------------------------------------- -- 'onRelease' event listener for playBtn local function onPlayBtnRelease() -- code to react when the button is released such as: composer.gotoScene("level1") end ------------------------------------------------------------------------------- -- create a widget button (which will loads level1.lua on release) playBtn = widget.newButton { label="Play Now", labelColor = { default={0, 0, 0}, over={0.5, 0.5, 0.5 } }, default="button.png", over="button-over.png", width=154, height=40, onRelease = onPlayBtnRelease -- event listener function } playBtn.x = display.contentCenterX playBtn.y = display.contentHeight - 125
#3

Thanks for that info Rob, but that’s not my question I’m trying to find out how to load a .png instead of a widget, I want to use the redBtn instead of using the widget.newButton.

Thanks again

#4

You could simply load your graphic and add some text over the top but it is easier to use the widget library.

#5

You can make a button in many different ways. The amount of functionality you want will depend on the amount of work you have to do.

At it’s simplest, a button is a display.* object (.newRect, .newCiricle, .newImageRect, .newText etc.) with a tap handler on it. Of course, you just get a tappable object that calls a function to do something when it’s tapped.  You won’t get any change in how the object looks. To take it to the next level, where the button looks different when being pressed and when the user stops pressing, you now need to display.* objects and you have to move to a touch handler instead of a tap handler.  Your touch handler has to change the graphic on a touch “began” phase and swap back to the other graphic when either an “ended” or “canceled” phase happens. Of course, you now have to make a decision on when to trigger your action (button released = “ended” phase, etc.)

widget.newButton() is a helper function that does most of this work for you, but instead of you writing code to do the work, you have a more complex constructor to work with. Under the hood, widget.newButton has the code to swap the graphic/change the label and create all the display.* objects needed for a button where the graphic and label changes.

Personally, depending on what I’m doing I’ll use either method.  Sometimes I just want a block that you touch and something happens (fire button). Maybe for my Sound On/Off I’ll have a “switch looking” graphic and it’s just as easy for me to load the two graphics and give them a touch handler that swaps the image.  Sometimes widget.newButton() feels like the right way.

Rob

#6

Thanks Rob

#7

You have it close:

-- forward declarations and other locals local playBtn ------------------------------------------------------------------------------- -- 'onRelease' event listener for playBtn local function onPlayBtnRelease() -- code to react when the button is released such as: composer.gotoScene("level1") end ------------------------------------------------------------------------------- -- create a widget button (which will loads level1.lua on release) playBtn = widget.newButton { label="Play Now", labelColor = { default={0, 0, 0}, over={0.5, 0.5, 0.5 } }, default="button.png", over="button-over.png", width=154, height=40, onRelease = onPlayBtnRelease -- event listener function } playBtn.x = display.contentCenterX playBtn.y = display.contentHeight - 125
#8

Thanks for that info Rob, but that’s not my question I’m trying to find out how to load a .png instead of a widget, I want to use the redBtn instead of using the widget.newButton.

Thanks again

#9

You could simply load your graphic and add some text over the top but it is easier to use the widget library.

#10

You can make a button in many different ways. The amount of functionality you want will depend on the amount of work you have to do.

At it’s simplest, a button is a display.* object (.newRect, .newCiricle, .newImageRect, .newText etc.) with a tap handler on it. Of course, you just get a tappable object that calls a function to do something when it’s tapped.  You won’t get any change in how the object looks. To take it to the next level, where the button looks different when being pressed and when the user stops pressing, you now need to display.* objects and you have to move to a touch handler instead of a tap handler.  Your touch handler has to change the graphic on a touch “began” phase and swap back to the other graphic when either an “ended” or “canceled” phase happens. Of course, you now have to make a decision on when to trigger your action (button released = “ended” phase, etc.)

widget.newButton() is a helper function that does most of this work for you, but instead of you writing code to do the work, you have a more complex constructor to work with. Under the hood, widget.newButton has the code to swap the graphic/change the label and create all the display.* objects needed for a button where the graphic and label changes.

Personally, depending on what I’m doing I’ll use either method.  Sometimes I just want a block that you touch and something happens (fire button). Maybe for my Sound On/Off I’ll have a “switch looking” graphic and it’s just as easy for me to load the two graphics and give them a touch handler that swaps the image.  Sometimes widget.newButton() feels like the right way.

Rob

#11

Thanks Rob