Difference between revisions of "Article Tutorials/Drawing text with TextField"
m (Text replacement - "</source" to "</syntaxhighlight") |
|||
| Line 6: | Line 6: | ||
textfield:setY(10) | textfield:setY(10) | ||
stage:addChild(textfield) | stage:addChild(textfield) | ||
| − | </ | + | </syntaxhighlight> |
Start the Player as shown previously and hit the Play button. | Start the Player as shown previously and hit the Play button. | ||
| Line 30: | Line 30: | ||
<source lang="lua"> | <source lang="lua"> | ||
local myfont = Font.new("font.txt", "font.png") | local myfont = Font.new("font.txt", "font.png") | ||
| − | </ | + | </syntaxhighlight> |
The image file “font.png” contains your font: | The image file “font.png” contains your font: | ||
| Line 39: | Line 39: | ||
local textField = TextField.new(myfont, "Hello World") | local textField = TextField.new(myfont, "Hello World") | ||
stage:addChild(textField) | stage:addChild(textField) | ||
| − | </ | + | </syntaxhighlight> |
== TTFont == | == TTFont == | ||
| Line 52: | Line 52: | ||
text:setPosition(10, 10) | text:setPosition(10, 10) | ||
stage:addChild(text) | stage:addChild(text) | ||
| − | </ | + | </syntaxhighlight> |
The “18” above is the font size. | The “18” above is the font size. | ||
| Line 62: | Line 62: | ||
text:setPosition(10, 10) | text:setPosition(10, 10) | ||
stage:addChild(text) | stage:addChild(text) | ||
| − | </ | + | </syntaxhighlight> |
You can download the assets required in this tutorial here: [[File:Jason-Oakley-Drawing Text assets.zip|center]] | You can download the assets required in this tutorial here: [[File:Jason-Oakley-Drawing Text assets.zip|center]] | ||
Revision as of 17:32, 12 July 2023
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/
