Article Tutorials/Drawing text with TextField

From GiderosMobile
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

Drawing Text

Type the following code in your main.lua file:

local textfield = TextField.new(nil, "Hello, world!")
textfield:setX(10)
textfield:setY(10)
stage:addChild(textfield)

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

Hello-World-on-the-Player.png

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.

local myfont = Font.new("font.txt", "font.png")

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

Font.png


local textField = TextField.new(myfont, "Hello World")
stage:addChild(textField)

TTFont

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

Jason-Oakley-Drawing-Text-TTFfont.png

Then in your code:

local myfont = TTFont.new("LiberationMono-Regular.ttf", 18)
local text = TextField.new(myfont, "Hello world")
text:setPosition(10, 10)
stage:addChild(text)

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:

local font = TTFont.new("FtraMd__.ttf", 18, " ABCDEFGHIJKLMNOPQRSTUVWXYZ")
local text = TextField.new(myfont, "HELLO WORLD")
text:setPosition(10, 10)
stage:addChild(text)

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/


Written Tutorials