Quick Links: Download Gideros Studio | Gideros Documentation | Gideros Development Center | Gideros community chat
my button class is tha beast :-) — Gideros Forum

my button class is tha beast :-)

MoKaLuxMoKaLux Member
edited March 2020 in Game & application design
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
	})

mybuttonclass.png
322 x 532 - 27K
zip
zip
gideros_bare_bone.zip
189K
mybuttonv.png
322 x 532 - 24K

Likes: pie, antix, oleg

my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
Tagged:
+1 -1 (+3 / -0 )Share on Facebook

Comments

  • MoKaLuxMoKaLux Member
    edited 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
    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
  • 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 ;)
    mybuttont.png
    224 x 210 - 11K
    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
  • MoKaLuxMoKaLux Member
    edited January 15
    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 :s .

    I am becoming good at it :)
    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
  • rrraptorrrraptor Member
    edited January 15 Accepted Answer
    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.

    Likes: MoKaLux

    +1 -1 (+1 / -0 )Share on Facebook
  • 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 :)
    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
  • rrraptorrrraptor Member
    Accepted Answer
    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 :)
    grid.png
    697 x 697 - 26K

    Likes: MoKaLux

    +1 -1 (+1 / -0 )Share on Facebook
  • btw rrraptor I used Tiled for my gui.
    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
  • MoKaLuxMoKaLux Member
    edited January 16
    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.
    thestage_ui.png
    2688 x 1536 - 159K

    Likes: antix

    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
    +1 -1 (+1 / -0 )Share on Facebook
Sign In or Register to comment.