Types of widgets

Getting Started Newbie Questions
#1

Hello, 

I’m a 50 yr old guy trying to learn something that a lot of kids can do with their eyes closed. I tried the Lua 5.1 Reference Manual, but that was like learning Algebra all over again.  I completed Chapter 1 — Creating an App, tapping the balloon was easy, still working on Chapter 2 — Upward & Onward. 

This is going to be my first question in a long series of questions, I’m not clear on widgets. I checked the widget.newButton() page, I copied and pasted the Shape example for the rounded rectangle button, but I’m not clear on what type of buttons I can create.

Is there a replay widget like the picture I attached?

What widget shapes are available or is it better just to upload a picture?  My goal is to make an app, no animation, not yet.

Thank you

#2

Ummm. the button widget will take any image you provide. I am a little confused when you say upload. Just place that image in the app folder and when creating the button widget reference it.

From the example:

local button1 = widget.newButton( { width = 240, height = 120, defaultFile = "buttonDefault.png", -- your button file here. label = "button", onEvent = handleButtonEvent -- need to create this event } ) -- Center the button button1.x = display.contentCenterX button1.y = display.contentCenterY

And 50 is the new 35. It isn’t that old. We have plenty of 50+ here based on the references they make. I won’t mention names because I don’t want to out them.

#3

I’m (very nearly) 50 and proud of it!

#4

57 and still rockin’ it…

widget.newButton has different ways to do buttons: you can do a single graphic or a two graphic version (pressed, unpressed), you can have it done with vector objects (squares, circles, rounded rectangles, triangles, etc.) with text written on top.

People making games want buttons that fit the theme of their particular game. Your replay graphic above may work for you but it probably won’t work for 99% of other Corona developers. Other than buttons and such that look like iOS and Android standard UI elements, it’s expected that you will provide all artwork in a style that fits your needs.

Then there is the question of just what does “Replay” mean? For a tic-tac-toe game, replay may mean clearing the board and setting the player to X. But for a checkers game, replay means putting 12 red checker pieces and 12 black checker pieces back in their starting positions and replaying PacMan is restoring all the dots and powerups, putting the ghosts back in their cage and setting a score back to 0. Every game is completely different with regards to that. There is no standard way to create a replay widget.

Instead, widget.newButton() lets you decided how it looks, which includes providing images for the button states and you write a function to react to when the button is pressed. You can name it your replayButton and create a function named onReplayPressed() which does the things your game needs to do to reset.

Rob

#5

I thought the widget.newButton was a widget that came from the corona library I didn’t know I could use my own png.   I get now, I think.

Thanks both, I appreciate you.

#6

It is a widget that comes from the Corona library, but it has flexible display options that lets you use your own images, image sheets, and vector graphics or you can use the default which will display iOS type buttons on iOS devices and Android type buttons on Android devices.

Rob

#7

Glad to see i’m not the only oldie here… pfffheew …

I’m a bit confused though…

Having done all my buttons the hard way, i.e. 

btn\_play = display.newImageRect( "assets/button-play.png", 345,140) btn\_play.anchorX = 0 btn\_play.x = screenLef ; btn\_play.y = btn\_inst + 25 btn\_play.xScale = 1; btn\_play.yScale = 1 sceneGroup:insert(btn\_play) btn\_play:addEventListener( "tap", goto\_scene1 ) 

I thought it would be good to get some ‘nice 3d standard buttons’ and i eagerly started to read the widget documentation. 

I was expecting and happy to pass a dozen parameters including x,y,size,color,gradient maybe, and onpress function which would save  me a lot of coding.

(Also pass some text to create a textButton )

But then I found out that it will take me 3 pages of code to do this !
https://docs.coronalabs.com/api/library/widget/newButton.html

is that not such a thing as a standard button for reset, play,settings where i don’t have to provide not only the picture but also the code. ?

if not, is there any point using a widget rather than a button like the one I did above ?

many thanks 

Claude

#8

Our widget library is (by default) designed to make creating iOS and Android buttons easy. But once you get past that, widget.newButton() doesn’t save a whole lot code over just building your buttons using other display.* objects.

For instance, widget.newButton allows you to specify a 2 button image. Basically under the hood, its created two display.newImageRects(), assigning a touch handler to them so that on touch, the code will flip the buttons until it’s released and then it flips it back. Then whatever you want to happen is called from the touch handler.

Writing that yourself will cost you about double the lines of code, so from 10 lines, you’re writing 20.

If you want to do a 9 frame slice, you are still going have to write all the code to create an image sheet, so that alone becomes nearly 2-3x the code of the widget.newButton() code. So at that point, writing the extra 10-20 lines of code to implement what widget.newButton() does becomes kinda of trivial. Yes, it’s a lot of code.

