Text v.s. Image (Answered, lot's of useful code!)

joelghill

I've been toying with the idea of adding support for text and fonts to the Button library where you could input text, font and size (as well as up and down states) and have it produce a button with said text.

The issue is.... is that actually useful? I'm wondering if it is just easier to produce images with the text you want already in them. Is using text within an app expensive compared to adding a Bitmap?

I think it might be useful for rapid prototyping... no going to photoshop or other imaging editing software to produce images for buttons, you could do it all within Gideros to quickly produce a prototyp UI.

Thoughts?

ar2rsawseen

Yes it's definitely is useful for prototyping and I was thinking of creating something similar myself. Only thing holding me back was the time I can spent on side projects, and this time is usually spent somewhere else.

If someone would create/extend button class with text support, I would really appreciate it

talis

@Teranth implemented a function which is centering the text that you send as a parameter to the center of the button. It is really a handy function.
As i said all credits here goes to him.

-- Uses global font via getFont() function, and creates a button -- object with custom text automatically centered on it. function makeTextButton(text, x, y, container, bg_up, bg_down) -- Load font from assets into memory. local hobo_font = getFont()   --Create start button local buttonObj = Button.new(Bitmap.new(Texture.new(bg_up or "assets/button_up.png", true)), Bitmap.new(Texture.new(bg_down or "assets/button_down.png",true))) buttonObj:setPosition(x, y) container:addChild(buttonObj)   -- Test the Font Out on Title Screen. local buttonObjText = TextField.new(hobo_font, text)   -- Increase font size 3 fold. buttonObjText:setScale(.5)   buttonObjText:setPosition( (buttonObj:getX() + ((buttonObj:getWidth()/2) - buttonObjText:getWidth()/2)), (buttonObj:getY() + ((buttonObj:getHeight()/2) + buttonObjText:getHeight()/2)) )   -- Add text to scene. container:addChild(buttonObjText)   return buttonObj end

joelghill

I went ahead and edited the generic button class... the above example didn't quite do it for me. Thanks though!

Gideros Project is attached if you want to test it out!

EDIT: I forgot to mention that the images are entirely optional, you can have text only buttons.

Also trimmed code here (it was very long). The rest of the functions are the same as button class, only they are "function TextButton:function()"

--[[ A generic text button class   Adapted from the generic button class *Now includes Text and font support (added by <a href="http://forum.giderosmobile.com/profile/joelghill%29" rel="nofollow">@joelghill)</a>   This code is MIT licensed, see <a href="http://www.opensource.org/licenses/mit-license.php" rel="nofollow">http://www.opensource.org/licenses/mit-license.php</a> (C) 2010 - 2012 Gideros Mobile ]]   TextButton = gideros.class(Sprite)   function TextButton:init(font, textUp, textDown, upState, downState)   --create the upState and downstate sprites self.upState = Sprite.new() self.downState = Sprite.new()   -- add images to up and down states if given   if upState and downState then self.upImage = upState self.downImage = downState self.upState:addChild(self.upImage) self.downState:addChild(self.downImage) end     --add text and position in middle if necessary if textUp and textDown then self.textUp =TextField.new(font, textUp) self.textDown = TextField.new(font, textDown) self.upState:addChild(self.textUp) self.downState:addChild(self.textDown) if upState and downState then -- center text in middle of images --set local variables local upimageLength = self.upImage:getWidth() local upimageHeight = self.upImage:getHeight()   local downimageLength = self.downImage:getWidth() local downimageHeight = self.downImage:getHeight()   local uptextLength = self.textUp:getWidth() local uptextHeight = self.textUp:getHeight()   local downtextLength = self.textDown:getWidth() local downtextHeight = self.textDown:getHeight()   self.textUp:setPosition((upimageLength-uptextLength)/2,(upimageHeight-uptextHeight)/2) self.textDown:setPosition((downimageLength-downtextLength)/2,(downimageHeight-downtextHeight)/2) end   end   self.focus = false   self:updateVisualState(false)   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

talis

Great job really @joelghill . I was too lazy these days so i will add this code to my secret vault :ar!
Thanks again for sharing.

techdojo

In my button library I have support for text labels, it's a lot faster to create / change buttons when you have a single skin for the background states and then use text to make each button unique. It's also a LOT more efficient on the graphics side as it's only one (or two) single images that are reused - plus makes localising button text a LOT easier.

joelghill

@techdojo yeah, I started using the button class I edited a bit, and it became immediately obvious that I could get rid of tonnes of assets. In the end it wasn't a lot of space, but it sure made things more organized and easier to work with!

Mells

@joelghill, @techdojo What do you use to position the text inside the button?
I can't find baseline parameters, I have searched all over the place and couldn't find it.
I'm trying to make it work like CSS (padding, margin).

Also, does any fork of textbutton include a way to specifiy width and height (and crop the image given as a parameter for up and down status).

From my understanding now the button's width comes from the bitmap's width? but most of the time the image is just used as a background for a button with a given width.

Unless I didn't understand well how those classes work... (and probability is high).

joelghill

When there is an image used, the text is supposed to be centered within the Bitmap. When there is no Bitmap, and only text is used, the text should be at 0,0 in the buttons local coordinates. I think.

-- if there is an upState and downState image then.... if upState and downState then -- center text in middle of images --set local variables local upimageLength = self.upImage:getWidth() local upimageHeight = self.upImage:getHeight()   local downimageLength = self.downImage:getWidth() local downimageHeight = self.downImage:getHeight()   local uptextLength = self.textUp:getWidth() local uptextHeight = self.textUp:getHeight()   local downtextLength = self.textDown:getWidth() local downtextHeight = self.textDown:getHeight()   self.textUp:setPosition((upimageLength-uptextLength)/2,(upimageHeight-uptextHeight)/2) self.textDown:setPosition((downimageLength-downtextLength)/2,(downimageHeight-downtextHeight)/2) end

The above code is what centers the text.... it seemed to work for me, but there could very well be a mistake in the code. I'm rather inexperienced at this.

Button width is equal to the max width of it's children and no more I believe.

ar2rsawseen

@Mells
You can try using getBounds() method to get the baseline offset.
y coordinate is usually somewhere along -7px

techdojo

Here's the code I use.

First I get the bounds of the text string ( sprite:getBounds() ) and then the bounds of the box, for the text remember the render position is actually the bottom left corner of the bounding box, not the top left.

I then just take one away from the other to work out the text draw offset relative to the top left of the box.

Mells

Thank you,

For those that are looking for unofficial-official steps on how to work with getBounds() :

The documentation of this function will be available with the next version.

>> [ Link ]