Creating a Textbox - Hello World!

This tutorial should be followable by beginners!
Although this tutorial does not cover the basic principals of coding in any depth, it is designed to give you a quick hands-on approach to coding in the Teverse sandbox

So, you want to display a simple message on the screen? You’re in the right place, in this quick tutorial we’ll cover how to create a simple textbox using Lua and Teverse.

You’ll need:

  • Visual Studio Code (download here for free), you could use any code editor really but we prefer VSC!
  • Teverse (0.19.0+)

Before we get started, create an empty Lua file on your device and open it in Visual Studio Code (or your favourite code editor).

Prepping Teverse

  1. Open up Teverse
  2. Navigate to the “Code” tab on the side menu
  3. Click “Run Lua”
  4. Select the empty Lua file you created earlier


You’ll notice that Teverse is now black, this is normal! Since the file we’ve loaded is empty, nothing will happen.

Creating a TextBox
This is easy to do, simply add this line of code to that Lua file you created:

engine.construct("guiTextBox", engine.interface)

This commands our engine to construct a text box, and parent it to the engine’s interface.

Now save the file and click “Rerun” on the bottom of Teverse, and witness the appearance of your ‘textbox’ (yea that white square on the top left):

Making it bigger…
I bet you’re astonished with what you’ve created so far, but let’s make the square more rectangular.

Change the current line of code we’ve added to resemble something like this:

engine.construct("guiTextBox", engine.interface, {

})

We’ve basically added a , followed by { } before the closing ).

Now, within these curly brackets, we can specify what properties we want to set on this text box. Let’s set the size to 100 pixels wide by 50 pixels tall:

engine.construct("guiTextBox", engine.interface, {
    size = guiCoord(0, 100, 0, 50)
})

Save the file - click Rerun, and you’ll see the white square is now a rectangle:

Adding Text
Amend your code to look like:

engine.construct("guiTextBox", engine.interface, {
    size = guiCoord(0, 100, 0, 50),
    textColour = colour:black(),
    text = "Hello World!"
})

Save the file - Click Rerun, and bang, you have a textbox!

4 Likes