Difference between revisions of "UI Buttons"

From GiderosMobile
Line 15: Line 15:
 
* '''H''' = button Hover
 
* '''H''' = button Hover
  
−
=== Simple Button ===
+
=== Button: Simple ===
 
Please follow this link: '''[[simple_button_class]]'''
 
Please follow this link: '''[[simple_button_class]]'''
  
−
=== Simple Button with Up, Down and Disabled state (UDD) ===
+
=== Button: Simple with Up, Down and Disabled state (UDD) ===
 
Please follow this link: '''[[simple_buttonudd_class]]'''
 
Please follow this link: '''[[simple_buttonudd_class]]'''
  
−
=== Text Button ===
+
=== Button: Text ===
 
Please follow this link: '''[[button_text_class]]'''
 
Please follow this link: '''[[button_text_class]]'''
  
−
=== Button Hover Image Text ===
+
=== Button: Toggle ===
 +
Please follow this link: '''[[ButtonToggle_class]]'''
 +
 
 +
=== Button: Hover Image Text ===
 
Please follow this link: '''[[button_hover_image_text_class]]'''
 
Please follow this link: '''[[button_hover_image_text_class]]'''
  
−
=== Button Image Text HUDD ===
+
=== Button: Image Text HUDD ===
 
Please follow this link: '''[[button_image_text_HUDD_class]]'''
 
Please follow this link: '''[[button_image_text_HUDD_class]]'''
  
−
=== Button Pixel Image Text Tooltip Up Down Disabled Hover (PITTUDDH) ===
+
=== Button: Pixel Image Text Tooltip Up Down Disabled Hover (PITTUDDH) ===
 
Please follow this link: '''[[ButtonPITTUDDH_class]]'''
 
Please follow this link: '''[[ButtonPITTUDDH_class]]'''
−
 
−
=== Toggle Button ===
 
−
<syntaxhighlight lang="lua">
 
−
--[[
 
−
ToggleButton v1.0
 
−
 
−
v1.0 - 19.3.2013
 
−
Initial release
 
−
 
−
Free to modify and use!
 
−
Matjaž Bravc
 
−
]]
 
−
--[[
 
−
-- USAGE
 
−
local btntoggle = ToggleButton.new(Bitmap.new(Texture.new("gfx/off.png", true)), Bitmap.new(Texture.new("gfx/on.png", true)))
 
−
stage:addChild(btntoggle)
 
−
btntoggle:addEventListener("click", function()
 
−
print(btntoggle:isPressed())
 
−
end)
 
−
]]
 
−
 
−
ToggleButton = Core.class(Sprite)
 
−
 
−
function ToggleButton:init(upState, downState)
 
−
self.upState = upState
 
−
self.downState = downState
 
−
 
−
self.pressed = false
 
−
self.focus = false
 
−
 
−
self:updateVisualState(self.pressed)
 
−
 
−
self:addEventListener(Event.MOUSE_DOWN, self.onMouseDown, self)
 
−
self:addEventListener(Event.MOUSE_MOVE, self.onMouseMove, self)
 
−
self:addEventListener(Event.MOUSE_UP, self.onMouseUp, self)
 
−
 
−
self:addEventListener(Event.TOUCHES_BEGIN, self.onTouchesBegin, self)
 
−
self:addEventListener(Event.TOUCHES_MOVE, self.onTouchesMove, self)
 
−
self:addEventListener(Event.TOUCHES_END, self.onTouchesEnd, self)
 
−
self:addEventListener(Event.TOUCHES_CANCEL, self.onTouchesCancel, self)
 
−
end
 
−
 
−
function ToggleButton:onMouseDown(event)
 
−
if self:hitTestPoint(event.x, event.y) then
 
−
self.focus = true
 
−
event:stopPropagation()
 
−
end
 
−
end
 
−
 
−
function ToggleButton:onMouseMove(event)
 
−
if self.focus then
 
−
if not self:hitTestPoint(event.x, event.y) then
 
−
self.focus = false
 
−
end
 
−
event:stopPropagation()
 
−
end
 
−
end
 
−
 
−
function ToggleButton:onMouseUp(event)
 
−
if self.focus then
 
−
self.focus = false
 
−
self:updateVisualState(not self.pressed)
 
−
self:dispatchEvent(Event.new("click"))
 
−
event:stopPropagation()
 
−
end
 
−
end
 
−
 
−
-- if button is on focus, stop propagation of touch events
 
−
function ToggleButton:onTouchesBegin(event)
 
−
if self.focus then
 
−
event:stopPropagation()
 
−
end
 
−
end
 
−
 
−
-- if button is on focus, stop propagation of touch events
 
−
function ToggleButton:onTouchesMove(event)
 
−
if self.focus then
 
−
event:stopPropagation()
 
−
end
 
−
end
 
−
 
−
-- if button is on focus, stop propagation of touch events
 
−
function ToggleButton:onTouchesEnd(event)
 
−
if self.focus then
 
−
event:stopPropagation()
 
−
end
 
−
end
 
−
 
−
-- if touches are cancelled, reset the state of the button
 
−
function ToggleButton:onTouchesCancel(event)
 
−
if self.focus then
 
−
self.focus = false
 
−
self:updateVisualState(false) -- XXX
 
−
event:stopPropagation()
 
−
end
 
−
end
 
−
 
−
-- if state is true show downState else show upState
 
−
function ToggleButton:updateVisualState(state)
 
−
self.pressed = state
 
−
 
−
-- Modification to allow single state buttons (checkboxes etc)
 
−
if not self.downState then
 
−
if not self:contains(self.upState) then
 
−
self:addChild(self.upState)
 
−
end
 
−
return
 
−
end
 
−
 
−
if self.pressed then
 
−
if self:contains(self.upState) then
 
−
self:removeChild(self.upState)
 
−
end
 
−
if not self:contains(self.downState) then
 
−
self:addChild(self.downState)
 
−
end
 
−
else
 
−
if self:contains(self.downState) then
 
−
self:removeChild(self.downState)
 
−
end
 
−
if not self:contains(self.upState) then
 
−
self:addChild(self.upState)
 
−
end
 
−
end
 
−
end
 
−
 
−
function ToggleButton:setPressed(xbool)
 
−
self:updateVisualState(xbool)
 
−
end
 
−
 
−
function ToggleButton:isPressed()
 
−
return self.pressed
 
−
end
 
−
</syntaxhighlight>
 
  
  
 
{{GIDEROS IMPORTANT LINKS}}
 
{{GIDEROS IMPORTANT LINKS}}

Revision as of 04:06, 20 November 2023

Here you will find various resources to help you create buttons in Gideros Studio.

note: you may have to provide your own assets (fonts, gfx, …).

note2:

  • P = button with a Pixel
  • I = button with an Image
  • T = button with a Text
  • T = button with a tooltip
  • U = button Up state
  • D = button Down state
  • D = button Disabled state
  • H = button Hover

Button: Simple

Please follow this link: simple_button_class

Button: Simple with Up, Down and Disabled state (UDD)

Please follow this link: simple_buttonudd_class

Button: Text

Please follow this link: button_text_class

Button: Toggle

Please follow this link: ButtonToggle_class

Button: Hover Image Text

Please follow this link: button_hover_image_text_class

Button: Image Text HUDD

Please follow this link: button_image_text_HUDD_class

Button: Pixel Image Text Tooltip Up Down Disabled Hover (PITTUDDH)

Please follow this link: ButtonPITTUDDH_class


Retrieved from ‘https://wiki.gideros.rocks/index.php?title=UI_Buttons&oldid=23103’