Button with text

psdias · January 2013

Hello !
(Sorry for my bad English)

I am a new Gideros developer, and I still do not know much.

I am using the "button.lua" module to create buttons, but I need buttons with texts over them.

I can not use images that already contain texts, because I will create an option to translate the app to
English, Portuguese and Spanish, and I do not want create three different images for each button.

I tried create objects with "TextField.new", but I am having troubles whit the position of the text,
when I change the text to English, Portugues or Spanish.

Furthermore, I need to reposition the buttons in certain situations, and the text must follow the position of the button

Is there a easy way to make a button with text ?

Thanks for your attention !
Paulo

OZApps · January 2013

@psdias, have a look at this article, http://dev.oz-apps.com/?p=248

you would require a similar sort of code where you can create the image background and then place text on it. Alternatively if your buttons are plain, then you can create rectangles and place text on it.

To make sure that the text follows the button, you need to place them all in the same sprite parent.

In many games developers do use buttons for each language the benefits are that you can have pre-rendered fonts and fx in the language of your choice vs plain text dynamically created.

vitalitymobile · January 2013

@psdias, you can use it:

remember import init file from :
https://github.com/ar2rsawseen/GiderosCodingEasy

to use setAnchorPoint method

Button = Core.class(Sprite)
local font = TTFont.new("Roboto-Bold.ttf", 20,true)
local textColorUp = 0xFFFFFF;
local textColorDown = 0x000000;
function Button:init(upState, downState,value)
	self.upState = upState
	self.downState = downState
	if value then
		self.value = TextField.new(font,value);
		self.value:setTextColor( textColorUp )
		self.value:setAnchorPoint(0.5,-0.25);
	end
	self.focus = false
 
	-- set the visual state as "up"
	self:updateVisualState(false)
	if self.value and (not self:contains(self.value)) then
		self:addChild(self.value)
	end
 
	-- 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)
			if self.value and (self:contains(self.value)) then
				self:removeChild(self.value)
			end			
		end
 
		if not self:contains(self.downState) then
			self:addChild(self.downState)
			if self.value and ( not self:contains(self.value)) then
				self:addChild(self.value)
				self.value:setTextColor( textColorDown)
			end			
		end
	else
		if self:contains(self.downState) then
			self:removeChild(self.downState)
			if self.value and (self:contains(self.value)) then
				self:removeChild(self.value)
			end			
		end
 
		if not self:contains(self.upState) then
			self:addChild(self.upState)
			if self.value and ( not self:contains(self.value)) then
				self:addChild(self.value)
				self.value:setTextColor( textColorUp)
			end			
		end
	end
end

	-- create the up and down sprites for the button
	local img_btnFreePlay_up = Bitmap.new(Texture.new("images/button.png"),true)
	local img_btnFreePlay_down = Bitmap.new(Texture.new("images/buttonc.png"),true)
	img_btnFreePlay_up:setAnchorPoint(0.5,0.5)
	img_btnFreePlay_down:setAnchorPoint(0.5,0.5)
	-- create the button
	local btnFreePlay = Button.new(img_btnFreePlay_up, img_btnFreePlay_down,"Chơi")

Result as attach image.

psdias · January 2013

Thank you very much (both).

I will try yours ideas.

Paulo

Howdy, Stranger!

Categories

In this Discussion

Top Posters

Button with text

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

Button with text

Comments