UI Buttons
From GiderosMobile
Revision as of 18:13, 25 August 2020 by MoKaLux (talk | contribs) (→Button with Text, Pixel, Images UDD, 9 Patch, Tooltip: updated)
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.
Here you will find various resources to help you create buttons in Gideros Studio.
note: UDD = Up Down Disabled images.
note2: You may have to provide your own assets (fonts, gfx, …).
Simple Button
--[[
A generic button class
This code is MIT licensed, see http://www.opensource.org/licenses/mit-license.php
(C) 2010 - 2011 Gideros Mobile
]]
--[[
-- USAGE
-- clickable button (arrow button)
local arrow = Texture.new("gfx/arrow_right.png")
local arrow_pressed = Texture.new("gfx/arrow_right_down.png")
local button = Button.new(Bitmap.new(arrow), Bitmap.new(arrow_pressed))
button:addEventListener("click", function()
-- your code here
end)
]]
Button = Core.class(Sprite)
function Button:init(upState, downState) -- upstate and downstate are bitmaps
self.upState = upState
self.downState = downState
self.focus = false
-- set the visual state as "up"
self:updateVisualState(false)
-- register to all mouse and touch events
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 Button:onMouseDown(event)
if self:hitTestPoint(event.x, event.y) then
self.focus = true
self:updateVisualState(true)
event:stopPropagation()
end
end
function Button:onMouseMove(event)
if self.focus then
if not self:hitTestPoint(event.x, event.y) then
self.focus = false
self:updateVisualState(false)
end
event:stopPropagation()
end
end
function Button:onMouseUp(event)
if self.focus then
self.focus = false
self:updateVisualState(false)
self:dispatchEvent(Event.new("click")) -- button is clicked, dispatch "click" event
event:stopPropagation()
end
end
-- if button is on focus, stop propagation of touch events
function Button:onTouchesBegin(event)
if self.focus then
event:stopPropagation()
end
end
-- if button is on focus, stop propagation of touch events
function Button:onTouchesMove(event)
if self.focus then
event:stopPropagation()
end
end
-- if button is on focus, stop propagation of touch events
function Button:onTouchesEnd(event)
if self.focus then
event:stopPropagation()
end
end
-- if touches are cancelled, reset the state of the button
function Button:onTouchesCancel(event)
if self.focus then
self.focus = false;
self:updateVisualState(false)
event:stopPropagation()
end
end
-- if state is true show downState else show upState
function Button:updateVisualState(state)
if state 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
Simple Text Button
--[[
ButtonTextBasic
A simple Button class with a Pixel and/or text. Ideal for in game action.
This code is CC0
github: mokalux
v 0.1.1: 2020-06-08 remove useless variables
v 0.1.0: 2020-04-02 init (based on the initial gideros generic button class)
]]
--[[
-- SAMPLES
local mybtnquit = ButtonTextBasic.new({
pixelcolorup=mypixelcolorup,
text="X", font=g_font1, fontsize=32, textcolorup=mytextcolorup, textcolordown=mytextcolordown,
})
mybtnquit:setPosition(myappright - mybtnquit:getWidth() / 2, myapptop + mybtnquit:getHeight() / 2)
self:addChild(mybtnquit)
mybtnquit:addEventListener("clicked", function() self:goMenu() end)
]]
ButtonTextBasic = Core.class(Sprite)
function ButtonTextBasic:init(xparams)
-- the params
self.params = xparams or {}
-- pixel?
self.params.pixelcolorup = xparams.pixelcolorup or nil -- color
self.params.pixelcolordown = xparams.pixelcolordown or self.params.pixelcolorup -- 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.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.defaultpadding = xparams.defaultpadding or 12 -- number
-- LET'S GO!
if self.params.isautoscale == 0 then self.params.isautoscale = false else self.params.isautoscale = true end
-- warnings
if not self.params.pixelcolorup and not self.params.text then
print("*** WARNING: YOUR BUTTON IS EMPTY! ***")
else
-- mouse catcher
self.catcher = Pixel.new(0x0, 0, 1, 1)
self:addChild(self.catcher)
-- sprite holder
self.sprite = Sprite.new()
self:addChild(self.sprite)
self:setButton()
end
-- update visual state
self.focus = false
self:updateVisualState(false)
-- event listeners
self:addEventListener(Event.MOUSE_DOWN, self.onMouseDown, self)
self:addEventListener(Event.MOUSE_MOVE, self.onMouseMove, self)
self:addEventListener(Event.MOUSE_UP, self.onMouseUp, self)
end
-- FUNCTIONS
function ButtonTextBasic:setButton()
-- text
local textwidth, textheight
if self.params.text then
local font
if self.params.font ~= nil then
-- font = TTFont.new(self.params.font, self.params.fontsize, "", true, 1) -- filtering, outline (number)
font = TTFont.new(self.params.font, self.params.fontsize, "")
end
if self.text ~= nil then
self.text:setButton(self.params.text)
else
self.text = TextField.new(font, self.params.text, self.params.text)
end
self.text:setAnchorPoint(0.5, 0.5)
self.text:setScale(self.params.textscalex, self.params.textscaley)
self.text:setTextColor(self.params.textcolorup)
textwidth, textheight = self.text:getWidth(), self.text:getHeight()
end
-- first add pixel
if self.params.pixelcolorup then
if self.params.isautoscale and self.params.text then
self.pixel = Pixel.new(
self.params.pixelcolor, self.params.pixelalpha,
textwidth + self.params.pixelpaddingx,
textheight + self.params.pixelpaddingy)
else
self.pixel = Pixel.new(
self.params.pixelcolor, self.params.pixelalpha,
self.params.pixelpaddingx,
self.params.pixelpaddingy)
end
self.pixel:setAnchorPoint(0.5, 0.5)
self.pixel:setScale(self.params.pixelscalex, self.params.pixelscaley)
self.sprite:addChild(self.pixel)
end
-- finally add text on top of all
if self.params.text then self.sprite:addChild(self.text) end
-- mouse catcher
self.catcher:setDimensions(self.sprite:getWidth() + 8 * 2.5, self.sprite:getHeight() + 8 * 2.5) -- magik
self.catcher:setAnchorPoint(0.5, 0.5)
end
-- VISUAL STATE
function ButtonTextBasic:updateVisualState(xstate)
if xstate then -- button down state
if self.params.pixelcolorup ~= nil then self.pixel:setColor(self.params.pixelcolordown) end
if self.params.text ~= nil then self.text:setTextColor(self.params.textcolordown) end
else -- button up state
if self.params.pixelcolorup ~= nil then self.pixel:setColor(self.params.pixelcolorup) end
if self.params.text ~= nil then self.text:setTextColor(self.params.textcolorup) end
end
end
-- MOUSE LISTENERS
function ButtonTextBasic:onMouseDown(e)
if self:hitTestPoint(e.x, e.y) then
self.focus = true
self:updateVisualState(true)
e:stopPropagation()
end
end
function ButtonTextBasic:onMouseMove(e)
if self:hitTestPoint(e.x, e.y) then
self.focus = true
e:stopPropagation()
else
self.focus = false
-- e:stopPropagation() -- you may want to delete this line
end
self:updateVisualState(self.focus)
end
function ButtonTextBasic:onMouseUp(e)
if self.focus then
self.focus = false
self:dispatchEvent(Event.new("clicked")) -- button is clicked, dispatch "clicked" event
e:stopPropagation()
end
end
Button with an Up, Down and Disabled state (UDD)
--[[
A generic button class with an up, down and disabled state (UDD)
This code is MIT licensed, see http://www.opensource.org/licenses/mit-license.php
(C) 2010 - 2011 Gideros Mobile
]]
--[[
--usage
local button = ButtonUDD.new(
Bitmap.new(Texture.new("gfx/button-up.png")), -- up state
Bitmap.new(Texture.new("gfx/button-down.png")), -- down state
Bitmap.new(Texture.new("gfx/button-disabled.png")) -- disabled state
)
button:setPosition(70, 130)
stage:addChild(button)
local function onRecord()
-- play:setDisabled(true)
-- record:removeFromParent()
-- stage:addChild(recordStop)
-- microphone:start()
end
button:addEventListener(Event.CLICK, onRecord)
]]
Event.CLICK = "click"
ButtonUDD = Core.class(Sprite)
function ButtonUDD:init(upState, downState, disabledState)
self.upState = upState
self.downState = downState
self.disabledState = disabledState or upState
self.focus = false
self.disabled = false
-- set the visual state as "up"
self:updateVisualState(false)
-- register to all mouse and touch events
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 ButtonUDD:onMouseDown(event)
if self:hitTestPoint(event.x, event.y) then
self.focus = true
self:updateVisualState(true)
event:stopPropagation()
end
end
function ButtonUDD:onMouseMove(event)
if self.focus then
if not self:hitTestPoint(event.x, event.y) then
self.focus = false
self:updateVisualState(false)
end
event:stopPropagation()
end
end
function ButtonUDD:onMouseUp(event)
if self.focus then
self.focus = false
self:updateVisualState(false)
if not self.disabled then
self:dispatchEvent(Event.new(Event.CLICK)) -- button is clicked, dispatch "click" event
end
event:stopPropagation()
end
end
-- if button is on focus, stop propagation of touch events
function ButtonUDD:onTouchesBegin(event)
if self.focus then
event:stopPropagation()
end
end
-- if button is on focus, stop propagation of touch events
function ButtonUDD:onTouchesMove(event)
if self.focus then
event:stopPropagation()
end
end
-- if button is on focus, stop propagation of touch events
function ButtonUDD:onTouchesEnd(event)
if self.focus then
event:stopPropagation()
end
end
-- if touches are cancelled, reset the state of the button
function ButtonUDD:onTouchesCancel(event)
if self.focus then
self.focus = false
self:updateVisualState(false)
end
end
-- if state is true show downState else show upState
function ButtonUDD:updateVisualState(state)
self.upState:removeFromParent()
self.downState:removeFromParent()
self.disabledState:removeFromParent()
if self.disabled then
self:addChild(self.disabledState)
else
if state then
self:addChild(self.downState)
else
self:addChild(self.upState)
end
end
end
function ButtonUDD:setDisabled(disabled)
if self.disabled == disabled then
return
end
self.disabled = disabled
self.focus = false
self:updateVisualState(false)
end
function ButtonUDD:isDisabled()
return self.disabled
end
Button with Text and/or Images
note: You don't have to use an image, for example you can create a button with text only.
--[[
A Button class with text and/or image
This code is MIT licensed, see http://www.opensource.org/licenses/mit-license.php
github: mokalux
v 0.1.1: 2020-03-07 added optional mouse hover effect params (mouse hover effect default is true)
v 0.1.0: 2020-03-02 init (based on the initial gideros generic button class)
]]
--[[
-- sample usage
local button = ButtonText.new(
{
text="01", textscalex=4, textcolorup=0x0, textcolordown=0xffff00,
imgdown="gfx/ui/Blue.png", nohover=true,
}
)
button:setPosition(128, 128)
self:addChild(button)
button:addEventListener("click", function()
-- your code here
end)
]]
ButtonText = Core.class(Sprite)
function ButtonText:init(xparams)
-- the params
self.params = xparams or {}
self.params.imgup = xparams.imgup or nil -- img up path
self.params.imgdown = xparams.imgdown or self.params.imgup -- img down path
self.params.imgscalex = xparams.imgscalex or nil -- number or nil = autoscale
self.params.imgscaley = xparams.imgscaley or nil -- number or nil = autoscale
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.textscalex = xparams.textscalex or 1 -- number
self.params.textscaley = xparams.textscaley or self.params.textscalex -- number
self.params.nohover = xparams.nohover or nil -- boolean
-- let's go
self.sprite = Sprite.new()
self.sprite:setAnchorPoint(0.5,0.5)
self:addChild(self.sprite)
-- button has up state image?
if self.params.imgup ~= nil then
self.bmpup = Bitmap.new(Texture.new(self.params.imgup))
self.bmpup:setAnchorPoint(0.5, 0.5)
self.bmpupwidth = self.bmpup:getWidth()
self.bmpupheight = self.bmpup:getHeight()
self.sprite:addChild(self.bmpup)
self.hasbmpup = true
else
self.hasbmpup = false
end
-- button has down state image?
if self.params.imgdown ~= nil then
self.bmpdown = Bitmap.new(Texture.new(self.params.imgdown))
self.bmpdown:setAnchorPoint(0.5, 0.5)
self.bmpdownwidth = self.bmpdown:getWidth()
self.bmpdownheight = self.bmpdown:getHeight()
self.sprite:addChild(self.bmpdown)
self.hasbmpdown = true
else
self.hasbmpdown = false
end
-- button has text?
if self.params.text ~= nil then
self:setText(self.params.text)
self.hastext = true
else
self.hastext = false
end
-- warnings
if not self.hasbmpup and not self.hasbmpdown and not self.hastext then
print("*** WARNING: BUTTONTEXT NEEDS AT LEAST SOME TEXT OR SOME BITMAPS! ***")
end
-- update visual state
self.focus = false
self:updateVisualState(false)
-- event listeners
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.MOUSE_HOVER, self.onMouseHover, self)
if self.params.nohover then
-- print("*** no mouse hover effect ***")
self:removeEventListener(Event.MOUSE_HOVER, self.onMouseHover, self)
end
-- mobile
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
-- FUNCTIONS
function ButtonText:setText(xtext)
if self.params.font ~= nil then
self.font = TTFont.new(self.params.font, self.params.fontsize)
end
if self.text ~= nil then
self.text:setText(xtext)
else
self.text = TextField.new(self.font, xtext, xtext)
end
self.text:setAnchorPoint(0.5, 0.5)
self.text:setScale(self.params.textscalex, self.params.textscaley)
self.text:setTextColor(self.params.textcolorup)
self.textwidth = self.text:getWidth()
self.textheight = self.text:getHeight()
self.sprite:addChild(self.text)
-- scale image
if self.hasbmpup then
local sx, sy = 1, 1
if self.bmpupwidth < self.textwidth then
sx = self.params.imgscalex or (self.textwidth/self.bmpupwidth * 1.25)
sy = self.params.imgscaley or (self.textheight/self.bmpupheight * 2)
end
self.bmpup:setScale(sx, sy)
end
if self.hasbmpdown then
local sx, sy = 1, 1
if self.bmpdownwidth < self.textwidth then
sx = self.params.imgscalex or (self.textwidth/self.bmpdownwidth * 1.25)
sy = self.params.imgscaley or (self.textheight/self.bmpdownheight * 2)
end
self.bmpdown:setScale(sx, sy)
end
end
function ButtonText:setTextColor(xcolor)
self.text:setTextColor(xcolor or 0x0)
end
-- VISUAL STATE
function ButtonText:updateVisualState(xisdown)
if xisdown then
if self.params.imgup ~= nil then self.bmpup:setVisible(false) end
if self.params.imgdown ~= nil then self.bmpdown:setVisible(true) end
if self.params.text ~= nil then self.text:setTextColor(self.params.textcolordown) end
else
if self.params.imgup ~= nil then self.bmpup:setVisible(true) end
if self.params.imgdown ~= nil then self.bmpdown:setVisible(false) end
if self.params.text ~= nil then self.text:setTextColor(self.params.textcolorup) end
end
end
-- BUTTON LISTENERS
-- mouse
function ButtonText:onMouseDown(event)
if self:hitTestPoint(event.x, event.y) then
self.focus = true
self:updateVisualState(true)
event:stopPropagation()
end
end
function ButtonText:onMouseMove(event)
if self:hitTestPoint(event.x, event.y) then
self.focus = true
self:updateVisualState(true)
event:stopPropagation()
end
if not self:hitTestPoint(event.x, event.y) then
self.focus = false
self:updateVisualState(false)
-- event:stopPropagation() -- you may want to comment this line
end
end
function ButtonText:onMouseUp(event)
if self.focus then
self.focus = false
self:updateVisualState(false)
self:dispatchEvent(Event.new("click"))
event:stopPropagation()
end
end
function ButtonText:onMouseHover(event)
if self:hitTestPoint(event.x, event.y) then
self.focus = true
self:updateVisualState(true)
else
self.focus = false
self:updateVisualState(false)
end
end
-- mobile
function ButtonText:onTouchesBegin(event)
if self.focus then
event:stopPropagation()
end
end
function ButtonText:onTouchesMove(event)
if self.focus then
event:stopPropagation()
end
end
function ButtonText:onTouchesEnd(event)
if self.focus then
event:stopPropagation()
end
end
function ButtonText:onTouchesCancel(event)
if self.focus then
self.focus = false
self:updateVisualState(false)
event:stopPropagation()
end
end
Button with Text and/or Images UDD
This button has it all (almost) :-)
note: You don't have to use all parameters (UDD), for example you can create a button with text only.
--[[
A Button class with text and/or image with Up state, Down state, Disabled state (UDD)
This code is MIT licensed, see http://www.opensource.org/licenses/mit-license.php
github: mokalux
v 0.1.0: 2020-03-09 init (based on the initial gideros generic button class)
]]
--[[
-- sample usage
local button = ButtonTextUDD.new(
{
text="01", textscalex=4, textcolorup=0x0, textcolordown=0xffff00,
imgdown="gfx/ui/Blue.png",
nohover=false,
}
)
button:setPosition(64, 2 * 16)
stage:addChild(button)
local button2 = ButtonTextUDD.new(
{
text="02 CAN DO", textscalex=4, textcolorup=0x0, textcolordown=0xffff00,
imgup="gfx/ui/blue (2).png", imgdown="gfx/ui/Blue.png", imgdisabled="gfx/ui/blocker2.png",
nohover=true,
}
)
button2:setPosition(64, 4 * 16)
stage:addChild(button2)
button:addEventListener("clicked", function()
button2:setDisabled(not button2:isDisabled())
end)
button2:addEventListener("click", function()
-- your code here
end)
]]
ButtonTextUDD = Core.class(Sprite)
function ButtonTextUDD:init(xparams)
-- the params
self.params = xparams or {}
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.imgscalex = xparams.imgscalex or nil -- number or nil = autoscale
self.params.imgscaley = xparams.imgscaley or nil -- number or nil = autoscale
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 0x555555 -- color
self.params.textscalex = xparams.textscalex or 1 -- number
self.params.textscaley = xparams.textscaley or self.params.textscalex -- number
self.params.nohover = xparams.nohover or nil -- boolean
-- let's go
self.sprite = Sprite.new()
self.sprite:setAnchorPoint(0.5,0.5)
self:addChild(self.sprite)
-- button has up state image?
if self.params.imgup ~= nil then
self.bmpup = Bitmap.new(Texture.new(self.params.imgup))
self.bmpup:setAnchorPoint(0.5, 0.5)
self.bmpupwidth = self.bmpup:getWidth()
self.bmpupheight = self.bmpup:getHeight()
self.sprite:addChild(self.bmpup)
self.hasbmpup = true
else
self.hasbmpup = false
end
-- button has down state image?
if self.params.imgdown ~= nil then
self.bmpdown = Bitmap.new(Texture.new(self.params.imgdown))
self.bmpdown:setAnchorPoint(0.5, 0.5)
self.bmpdownwidth = self.bmpdown:getWidth()
self.bmpdownheight = self.bmpdown:getHeight()
self.sprite:addChild(self.bmpdown)
self.hasbmpdown = true
else
self.hasbmpdown = false
end
-- button has disabled state image?
if self.params.imgdisabled ~= nil then
self.bmpdisabled = Bitmap.new(Texture.new(self.params.imgdisabled))
self.bmpdisabled:setAnchorPoint(0.5, 0.5)
self.bmpdisabledwidth = self.bmpdown:getWidth()
self.bmpdisabledheight = self.bmpdown:getHeight()
self.sprite:addChild(self.bmpdisabled)
self.hasbmpdisabled = true
else
self.hasbmpdisabled = false
end
-- button has text?
if self.params.text ~= nil then
self:setText(self.params.text)
self.hastext = true
else
self.hastext = false
end
-- warnings
if not self.hasbmpup and not self.hasbmpdown and not self.hasbmpdisabled and not self.hastext then
print("*** WARNING: BUTTONTEXT NEEDS AT LEAST SOME TEXT OR SOME BITMAPS! ***")
end
-- update visual state
self.focus = false
self.disabled = false
self:updateVisualState(false)
-- event listeners
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.MOUSE_HOVER, self.onMouseHover, self)
if self.params.nohover then
print("*** no mouse hover effect ***")
self:removeEventListener(Event.MOUSE_HOVER, self.onMouseHover, self)
end
-- mobile
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
-- FUNCTIONS
function ButtonTextUDD:setText(xtext)
if self.params.font ~= nil then
self.font = TTFont.new(self.params.font, self.params.fontsize)
end
if self.text ~= nil then
self.text:setText(xtext)
else
self.text = TextField.new(self.font, xtext, xtext)
end
self.text:setAnchorPoint(0.5, 0.5)
self.text:setScale(self.params.textscalex, self.params.textscaley)
self.text:setTextColor(self.params.textcolorup)
self.textwidth = self.text:getWidth()
self.textheight = self.text:getHeight()
self.sprite:addChild(self.text)
-- scale image
if self.hasbmpup then
local sx, sy = 1, 1
if self.bmpupwidth < self.textwidth then
sx = self.params.imgscalex or (self.textwidth/self.bmpupwidth * 1.25)
sy = self.params.imgscaley or (self.textheight/self.bmpupheight * 2)
end
self.bmpup:setScale(sx, sy)
end
if self.hasbmpdown then
local sx, sy = 1, 1
if self.bmpdownwidth < self.textwidth then
sx = self.params.imgscalex or (self.textwidth/self.bmpdownwidth * 1.25)
sy = self.params.imgscaley or (self.textheight/self.bmpdownheight * 2)
end
self.bmpdown:setScale(sx, sy)
end
if self.hasbmpdisabled then
local sx, sy = 1, 1
if self.bmpdisabledwidth < self.textwidth then
sx = self.params.imgscalex or (self.textwidth/self.bmpdisabledwidth * 1.25)
sy = self.params.imgscaley or (self.textheight/self.bmpdisabledheight * 2)
end
self.bmpdisabled:setScale(sx, sy)
end
end
function ButtonTextUDD:setTextColor(xcolor)
self.text:setTextColor(xcolor or 0x0)
end
-- VISUAL STATE
function ButtonTextUDD:updateVisualState(xstate)
if self.disabled then -- button disabled state
if self.params.imgup ~= nil then self.bmpup:setVisible(false) end
if self.params.imgdown ~= nil then self.bmpdown:setVisible(false) end
if self.params.imgdisabled ~= nil then self.bmpdisabled:setVisible(true) end
if self.params.text ~= nil then self.text:setTextColor(self.params.textcolordisabled) end
else
if xstate then -- button down state
if self.params.imgup ~= nil then self.bmpup:setVisible(false) end
if self.params.imgdown ~= nil then self.bmpdown:setVisible(true) end
if self.params.imgdisabled ~= nil then self.bmpdisabled:setVisible(false) end
if self.params.text ~= nil then self.text:setTextColor(self.params.textcolordown) end
else -- button up state
if self.params.imgup ~= nil then self.bmpup:setVisible(true) end
if self.params.imgdown ~= nil then self.bmpdown:setVisible(false) end
if self.params.imgdisabled ~= nil then self.bmpdisabled:setVisible(false) end
if self.params.text ~= nil then self.text:setTextColor(self.params.textcolorup) end
end
end
end
function ButtonTextUDD:setDisabled(xdisabled)
if self.disabled == xdisabled then
return
end
self.disabled = xdisabled
self.focus = false
self:updateVisualState(false)
end
function ButtonTextUDD:isDisabled()
return self.disabled
end
-- BUTTON LISTENERS
-- mouse
function ButtonTextUDD:onMouseDown(e)
if self:hitTestPoint(e.x, e.y) then
self.focus = true
self:updateVisualState(true)
e:stopPropagation()
end
end
function ButtonTextUDD:onMouseMove(e)
if self:hitTestPoint(e.x, e.y) then
self.focus = true
self:updateVisualState(true)
e:stopPropagation()
end
if self.focus then
if not self:hitTestPoint(e.x, e.y) then
self.focus = false
self:updateVisualState(false)
-- e:stopPropagation() -- you may want to comment this line
end
end
end
function ButtonTextUDD:onMouseUp(e)
if self.focus then
self.focus = false
self:updateVisualState(false)
if not self.disabled then
self:dispatchEvent(Event.new("clicked")) -- button is clicked, dispatch "click" event
end
e:stopPropagation()
end
end
function ButtonTextUDD:onMouseHover(e)
if self:hitTestPoint(e.x, e.y) then
self.focus = true
self:updateVisualState(true)
else
self.focus = false
self:updateVisualState(false)
end
end
-- touch
function ButtonTextUDD:onTouchesBegin(e)
if self.focus then
e:stopPropagation()
end
end
function ButtonTextUDD:onTouchesMove(e)
if self.focus then
e:stopPropagation()
end
end
function ButtonTextUDD:onTouchesEnd(e)
if self.focus then
e:stopPropagation()
end
end
function ButtonTextUDD:onTouchesCancel(e)
if self.focus then
self.focus = false
self:updateVisualState(false)
e:stopPropagation()
end
end
Button with Text, Pixel, Images 9 Patch, UDD, Tooltip
This button is the most complete :-)
note: You don't have to use all parameters, for example you can create a button with text only.
--[[
ButtonTextP9UDDT
A Button class with text, Pixel, images 9patch (Up, Down, Disabled) and Tooltip
This code is CC0
github: mokalux
v 0.1.5: 2020-08-25 replaced font params with ttf params for better control
v 0.1.41: 2020-08-19 added tooltip text scale and color
v 0.1.4: 2020-06-08 removed useless variables + the class was somehow broken :/
v 0.1.3: 2020-03-30 added tooltiptext
v 0.1.2: 2020-03-29 added nine patch
v 0.1.1: 2020-03-28 added pixel
v 0.1.0: 2020-03-28 init (based on the initial gideros generic button class)
]]
--[[
-- SAMPLE
-- BUTTON QUIT
local mybtnquit = ButtonTextP9UDDT.new({
pixelcolorup=0x0, pixelpaddingx=3, pixelpaddingy=3,
text="QUIT", ttf=mycompositefont,
textcolorup=0xffffff, textcolordown=0xff00ff,
hover=true,
})
mybtnquit:setPosition(64, 64)
stage:addChild(mybtnquit)
mybtnquit:addEventListener("clicked", function() self:goExit() end)
mybtnquit:setDisabled(true)
]]
ButtonTextP9UDDT = Core.class(Sprite)
function ButtonTextP9UDDT:init(xparams)
-- the params table
self.params = xparams or {}
-- 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
-- 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, the image width)
self.params.imagepaddingy = xparams.imagepaddingy or nil -- number (nil = auto, the image height)
-- text?
self.params.text = xparams.text or nil -- string
self.params.ttf = xparams.ttf or nil -- ttf
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 0 -- number (default 0 = false)
self.params.defaultpadding = xparams.defaultpadding or 12 -- number
self.params.tooltiptext = xparams.tooltiptext or nil -- string
self.params.tooltiptextscale = xparams.tooltiptextscale or 2
self.params.tooltiptextcolor = xparams.tooltiptextcolor or 0x0
-- LET'S GO!
if self.params.isautoscale == 0 then self.params.isautoscale = false else self.params.isautoscale = true end
if self.params.hover == 0 then self.params.hover = false else self.params.hover = true end
-- warnings
if not self.params.imgup and not self.params.imgdown and not self.params.imgdisabled
and not self.params.pixelcolorup and not self.params.text and not self.params.tooltiptext then
print("*** WARNING: YOUR BUTTON IS EMPTY! ***")
else
-- draws a pixel around the button to catch the mouse leaving the button
self.catcher = Pixel.new(0x0, 0.25, 1, 1)
self:addChild(self.catcher)
-- button sprite holder
self.sprite = Sprite.new()
self:addChild(self.sprite)
self:setButton()
end
-- update visual state
self.focus = false
self.disabled = false
self:updateVisualState(false)
-- event listeners
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.MOUSE_HOVER, self.onMouseHover, self)
if not self.params.hover and not self.params.tooltiptext then
-- print("*** no mouse hover effect ***")
self:removeEventListener(Event.MOUSE_HOVER, self.onMouseHover, self)
end
end
-- FUNCTIONS
function ButtonTextP9UDDT:setButton()
local textwidth, textheight
local bmps = {}
-- text
if self.params.text then
self.text = TextField.new(self.params.ttf, self.params.text, self.params.text)
self.text:setAnchorPoint(0.5, 0.5)
self.text:setScale(self.params.textscalex, self.params.textscaley)
self.text:setTextColor(self.params.textcolorup)
textwidth, textheight = self.text:getWidth(), self.text:getHeight()
end
-- first add pixel
if self.params.pixelcolorup then
if self.params.isautoscale and self.params.text then
self.pixel = Pixel.new(
self.params.pixelcolor, self.params.pixelalpha,
textwidth + self.params.pixelpaddingx,
textheight + self.params.pixelpaddingy)
else
self.pixel = Pixel.new(
self.params.pixelcolor, self.params.pixelalpha,
self.params.pixelpaddingx,
self.params.pixelpaddingy)
end
self.pixel:setAnchorPoint(0.5, 0.5)
self.pixel:setScale(self.params.pixelscalex, self.params.pixelscaley)
self.sprite:addChild(self.pixel)
end
-- then images
if self.params.imgup then
local texup = Texture.new(self.params.imgup)
if self.params.isautoscale and self.params.text then
self.bmpup = Pixel.new(texup,
textwidth + (self.params.imagepaddingx or self.params.defaultpadding),
textheight + (self.params.imagepaddingy or self.params.defaultpadding))
else
self.bmpup = Pixel.new(texup, self.params.imagepaddingx, self.params.imagepaddingy)
end
bmps[self.bmpup] = 1
end
if self.params.imgdown then
local texdown = Texture.new(self.params.imgdown)
if self.params.isautoscale and self.params.text then
self.bmpdown = Pixel.new(texdown,
textwidth + (self.params.imagepaddingx or self.params.defaultpadding),
textheight + (self.params.imagepaddingy or self.params.defaultpadding))
else
self.bmpdown = Pixel.new(texdown, self.params.imagepaddingx, self.params.imagepaddingy)
end
bmps[self.bmpdown] = 2
end
if self.params.imgdisabled then
local texdisabled = Texture.new(self.params.imgdisabled)
if self.params.isautoscale and self.params.text then
self.bmpdisabled = Pixel.new(texdisabled,
textwidth + (self.params.imagepaddingx or self.params.defaultpadding),
textheight + (self.params.imagepaddingy or self.params.defaultpadding))
else
self.bmpdisabled = Pixel.new(texdisabled, self.params.imagepaddingx, self.params.imagepaddingy)
end
bmps[self.bmpdisabled] = 3
end
-- image batch
for k, _ in pairs(bmps) do
k:setAnchorPoint(0.5, 0.5)
k:setAlpha(self.params.imagealpha)
local split = 9 -- magik number
k:setNinePatch(math.floor(k:getWidth()/split), math.floor(k:getWidth()/split),
math.floor(k:getHeight()/split), math.floor(k:getHeight()/split))
self.sprite:addChild(k)
end
-- finally add text on top of all
if self.params.text then self.sprite:addChild(self.text) end
-- and the tooltip text
if self.params.tooltiptext then
self.tooltiptext = TextField.new(nil, self.params.tooltiptext)
self.tooltiptext:setScale(self.params.tooltiptextscale)
self.tooltiptext:setTextColor(self.params.tooltiptextcolor)
self.tooltiptext:setVisible(false)
-- self.sprite:addChild(self.tooltiptext) -- best to add here?
self:addChild(self.tooltiptext) -- or here to self?
end
-- fit the mouse catcher a little bigger than the button
self.catcher:setDimensions(self.sprite:getWidth() + 8 * 2.5, self.sprite:getHeight() + 8 * 2.5) -- magik
self.catcher:setAnchorPoint(0.5, 0.5)
end
-- VISUAL STATE
function ButtonTextP9UDDT:updateVisualState(xstate)
if self.disabled then -- button is disabled
if self.params.imgup ~= nil then self.bmpup:setVisible(false) end
if self.params.imgdown ~= nil then self.bmpdown:setVisible(false) end
if self.params.imgdisabled ~= nil then self.bmpdisabled:setVisible(true) end
if self.params.pixelcolorup ~= nil then self.pixel:setColor(self.params.pixelcolordisabled) end
if self.params.text ~= nil then self.text:setTextColor(self.params.textcolordisabled) end
elseif not self.params.hover and self.params.tooltiptext then -- button does not hover but has a tooltip text
if xstate and self.isclicked then -- button down state
if self.params.imgup ~= nil then self.bmpup:setVisible(false) end
if self.params.imgdown ~= nil then self.bmpdown:setVisible(true) end
if self.params.imgdisabled ~= nil then self.bmpdisabled:setVisible(false) end
if self.params.pixelcolorup ~= nil then self.pixel:setColor(self.params.pixelcolordown) end
if self.params.text ~= nil then self.text:setTextColor(self.params.textcolordown) end
else -- button up state
if self.params.imgup ~= nil then self.bmpup:setVisible(true) end
if self.params.imgdown ~= nil then self.bmpdown:setVisible(false) end
if self.params.imgdisabled ~= nil then self.bmpdisabled:setVisible(false) end
if self.params.pixelcolorup ~= nil then self.pixel:setColor(self.params.pixelcolorup) end
if self.params.text ~= nil then self.text:setTextColor(self.params.textcolorup) end
end
else
if xstate then -- button down state
if self.params.imgup ~= nil then self.bmpup:setVisible(false) end
if self.params.imgdown ~= nil then self.bmpdown:setVisible(true) end
if self.params.imgdisabled ~= nil then self.bmpdisabled:setVisible(false) end
if self.params.pixelcolorup ~= nil then self.pixel:setColor(self.params.pixelcolordown) end
if self.params.text ~= nil then self.text:setTextColor(self.params.textcolordown) end
else -- button up state
if self.params.imgup ~= nil then self.bmpup:setVisible(true) end
if self.params.imgdown ~= nil then self.bmpdown:setVisible(false) end
if self.params.imgdisabled ~= nil then self.bmpdisabled:setVisible(false) end
if self.params.pixelcolorup ~= nil then self.pixel:setColor(self.params.pixelcolorup) end
if self.params.text ~= nil then self.text:setTextColor(self.params.textcolorup) end
end
end
-- if self.params.tooltiptext and not self.disabled then -- you can choose this option: hides to tooltip when button is disabled
if self.params.tooltiptext then -- or this option: shows the tooltip even when button is disabled
if xstate then -- button hover state
if self.disabled then
self.tooltiptext:setText("( "..self.params.tooltiptext.." )")
else
self.tooltiptext:setText(self.params.tooltiptext)
end
self.tooltiptext:setVisible(true)
else -- button no hover state
self.tooltiptext:setText("")
self.tooltiptext:setVisible(false)
end
end
end
-- disabled
function ButtonTextP9UDDT:setDisabled(xdisabled)
if self.disabled == xdisabled then return end
self.disabled = xdisabled
self.focus = false
self:updateVisualState(false)
end
function ButtonTextP9UDDT:isDisabled()
return self.disabled
end
-- MOUSE LISTENERS
function ButtonTextP9UDDT:onMouseDown(e)
if self:hitTestPoint(e.x, e.y) and self:getParent():isVisible() then
self.focus = true
self.isclicked = true -- 200608
self:updateVisualState(true)
e:stopPropagation()
end
end
function ButtonTextP9UDDT:onMouseMove(e)
if self:hitTestPoint(e.x, e.y) and self:getParent():isVisible() then
self.focus = true
-- self.isclicked = false -- 200608 to delete
-- e:stopPropagation() -- 20200820 to delete: prevents hover effect
else
self.focus = false
-- e:stopPropagation() -- you may want to remove this line
end
self:updateVisualState(self.focus)
end
function ButtonTextP9UDDT:onMouseUp(e)
if self.focus and self.isclicked then
self.focus = false
self.isclicked = false -- 200608
if not self.disabled then
self:dispatchEvent(Event.new("clicked")) -- button is clicked
end
e:stopPropagation()
end
end
function ButtonTextP9UDDT:onMouseHover(e)
if self.catcher:hitTestPoint(e.x, e.y) and self.catcher:isVisible() then
self.focus = false
end
if self.sprite:hitTestPoint(e.x, e.y) and self.sprite:isVisible() then
if self.params.tooltiptext then self.tooltiptext:setPosition(self.sprite:globalToLocal(e.x, e.y)) end
self.focus = true
end
self:updateVisualState(self.focus)
end
Toggle Button
--[[
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