Corona SDK Tutorial:How Work With Text

When creating text in Corona SDK we must use the function newText of the display object. This function takes four parameter

  • string
  • left corner (x-coordinate)
  • top (left) corner(y-coordinate)

config.lua

First let’s make a config file to set the screen size.

application =
{
     content =
     {
        width = 320,
        height = 480,
        scale = "zoomEven"
      }
}

main.lua

Now lets work on the main.lua file. We can store the text in a variable and use that variable later to change other properties of that text like the color, size, and font.

In our text, the coordinates that we give it are for the top left corner. Now let’s make a text called “text_variable_name” with the top left corner at (160,240).

--local nameoftext = display.newText(string,left-x-coordinate,top-y-coordinate)
local text_variable_name = display.newText("WebHole", 160, 240)
White text

White text from the code above

I created two white lines to point at this coordinate however, they are not necessary.

The default color of the text is white, let’s change the color to red using the setTextColor function. The setTextColor function also needs three parameters which range from 0 to 250 in this order:

  • amount of red
  • amount of green
  • and amount of blue
--nameoftext:setTextColor(Red, Green, Blue)
text_variable_name:setTextColor(255,0,0)

The full code for the text is

local text_variable_name = display.newText("WebHole", 160, 240)
text_variable_name:setTextColor(255,0,0)
Red text

Red text from the code above

Now we will change the size of our text. For our next example we will create two different variable names of different colors to see the difference in size. To change the size we will add two more parameter to the

display.newText

function, one will be the font, and the other will be the size which we will set to 30.

--local nameoftext = display.newText(string,left-x-coordinate,top-y-coordinate,font,size)
local Green_Text = display.newText("WebHole", 160, 240,native.systemFont,30)
Green_Text:setTextColor(0, 250, 0)
local Red_Text = display.newText("WebHole", 160, 240)
Red_Text:setTextColor(250, 0, 0)
increasing size

Increasing the size of the text from our original text

When you entered this code you noticed that the font size changed diagonally, and the coordinate of the top left corner stayed where we placed it. In our next example we have the function

nameoftext.size = number

that will also change the size of the text however, the size will grow in all directions(not diagonally like in our previous example).We will color this new text yellow.

local Yellow_Text = display.newText("WebHole", 160, 240,native.systemFont)
Yellow_Text:setTextColor(250, 250, 0)

--nameoftext.size = number
Yellow_Text.size = 30

local Red_Text = display.newText("WebHole", 160, 240)
Red_Text:setTextColor(250, 0, 0)

Yellow Text

New text compared to the previous ones


You can also increase the size diagonally after it has increased in all directions by typing a number for size in
local nameoftext = display.newText(string,left-x-coordinate,top-y-coordinate,font,size)

and then increase the size outward by adding a number in the function

nameoftext.size = number

. Another function we could use with the text function is nameoftext.text = string. And instead of typing a string inside the " " in the

display.newText

function, we will type it in for the string in

nameoftext.text = string

. This will cause the x and y coordinates you choose to be in the center of your text, not in the top left corner.

local Green_Text = display.newText("", 160, 240)
Green_Text:setTextColor(0, 250, 0)

--nameoftext.text = string
Green_Text.text = "WebHole"

local Red_Text = display.newText("WebHole", 160, 240)
Red_Text:setTextColor(250, 0, 0)

Centered text

With our new function, the x and y coordinates of the green text you chose are in the center of your text, not in the top left corner.


You can then change the size of the text with the functions we learned above:

local Yellow_Text = display.newText("WebHole", 160, 240,native.systemFont,50)
Yellow_Text:setTextColor(250, 250, 0)

Yellow_Text.size = 30

local Green_Text = display.newText("", 160, 240,native.systemFont,50)
Green_Text:setTextColor(0, 250, 0)

Green_Text.size = 60
Green_Text.text = "WebHole"

local Red_Text = display.newText("WebHole", 160, 240)
Red_Text:setTextColor(250, 0, 0)
Centered Text

Different types of text grouped.

blog comments powered by Disqus