ButtonText class

The class should be easy to adapt/modifiy

Button Text Class

--[[
-- ButtonText
-- A Button class with: Image, Text, Up state, Down state, Hover (ITUDH)
v 0.1.2: 2023-11-30 maintenance
v 0.1.1: 2020-03-07 added mouse hover
v 0.1.0: 2020-03-02 init (based on the initial generic Gideros Button class)
]]

ButtonText = Core.class(Sprite)

function ButtonText:init(xparams)
	-- the params
	self.params = xparams or {}
	self.params.imguptex = xparams.imguptex or nil -- img Up Texture
	self.params.imgdowntex = xparams.imgdowntex or self.params.imguptex -- img Down Texture
	self.params.imgscalex = xparams.imgscalex or 1 -- number or nil = autoscale
	self.params.imgscaley = xparams.imgscaley or self.params.imgscalex -- number or nil = autoscale
	self.params.text = xparams.text or nil -- string
	self.params.ttf = xparams.ttf or nil -- ttf font
	self.params.textscalex = xparams.textscalex or 1 -- number
	self.params.textscaley = xparams.textscaley or self.params.textscalex -- number
	self.params.textcolorup = xparams.textcolorup or 0x0 -- color
	self.params.textcolordown = xparams.textcolordown or self.params.textcolorup -- color
	-- let's go
	self:setButton()
	-- update visual state
	self.focus = false
	self:updateVisualState(false)
	-- register to all mouse 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.MOUSE_HOVER, self.onMouseHover, self)
	-- register to all touch events
	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 ButtonText:setButton()
	if self.params.imguptex then
		self.bmpup = Bitmap.new(self.params.imguptex)
		self.bmpup:setScale(self.params.imgscalex, self.params.imgscaley)
		self.bmpup:setAnchorPoint(0.5, 0.5)
		self:addChild(self.bmpup)
	end
	if self.params.imgdowntex then
		self.bmpdown = Bitmap.new(self.params.imgdowntex)
		self.bmpdown:setScale(self.params.imgscalex, self.params.imgscaley)
		self.bmpdown:setAnchorPoint(0.5, 0.5)
		self:addChild(self.bmpdown)
	end
	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)
		self:addChild(self.text)
	end
end

function ButtonText:onMouseDown(ev)
	if self:hitTestPoint(ev.x, ev.y) then
		self.focus = true
		self:updateVisualState(true)
		ev:stopPropagation()
	end
end
function ButtonText:onMouseMove(ev)
	if self.focus then
		if not self:hitTestPoint(ev.x, ev.y) then
			self.focus = false
			self:updateVisualState(false)
		end
		ev:stopPropagation() -- you may want to comment this line
	end
end
function ButtonText:onMouseUp(ev)
	if self.focus then
		self.focus = false
		self:updateVisualState(false)
		self:dispatchEvent(Event.new("clicked")) -- button is clicked, dispatch "clicked" event
		ev:stopPropagation()
	end
end
function ButtonText:onMouseHover(ev) -- mouse only
	if self:hitTestPoint(ev.x, ev.y) then -- onenter
		self.focus = true
		-- execute onenter code only once
		self.onenter = not self.onenter
		if not self.onenter then self.moving = true end
		if not self.moving then
			self:updateVisualState(true)
		else
			self.focus = false
			self.onexit = true
		end
		ev:stopPropagation()
	else -- onexit
		self.focus = false
		self.onenter = false
		self.moving = false
		if self.onexit then
			-- execute onexit code only once
			self.onexit = false
			self:updateVisualState(false)
		end
	end
end

-- if button is on focus, stop propagation of touch events
function ButtonText:onTouchesBegin(ev)
	if self.focus then
		ev:stopPropagation()
	end
end
-- if button is on focus, stop propagation of touch events
function ButtonText:onTouchesMove(ev)
	if self.focus then
		ev:stopPropagation()
	end
end
-- if button is on focus, stop propagation of touch events
function ButtonText:onTouchesEnd(ev)
	if self.focus then
		ev:stopPropagation()
	end
end
-- if touches are cancelled, reset the state of the button
function ButtonText:onTouchesCancel(ev) -- touch only
	if self.focus then
		self.focus = false
		self:updateVisualState(false)
		ev:stopPropagation()
	end
end

-- if state is true show downState else show upState
function ButtonText:updateVisualState(state)
--	print("updateVisualState")
	if state then -- downState
		if self.params.imguptex then self.bmpup:setVisible(false) end
		if self.params.imgdowntex then self.bmpdown:setVisible(true) end
		if self.params.text then self.text:setTextColor(self.params.textcolordown) end
	else -- upState
		if self.params.imguptex then self.bmpup:setVisible(true) end
		if self.params.imgdowntex then self.bmpdown:setVisible(false) end
		if self.params.text then self.text:setTextColor(self.params.textcolorup) end
	end
end

Button Text Demo

-- ButtonText DEMO
-- bg
application:setBackgroundColor(0x6c6c6c)
-- font
local myttf = TTFont.new("fonts/Cabin-Bold-TTF.ttf", 18)
-- textures
local texbtnup = Texture.new("gfx/ui/btn_01_up.png")
local texbtndown = Texture.new("gfx/ui/btn_01_down.png")
-- buttons
local btntext = ButtonText.new({
	imguptex=texbtnup, imgdowntex=texbtndown,
	text="ButtonText", ttf=myttf, textcolorup=0x0, textcolordown=0xffff00,
})
local btntext2 = ButtonText.new({
	imguptex=texbtnup, imgdowntex=texbtndown,
	text="ButtonText 2", ttf=myttf, textcolorup=0x0, textcolordown=0xffff00,
})
-- position
btntext:setPosition(16*4, 16*8.5)
btntext2:setPosition(16*13, 16*8.5)
-- order
stage:addChild(btntext)
stage:addChild(btntext2)
-- listeners
btntext:addEventListener("clicked", function() 
	print("button was clicked!")
end)
btntext2:addEventListener("clicked", function() 
	print("button 2 was clicked!")
end)

UI Buttons

---

• Main Page
• Lua API
• Main API
• Plugins