Quick Links: Download Gideros Studio | Gideros Documentation | Gideros Development Center | Gideros community chat | DONATE
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
	})

my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
Tagged:
+1 -1 (+4 / -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 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 :s .

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

    Likes: oleg

    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
    +1 -1 (+1 / -0 )Share on Facebook
  • MoKaLuxMoKaLux Member
    edited 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) :)
    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
  • olegoleg Member
    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

    Likes: MoKaLux

    my games:
    https://play.google.com/store/apps/developer?id=razorback456
    мій блог по гідерос https://simartinfo.blogspot.com
    Слава Україні!
    +1 -1 (+1 / -0 )Share on Facebook
  • MoKaLuxMoKaLux Member
    edited May 2021
    thank you oleg I though I had this working right :open_mouth:
    I need to check it again and come back here :)
    thanks for the feedback, much appreciated oleg :wink:
    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 B)
    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) :s but this should be fine as long as you don't have dozens of these kind of buttons in one scene?

    Likes: oleg

    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
    +1 -1 (+1 / -0 )Share on Facebook
  • antixantix Member
    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.

    Likes: MoKaLux

    +1 -1 (+1 / -0 )Share on Facebook
  • MoKaLuxMoKaLux Member
    edited June 2021
    ok I am almost done with those buttons :D 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 :)

    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.