my button class is tha beast :-)

MoKaLux · March 2020

how are you all doing?
My button class is the best

? It has:
- text, pixels, textures, up/down/disabled states, automatic nine patch
- all params are optional
Can you tell me if you spot any errors/improvement?
PS: I wanted to add tool tips in the hover function but I leave it for now.

	local mybtn02 = ButtonTextUDDP.new({
		imgup="gfx/ui/btn_03.png",
		text="B\nU\nT\nT\nO\nN", font=g_font1, fontsize=32, textcolorup=mytextcolorup, textcolordown=mytextcolordown,
		imagepaddingx=64, imagepaddingy=32
	})

MoKaLux · March 2020

Excerpt:

	-- the params
	self.params = xparams or {}
	-- textures?
	self.params.imgup = xparams.imgup or nil -- img up path
	self.params.imgdown = xparams.imgdown or self.params.imgup -- img down path
	self.params.imgdisabled = xparams.imgdisabled or self.params.imgup -- img disabled path
	self.params.imagealpha = xparams.imagealpha or 1 -- number
	self.params.imgscalex = xparams.imgscalex or 1 -- number
	self.params.imgscaley = xparams.imgscaley or 1 -- number
	self.params.imagepaddingx = xparams.imagepaddingx or nil -- number (nil = auto)
	self.params.imagepaddingy = xparams.imagepaddingy or nil -- number (nil = auto)
	-- pixel?
	self.params.pixelcolorup = xparams.pixelcolorup or nil -- color
	self.params.pixelcolordown = xparams.pixelcolordown or self.params.pixelcolorup -- color
	self.params.pixelcolordisabled = xparams.pixelcolordisabled or 0x555555 -- color
	self.params.pixelalpha = xparams.pixelalpha or 1 -- number
	self.params.pixelscalex = xparams.pixelscalex or 1 -- number
	self.params.pixelscaley = xparams.pixelscaley or 1 -- number
	self.params.pixelpaddingx = xparams.pixelpaddingx or 12 -- number
	self.params.pixelpaddingy = xparams.pixelpaddingy or 12 -- number
	-- text?
	self.params.text = xparams.text or nil -- string
	self.params.font = xparams.font or nil -- ttf font path
	self.params.fontsize = xparams.fontsize or 16 -- number
	self.params.textcolorup = xparams.textcolorup or 0x0 -- color
	self.params.textcolordown = xparams.textcolordown or self.params.textcolorup -- color
	self.params.textcolordisabled = xparams.textcolordisabled or 0x777777 -- color
	self.params.textscalex = xparams.textscalex or 1 -- number
	self.params.textscaley = xparams.textscaley or self.params.textscalex -- number
	-- EXTRAS
	self.params.isautoscale = xparams.isautoscale or 1 -- number (default 1 = true)
	self.params.hover = xparams.hover or 1 -- number (default 1 = true)
	self.params.defaultpadding = xparams.defaultpadding or 12 -- number

PS: it's on the wiki and it's called UDDP https://wiki.giderosmobile.com/index.php/UI_Buttons

MoKaLux · March 2020

added tooltips.
https://wiki.giderosmobile.com/index.php/UI_Buttons#Button_with_Text.2C_Pixel.2C_Images_UDD.2C_9_Patch.2C_Tooltip

PS: one problem though, if you move the mouse too quickly the tooltip will remain on screen, the same on mobiles!
PS2: I have removed the TOUCH event listeners as they seem not necessary

Any improvements would be much appreciated

MoKaLux · January 2021

I have a question for you guys

Is using mouse hover in an app a frame killer?
For example I have this code to check if a button is hovered with the mouse:

elseif self.params.hover then -- hover, you can do whatever fx you want :-) new 20210115
	if self.focus then -- button hover state
		print("hover in")
		if self.params.imgup ~= nil then self.bmpup:setAlpha(1) end
		if self.params.text ~= nil then self.text:setTextColor(self.params.textcolordown) end
	else -- not button hover state
		print("hover out")
		if self.params.imgup ~= nil then self.bmpup:setAlpha(0.5) end
		if self.params.text ~= nil then self.text:setTextColor(self.params.textcolorup) end
	end

As you can see above, when the button is not hovered it is calling in a loop:

