|
|
| (13 intermediate revisions by the same user not shown) |
| Line 3: |
Line 3: |
| | Here you will find various resources to help you create buttons in Gideros Studio. | | 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, …). | + | '''DESKTOPS, MOBILE & HTML5 COMPATIBLE THEY ARE!''' |
| | | | |
| − | '''note2''': | + | '''note''': you may have to provide your own assets (fonts, gfx, …) |
| − | * '''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
| |
| | | | |
| − | === Simple Button === | + | === Button '''[[Button_class]]''' === |
| − | Please follow this link: '''[[simple_button_class]]'''
| + | This is the base of all Gideros buttons. |
| | | | |
| − | === Simple Button with Up, Down and Disabled state (UDD) === | + | {{#widget:GApp|app=ButtonDemo1.GApp|width=300|height=180}} |
| − | Please follow this link: '''[[simple_buttonudd_class]]'''
| |
| | | | |
| − | === Text Button ===
| |
| − | Please follow this link: '''[[button_text_class]]'''
| |
| | | | |
| − | === Button Hover Image Text === | + | === Button Text '''[[ButtonText_class]]''' === |
| − | Please follow this link: '''[[button_hover_image_text_class]]'''
| + | This is almost the same as '''Button''' but with some text you can add. |
| | | | |
| − | === Button Image Text HUDD ===
| |
| − | Please follow this link: '''[[button_image_text_HUDD_class]]'''
| |
| | | | |
| − | === Button Pixel Image Text Tooltip Up Down Disabled Hover (PITTUDDH) === | + | === Button Disabled '''[[ButtonDisabled_class]]''' === |
| − | Please follow this link: '''[[ButtonPITTUDDH_class]]'''
| + | This is the same as '''Button''' but with a Disabled state. |
| | | | |
| − | === Toggle Button === | + | {{#widget:GApp|app=ButtonDisabledDemo1.GApp|width=300|height=180}} |
| − | <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)
| + | === Button Toggle '''[[ButtonToggle_class]]''' === |
| − | self.upState = upState
| + | A button you can toggle on and off. |
| − | self.downState = downState
| |
| | | | |
| − | self.pressed = false
| + | {{#widget:GApp|app=ButtonToggleDemo1.GApp|width=320|height=180}} |
| − | self.focus = false
| |
| | | | |
| − | self:updateVisualState(self.pressed)
| |
| | | | |
| − | self:addEventListener(Event.MOUSE_DOWN, self.onMouseDown, self)
| + | === Button Monster '''[[ButtonMonster_class]]''' === |
| − | self:addEventListener(Event.MOUSE_MOVE, self.onMouseMove, self)
| + | This button has a lot: mouse and keyboard navigation, hover, tooltip, sound, ... It may look scary but it is a nice monster ;-) |
| − | self:addEventListener(Event.MOUSE_UP, self.onMouseUp, self)
| |
| | | | |
| − | self:addEventListener(Event.TOUCHES_BEGIN, self.onTouchesBegin, self)
| + | {{#widget:GApp|app=ButtonMonsterDemo2x.GApp|width=320|height=180}} |
| − | 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)
| + | === Button Beast '''[[ButtonBeast_class]]''' === |
| − | if self.focus then
| + | This is like the '''Button Monster''' but without tooltip and without integrated keyboard navigation. |
| − | if not self:hitTestPoint(event.x, event.y) then
| |
| − | self.focus = false
| |
| − | end
| |
| − | event:stopPropagation()
| |
| − | end
| |
| − | end
| |
| | | | |
| − | function ToggleButton:onMouseUp(event)
| + | {{#widget:GApp|app=ButtonBeastDemo1.GApp|width=320|height=180}} |
| − | 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}} |
