Gideros Mobile tutorial – Drawing Text

Type the following text into your main.lua file: Start the Player as shown previously and hit the Play button.         Congratulations! You’ve written your first application in […]

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.

Hello World on the Player

 

 

 

 

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:

http://www.color-hex.com/

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.

Font

 

 

 

 

 

 

 

You can use the Gideros Studio Font Creator software to create your PNG font file from any TTF font on your computer.

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:

TTF font

 

 

 

 

To use this, the following code will do it:

local myfont = TTFont.new("FtraMd__.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)

 

 

Tags:
Jason Oakley

About Jason Oakley