print("hover out")
if self.params.imgup ~= nil then self.bmpup:setAlpha(0.5) end
if self.params.text ~= nil then self.text:setTextColor(self.params.textcolorup) end

Is this valid/acceptable code? Thank you for your help

Viva gideros!

EDIT: it is valid code only if you use it correctly:

function ButtonTextP9UDDT:onMouseHover(e)
	if self.sprite:hitTestPoint(e.x, e.y) and self.sprite:isVisible() then
		self.focus = true
		self:updateVisualState(self.focus)
	end
end

You shouldn't call self:updateVisualState(self.focus) outside hitTestPoint(...) as I was doing

.

I am becoming good at it

rrraptor · January 2021

My guess is that if you have lots of buttons then it might be a frame killer. The reason is very simple. Each button have its own event listener which checks for "hitTestPoint", so for 100 buttons you will have 100 listeners and 100 checks each time mouse is moved. I remember @hgy29 said that event system is not very performant, but I think you dont need to wory about performance till it becomes a real problem.

MoKaLux · January 2021

I have 104 buttons !!! that's why I was a little bit concerned, and I think my latest change (see post above) was needed

Thank you rrraptor for your answer

rrraptor · January 2021

You can organize you button in a grid like that:

When mouse is moved translate its coords to grid coords, then pick all objects in that grid rect and check for "hitTestPoint". This method is used in bump.

Actually, you can use bump itself to speed things up

MoKaLux · January 2021

btw rrraptor I used Tiled for my gui.

rrraptor · January 2021

Tiled for GUI?) How?) Positioning...?

MoKaLux · January 2021

yes positioning and size as well (for buttons and pixels)

I like it because once I know what buttons I need I can program them in gideros and then modify the UI as I wish for both size and position.
I use it a lot in gideros (box2d, r3d, cbump, now GUI) thanks to antix for showing me how to use it.
I think I will use it using imgui as well.

MoKaLux · May 2021

I have been working on my button class

and I am happy with the result.

I have one question though, do you know if that is how it should feel (from a game design / UX perspective)?

See below post, thank you

MoKaLux · May 2021

edit: I cannot post the zip project (80kb) on the forum

you can dowload it from my GH https://github.com/mokalux/GDOC_00_SCENEMANAGER

and have a feel of it on itch.io: https://mokatunprod.itch.io/gdoc-00-scenemanager

Tell me how it feels (UX)

oleg · May 2021

MoKaLux said:
I have been working on my button class and I am happy with the result.

I have one question though, do you know if that is how it should feel (from a game design / UX perspective)?

See below post, thank you

When you press the button and drag the cursor outside the button and release, the button is activated. Make sure that the button does not work if the cursor goes beyond it

MoKaLux · May 2021

thank you oleg I though I had this working right

I need to check it again and come back here

thanks for the feedback, much appreciated oleg

oleg said:
When you press the button and drag the cursor outside the button and release, the button is activated. Make sure that the button does not work if the cursor goes beyond it

FIXED

function ButtonTextP9UDDT:onMouseMove(e)
	if self:hitTestPoint(e.x, e.y) and self:getParent():isVisible() then
		self.isfocused = true
		self.isclicked = true
		if self.selector then
			self:getParent().selector = self.selector
		end
	else self.isfocused = false self.isclicked = false
	end
	self:updateVisualState()
end

I am trying to make it as performant as I can while keeping it UX very friendly but this button class holds quite a bit of variables and function calls (especially for the mousehover)

but this should be fine as long as you don't have dozens of these kind of buttons in one scene?

antix · June 2021

If your buttons are just being used on menus... they don't need to be terribly performant.

If you require performance for ingame buttons then you should be using some sort of GUI management system.

MoKaLux · June 2021

ok I am almost done with those buttons

two project for you guys: https://github.com/mokalux/gideros-buttons
I called my buttons MONSTER and BEAST, they handle:

Text, Pixel, Images 9patch (Up, Down, Disabled), Tooltip, Sfx, Keyboard navigation and possibility to pass it a function too!

Monster is more configurable than Beast.

Thanks a lot for your help here on the forum, really appreciated

Those buttons could be a good start before polishing them further.

Time to move on

Howdy, Stranger!

Categories

In this Discussion

Top Posters

my button class is tha beast :-)

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

my button class is tha beast :-)

Comments