- Sponsor
-
Notifications
You must be signed in to change notification settings - Fork 492
How to make Text box
Hello how are you? Hope you are ok, let's teach you how to make a text box using Lua!
Before I start I want to credit this text box wonder to 「petet」 (game developer like "BALMUNG", also made on the TIC-80), if I hadn't taken a look at the BALMUNG source code I would never have learned how to do that. Well, looks like we can get started.
Let's start by writing our desktop, it will look like this:
-- title: How to Make a Text Box in Lua
-- author: (you)
-- desc: Tutorial
-- script: lua
t=0
function TIC()
cls()
t=t+1
end
Let's create three variables: dialogue
a table responsible for storing the texts, layer
as its name says it will take care of the table layers and text_pos
which will be the position of the letters from beginning to end.
dialogues = {}
layer = 1
text_pos = 1
Next we will create a function named addDialogues
, its parameters are a table
.
function addDialogues(table)
dialogues = table
end
Now is the time to create the textbox system. In the TIC
function, I'm going to create two local variables, one carrying the strings and the other holding their length, for that we use the function (already built in Lua) string.len (string)
, it returns the length of the text
-- error
local string = dialogues[layer]
local lenght = string.len(string)
-- error
But since Lua won't allow us to have a variable with the length of a string that doesn't exist (since 'dialogues' is empty) let's put them inside an if
:
if dialogues ~= nil and dialogues[layer] ~= nil then
local string = dialogues[layer]
local lenght = string.len(string)
end
Now we can continue, let's make an if
statement saying "if this button is pressed and the text has not ended, end the text, otherwise, skip to the next dialog". Practice time.
if dialogues ~= nil and dialogues[layer] ~= nil then
local string = dialogues[layer]
local lenght = string.len(string)
if btnp(4) and text_pos >= 2 then
if text_pos < lenght then
text_pos = lenght
else
text_pos = 1
layer = layer + 1
end
end
end
In this code we are saying "if you press the A/Z button and the letter position is greater than or equal to 2 then enter the second instruction", "if text_pos
is less than its length then complete the dialog otherwise reset the position and skip to the next text". In a moment we will see the result of this code.
For a text box to be a text box what does it need? From a box of course! So let's draw our box.
In the same if
statement we will create another statement, in it we will say "if the layer is less than or equal to the length of the dialog table then draw the box and the text".
if layer <= #dialogues then
rect(0,68/2,240,68,15)
rectb(0,68/2,240,68,12)
end
We draw the text with the print
function, in it we will use the local variable we created up there at the beginning of the first statement:
if layer <= #dialogues then
rect(0,68/2,240,68,15)
rectb(0,68/2,240,68,12)
print(string,5,68/2+5,13)
end
if you did everything right and run the cartridge you will see that there is nothing drawn on the screen as this is all a lie and there is no textbox tutorial, goodbye 'v'.
It did not leave the screen! The answer to this is because we didn't add any dialog, to add a dialog we need to call the addDialogues
function like this:
addDialogues( { "Hello World!" } )
We're looking at our text box, but when we press A/Z it doesn't turn off, remember the text_pos
variable? So, we made an instruction saying that if its length were full the box would jump to another dialog. So let's do this:
if layer <= #dialogues then
rect(0,68/2,240,68,15)
rectb(0,68/2,240,68,12)
print(string,5,68/2+5,13)
if text_pos < lenght then
text_pos = text_pos + 1
end
end
Now try... you saw how we managed to turn off the box, but seriously, you didn't think we created a global variable just to turn off a text box did you? Now comes the fun idea! Let's use the string.sub()
function, as far as we know it replaces words from the desired string, so let's do the following in the print
function:
print(string.sub( string , 1, text_pos),5,68/2+5,13)
Our text is being drawn little by little, if you are interested and want to understand string
functions read the Lua documentation, did you find the letters too fast? Try this in the statement where we update text_pos
:
if text_pos < lenght and t % 4 == 0 then
text_pos = text_pos + 1
end
So, if you want to write some text on the next layer just add a ,
in the table and write another string:
addDialogues( { "Hello World!" , "Good Night!", "Good Morning"} )
Final code:
-- title: How to make a Text box in lua
-- author: @ATS_xp
-- desc: Tutorial
-- script: lua
t=0
dialogues = {}
layer = 1
text_pos = 1
function addDialogues(table)
dialogues = table
end
addDialogues( { "Hello World!" , "Good Night!", "Good Morning"} )
function TIC()
cls()
if dialogues ~= nil and dialogues[layer] ~= nil then
local string = dialogues[layer]
local lenght = string.len(string)
if btnp(4) and text_pos >= 2 then
if text_pos < lenght then
text_pos = lenght
else
text_pos = 1
layer = layer + 1
end
end
if layer <= #dialogues then
rect(0,68/2,240,68,15)
rectb(0,68/2,240,68,12)
print(string.sub( string , 1, text_pos),5,68/2+5,13)
if text_pos < lenght and t % 4 == 0 then
text_pos = text_pos + 1
end
end
end
t=t+1
end
Bye!
TIC-80 tiny computer https://tic80.com | Twitter | Telegram | Terms
Built-in Editors
Console
Platform
RAM & VRAM | Display | Palette | Bits per Pixel (BPP) |
.tic
Format | Supported Languages
Other
Tutorials | Code Snippets | Libraries | External Tools | FFT
API
- BDR (0.90)
- BOOT (1.0)
- MENU
- OVR (deprecated)
- SCN (deprecated)
- TIC
- btn & btnp
- circ & circb
- clip
- cls
- elli & ellib (0.90)
- exit
- fget & fset (0.80)
- font
- key & keyp
- line
- map
- memcpy & memset
- mget & mset
- mouse
- music
- peek, peek4
- peek1, peek2 (1.0)
- pix
- pmem
- poke, poke4
- poke1, poke2 (1.0)
- rect & rectb
- reset
- sfx
- spr
- sync
- ttri (1.0)
- time
- trace
- tri & trib (0.90)
- tstamp (0.80)
- vbank (1.0)