Button with text

psdias

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

@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

@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

Thank you very much (both).

I will try yours ideas.

Paulo