Article Tutorials/Drawing text with TextField

Drawing Text

Type the following code in your main.lua file: <source lang="lua"> local textfield = TextField.new(nil, "Hello, world!") textfield:setX(10) textfield:setY(10) stage:addChild(textfield) </syntaxhighlight>

Start the Player as shown previously and hit the Play button.

Code explanation

local textfield = TextField.new(nil, "Hello, world!")
This code creates a local variable “textfield” with the content of “Hello, world!”. The ‘nil’ specifies to use Gideros default font.

textfield:setX(10)
textfield:setY(10)
These set the X and Y coordinates of the bottom-left corner of the text to display on the screen.

stage:addChild(textfield)
This adds the text field to the screen.

You can change the color of the text:
Textfield:setTextColor(0xFF0000)

Font

You can use your own font, provided you include it with the application. <source lang="lua"> local myfont = Font.new("font.txt", "font.png") </syntaxhighlight>

The image file “font.png” contains your font:

<source lang="lua"> local textField = TextField.new(myfont, "Hello World") stage:addChild(textField) </syntaxhighlight>

TTFont

You can also use any TTF font in your application. Just copy it into Gideros Studio via Add Existing Files:

Then in your code: <source lang="lua"> local myfont = TTFont.new("LiberationMono-Regular.ttf", 18) local text = TextField.new(myfont, "Hello world") text:setPosition(10, 10) stage:addChild(text) </syntaxhighlight>

The “18” above is the font size.

TTF fonts display is slow, so you should pre-cache any characters you will use to display your text. Make sure you cover ALL characters your app will be using: <source lang="lua"> local font = TTFont.new("FtraMd__.ttf", 18, " ABCDEFGHIJKLMNOPQRSTUVWXYZ") local text = TextField.new(myfont, "HELLO WORLD") text:setPosition(10, 10) stage:addChild(text) </syntaxhighlight>

You can download the assets required in this tutorial here: File:Jason-Oakley-Drawing Text assets.zip

Note: This tutorial was written by Jason Oakley and was originally available here: http://bluebilby.com/2013/04/06/gideros-mobile-tutorial-drawing-text/