Performance impact: widget button vs image button

[dodi_games]

Hi guys! on my new trip to resize all my assets I’m in the situation to decide to choose between the widget button or image button. Why? because the process of switching between “zoomEven” and “letterbox” requires new assets dimensions. I’m using about 34 widget buttons and it’s easier to use image buttons. My buttons do not have over file because they are inside the scroll view.

My question is about the performance that may have use the “widget.newButton()” vs the “display.newImageRect()” with its respective touch listener?

Thanks in advance

DoDi

[rob]

The widget.newButton() has slightly more overhead than a hand created button than using a display.* API and a custom touch handler because the widget.newButton() is much more flexible, but the key here is “slightly”. And one could argue that if you’re using a simple text button with a vector background (just a display.newText() on top of a display.newRect() could be a bit faster than loading an image for display.newImageRect(), but display.newText() is creating an image any way, so I’d say it’s really a wash or an every-so-slight advantage to an image + touch handler.

Rob

[roaminggamer]

You’re worrying about the wrong thing.

If you’ve got to worry about the performance of your buttons, you’ve got too many.

Really though, the question you need to be thinking about is, “Which way is faster for me to code?” i.e. Does it take me longer to write a button using the widget.* code or by rolling my own button code.

[dodi_games]

@roaminggamer

For me it is faster to use an image and add a listener. I’m reading Lua 5.3.4 but I still can not understand how to make a function, loop or table where I can create all my buttons with their different images and listeners.

[rob]

How many buttons are you creating? 

Is there a screenshot of what you’re trying to do?

Depending on what you’re doing, it may be more practical to have a single listener and use values that are part of the button object.

We need more context for what you’re trying to do.

Rob

[roaminggamer]

Please clarify:

You want to create your buttons using a loop.

–OR–

You want to query the status of your existing buttons in a loop.

The latter sounds like you intend to have toggle or radio buttons.

Random Note about Button Types:

• Push Button - Typically associated event is meant to be fired on release of button.  Button state returns to default when press is released.
• Toggle Button - Same as push button, but state ‘toggles’ between ON and OFF on each touch release.
• Radio Button - A toggle button that affects other toggle buttons in the same ‘radio group’. Only one radio button in a ‘radio group’ can be toggled ON at any time.

[roaminggamer]

When I read Rob’s post about a single listener, this is what I understand it to mean.

(Following written using SSK: https://roaminggamer.github.io/RGDocs/pages/SSK2/libraries/easy_interfaces/#button-factories))

local onPush( event ) local target = event.target print( "Pressed button with ID: ", target.id ) end local tmp = ssk.easyIFC:presetPush( nil, "default", 100, 100, 80, 40, "Button 1", onPush ) tmp.id = 1 local tmp = ssk.easyIFC:presetPush( nil, "default", 100, 150, 80, 40, "Button 2", onPush ) tmp.id = 2 local tmp = ssk.easyIFC:presetPush( nil, "default", 100, 200, 80, 40, "Button 3", onPush ) tmp.id = 3 local tmp = ssk.easyIFC:presetPush( nil, "default", 100, 250, 80, 40, "Button 4", onPush ) tmp.id = 4

[dodi_games]

I will reply soon, I’m not in front of my computer right now. Thanks!

[dodi_games]

Sorry for the late reply.
What I would like to do is be able to create the 36 buttons in a function, loop or table, I think it could help me with the App performance and help improve code.
Here is an image. This is a simple 6 button example, mi App have the same 3 buttons columns but with 12 rows = 36 different buttons. All buttons are inside scrollview, I’m using “display.newImageRect” with a touch listener. No over file, just a simple image.

[roaminggamer]

Hi.  What is the question for this last post?

Are you saying you want someone to show you how to make a button builder function, where you can simply pass in details like:

• image
• position <x,y>
• listener to call when touched
• (optionally) size of button <width, height>

I’m sure I have something like that already in my free stuff.  I’ll see if something pops out and post back if I see it, but you may have to dig through my archive:

https://github.com/roaminggamer/RG_FreeStuff/

[roaminggamer]

Dude.  :huh:  You need to look at the answers I give you more closely.

I already gave you code for this in another answer:

https://github.com/roaminggamer/RG_FreeStuff/raw/master/AskEd/2018/05/dodi.zip

Look at the code again and pay particular attention to easyButton.lua

[dodi_games]

Hi roaminggamer, I’m trying to understand the way you code but to be honest you are in a very high level for my current knowledge. I have no experience with code, just Corona api, I’m reading lua.org trying to understand it in a better way …thanks again I will look and keep trying to understand. What I am looking for from you is a basic explanation that can guide me on how to do things.

[roaminggamer]

I see.  This is a two part answer…

One

I think you’d well served reading the tutorials and guides here.

In this context, these specifically:

• https://docs.coronalabs.com/guide/index.html#events-and-listeners
• https://docs.coronalabs.com/tutorial/events/tapTouchAnatomy/index.html

Two

Let me give you some examples that build up into a solution.

The Basic Touch Listener

-- -- This listener assumes you want to call a function when lifting your finger. -- It doesn't handle highlighting the button or any other visual effects. -- It also doesn't handle sliding your finger off the button and lifting your finger. -- It assumes the object has a function called 'onRelease' -- It is very basic and not good for usability, but it will do the basics. -- local function onTouch( self, event ) if( event.phase == "ended" ) then self.onRelease() end return false end 

A Button Builder That Uses The Listener

local function createPushButton( x, y, width, height, imgPath, onRelease ) local button = display.newRect( imgPath, width, height ) button.x = x button.y = y button.onRelease = onRelease button.touch = onTouch button:addEventListener("touch") return button end

Making A Module

Now, lets take all of the code above an put it  a module to make it portable and easy to use.

-- simpleButton.lua local m = {} local function onTouch( self, event ) if( event.phase == "ended" ) then self.onRelease( self ) end return false end function m.createPushButton( x, y, width, height, imgPath, onRelease ) local button = display.newRect( imgPath, width, height ) button.x = x button.y = y button.onRelease = onRelease button.touch = onTouch button:addEventListener("touch") return button end return m

Using The Module

local simpleButton = require "simpleButton" local function myListener( self ) print( "Just pressed button ID: ", self.id ) end local tmp = simpleButton( 100, 100, 100, 30, "image1.png", myListener ) tmp.id = 1 local tmp = simpleButton( 100, 150, 100, 30, "image2.png", myListener ) tmp.id = 2 local tmp = simpleButton( 100, 200, 100, 30, "image3.png", myListener ) tmp.id = 3

[roaminggamer]

Pre-emptive post…

If anyone sees this:

self.onRelease( self )

and feels I should have showed him this:

self:onRelease()

Feel free to explain why.  I wanted to avoid the dot versus colon discussion to keep the response as easy as possible to understand.

[dodi_games]

@roaminggamer Thank you very much. You have given me a super answer. I will put everything on my part to understand, practice and apply in my App.

[rob]

The widget.newButton() has slightly more overhead than a hand created button than using a display.* API and a custom touch handler because the widget.newButton() is much more flexible, but the key here is “slightly”. And one could argue that if you’re using a simple text button with a vector background (just a display.newText() on top of a display.newRect() could be a bit faster than loading an image for display.newImageRect(), but display.newText() is creating an image any way, so I’d say it’s really a wash or an every-so-slight advantage to an image + touch handler.

Rob

[roaminggamer]

You’re worrying about the wrong thing.

If you’ve got to worry about the performance of your buttons, you’ve got too many.

Really though, the question you need to be thinking about is, “Which way is faster for me to code?” i.e. Does it take me longer to write a button using the widget.* code or by rolling my own button code.

[dodi_games]

@roaminggamer

For me it is faster to use an image and add a listener. I’m reading Lua 5.3.4 but I still can not understand how to make a function, loop or table where I can create all my buttons with their different images and listeners.

[rob]

How many buttons are you creating? 

Is there a screenshot of what you’re trying to do?

Depending on what you’re doing, it may be more practical to have a single listener and use values that are part of the button object.

We need more context for what you’re trying to do.

Rob

[roaminggamer]

Please clarify:

You want to create your buttons using a loop.

–OR–

You want to query the status of your existing buttons in a loop.

The latter sounds like you intend to have toggle or radio buttons.

Random Note about Button Types:

• Push Button - Typically associated event is meant to be fired on release of button.  Button state returns to default when press is released.
• Toggle Button - Same as push button, but state ‘toggles’ between ON and OFF on each touch release.
• Radio Button - A toggle button that affects other toggle buttons in the same ‘radio group’. Only one radio button in a ‘radio group’ can be toggled ON at any time.