Article Tutorials/Drawing text with TextField
Drawing Text
Type the following text into 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.
Congratulations! You’ve written your first application in Gideros Studio! Pat yourself on the back. Once you’ve finished your celebration, close the Player.
Now, let’s discuss what the code actually does:
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 the default font.
textfield:setX(10)
textfield:setY(10)
These set the X and Y co-ordinates of the top-left corner of the text on the screen to display.
stage:addChild(textfield)
This adds the text field to the screen.
You can change the colour of the text displayed using:
Textfield:setTextColor()
An example of this is below. To test it out, add it in your code above “stage:addChild”.
Textfield:setTextColor(0xff0000)
This sets the colour of the above text field to red. To learn more about Hexadecimal colours, you can find more info here:
They are the same codes as in HTML. Instead of #ff0000 we use 0xff0000. Quite simple, really.
You can also 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.
local textField = TextField.new(myfont, "Hello World")
stage:addChild(textField)
You can also use any TTF font in your application. Just copy it into Gideros Studio via Add Existing Files:
To use this, the following code will do it:
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 slowly, 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 by this tutorial from 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/.