There isn’t a “Standard” button once you get past OS specific styles, every game is different. For me, I frequently just create the two images and use display.newImageRect and my own touch handler.

Rob

#9

thank you Rob, that clarifies it very well. And totally extinguish my hopes of using widgets to make my apps faster to develop ! :slight_smile:

#10

Ummm. the button widget will take any image you provide. I am a little confused when you say upload. Just place that image in the app folder and when creating the button widget reference it.

From the example:

local button1 = widget.newButton( { width = 240, height = 120, defaultFile = "buttonDefault.png", -- your button file here. label = "button", onEvent = handleButtonEvent -- need to create this event } ) -- Center the button button1.x = display.contentCenterX button1.y = display.contentCenterY

And 50 is the new 35. It isn’t that old. We have plenty of 50+ here based on the references they make. I won’t mention names because I don’t want to out them.

#11

I’m (very nearly) 50 and proud of it!

#12

57 and still rockin’ it…

widget.newButton has different ways to do buttons: you can do a single graphic or a two graphic version (pressed, unpressed), you can have it done with vector objects (squares, circles, rounded rectangles, triangles, etc.) with text written on top.

People making games want buttons that fit the theme of their particular game. Your replay graphic above may work for you but it probably won’t work for 99% of other Corona developers. Other than buttons and such that look like iOS and Android standard UI elements, it’s expected that you will provide all artwork in a style that fits your needs.

Then there is the question of just what does “Replay” mean? For a tic-tac-toe game, replay may mean clearing the board and setting the player to X. But for a checkers game, replay means putting 12 red checker pieces and 12 black checker pieces back in their starting positions and replaying PacMan is restoring all the dots and powerups, putting the ghosts back in their cage and setting a score back to 0. Every game is completely different with regards to that. There is no standard way to create a replay widget.

Instead, widget.newButton() lets you decided how it looks, which includes providing images for the button states and you write a function to react to when the button is pressed. You can name it your replayButton and create a function named onReplayPressed() which does the things your game needs to do to reset.

Rob

#13

I thought the widget.newButton was a widget that came from the corona library I didn’t know I could use my own png.   I get now, I think.

Thanks both, I appreciate you.

#14

It is a widget that comes from the Corona library, but it has flexible display options that lets you use your own images, image sheets, and vector graphics or you can use the default which will display iOS type buttons on iOS devices and Android type buttons on Android devices.

Rob

#15

Glad to see i’m not the only oldie here… pfffheew …

I’m a bit confused though…

Having done all my buttons the hard way, i.e. 

btn\_play = display.newImageRect( "assets/button-play.png", 345,140) btn\_play.anchorX = 0 btn\_play.x = screenLef ; btn\_play.y = btn\_inst + 25 btn\_play.xScale = 1; btn\_play.yScale = 1 sceneGroup:insert(btn\_play) btn\_play:addEventListener( "tap", goto\_scene1 ) 

I thought it would be good to get some ‘nice 3d standard buttons’ and i eagerly started to read the widget documentation. 

I was expecting and happy to pass a dozen parameters including x,y,size,color,gradient maybe, and onpress function which would save  me a lot of coding.

(Also pass some text to create a textButton )

But then I found out that it will take me 3 pages of code to do this !
https://docs.coronalabs.com/api/library/widget/newButton.html

is that not such a thing as a standard button for reset, play,settings where i don’t have to provide not only the picture but also the code. ?

if not, is there any point using a widget rather than a button like the one I did above ?

many thanks 

Claude

#16

Our widget library is (by default) designed to make creating iOS and Android buttons easy. But once you get past that, widget.newButton() doesn’t save a whole lot code over just building your buttons using other display.* objects.

For instance, widget.newButton allows you to specify a 2 button image. Basically under the hood, its created two display.newImageRects(), assigning a touch handler to them so that on touch, the code will flip the buttons until it’s released and then it flips it back. Then whatever you want to happen is called from the touch handler.

Writing that yourself will cost you about double the lines of code, so from 10 lines, you’re writing 20.

If you want to do a 9 frame slice, you are still going have to write all the code to create an image sheet, so that alone becomes nearly 2-3x the code of the widget.newButton() code. So at that point, writing the extra 10-20 lines of code to implement what widget.newButton() does becomes kinda of trivial. Yes, it’s a lot of code.

There isn’t a “Standard” button once you get past OS specific styles, every game is different. For me, I frequently just create the two images and use display.newImageRect and my own touch handler.

Rob

#17

thank you Rob, that clarifies it very well. And totally extinguish my hopes of using widgets to make my apps faster to develop ! :slight_smile: