Quick Links: Download Gideros Studio | Gideros Documentation | Gideros community chat | DONATE
Button with text — Gideros Forum

Button with text

psdiaspsdias Member
edited January 2013 in General questions
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


Likes: CodeVanya

+1 -1 (+1 / -0 )Share on Facebook

Comments

  • OZAppsOZApps Guru
    Accepted Answer
    @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.
    twitter: @ozapps | http://www.oz-apps.com | http://howto.oz-apps.com | http://reviewme.oz-apps.com
    Author of Learn Lua for iOS Game Development from Apress ( http://www.apress.com/9781430246626 )
    Cool Vizify Profile at https://www.vizify.com/oz-apps
  • edited January 2013 Accepted Answer
    @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.
    Capture.PNG
    332 x 546 - 45K

    Likes: CodeVanya

    Coming soon
    +1 -1 (+1 / -0 )Share on Facebook
  • Thank you very much (both).

    I will try yours ideas.

    Paulo
Sign In or Register to comment.