Introducing GUI Events

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.

Before completing this tutorial, you should definitely have a look at Creating a text box, as we’ll be building on what we learned there. This tutorial makes use of lots of gui properties which you can see in our documentation.

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+)

Setting up

If you have not already done so, follow the “Prepping Teverse” steps here to get set up.

1: Create a background frame

We’re going to create a nice background for our button and colour it. To this, we’ll need to use the Teverse type colour.

Colour is a special data type used to represent colours with 3 values in the format colour(r, g, b) where r, g and b are values between 0 and 1. Read more.

I quite like Turqoise, so I’m going to choose the colour colour(0, 0.6, 0.6). We use the table to provide properties for the new frame like so:

-- 1: Create the background frame using engine.construct
local background = engine.construct("guiFrame", engine.interface, {
    backgroundColour = colour(0,0.6,0.6),
    -- We're going BIG!
    size = guiCoord(0.3, 0, 0.3, 0),
    -- Moves it into the centre
    position = guiCoord(0.35, 0, 0.35, 0)
})

You should now have something like this:


Pretty exciting, right?

2: Creating our button

As most GUI objects have click events, we could use pretty much anything as a button. However, the best thing to use for this is a Gui button. You’ll notice here our second paramater is not engine.interface as it has been previosuly - we’re putting it inside our background.

local button = engine.construct("guiButton", background, {
    -- We're going for a grey background this time
    backgroundColour = colour(0.5,0.5,0.5),

    -- We're going BIG!
    size = guiCoord(0.5, 0, 0.5, 0),
    -- Moves it into the centre
    position = guiCoord(0.25, 0, 0.25, 0), 

    -- Put anything you want here for the text
    text = "Click me!!",

    -- With a grey background, white isn't very easy to see. Let's make the text black!
   textColour = colour(0,0,0) -- 0,0,0 is black

})

So far, so good. Right? We’ve added a few new properties but nothing too new so far. Paste this under your previous code, and click rerun to see the result.

3: Adding click detection

To do this, we’ll need to make use of an eventListener. These can be quite complicated, so for now we’ll just use it and explain it later on.
To connect a function to an event, you can do the following:

Object:EventName(function (...) end)

and this means the function will be run with any applicable arguments.

So, let’s apply this to what we want to do. We will use the mouseLeftPressed event:

function onClick ()
    -- I've been clicked!
end
-- This might look different - but we're doing the same thing! Passing a function.
button:mouseLeftPressed(onClick)

We’re using mouseLeftPressed here but there are many different events which Teverse supports on a variety of objects covering everything from a player joining your game to a part touching another.

Doing something on click

This works, but we’ve got no way to show it’s working! To do this, we’ll see the background colour everytime it’s clicked. We’ll modify our code from step 3:

function onClick ()
    -- Edit our background from earlier, set it's background colour.
   -- Colour:random() is a method which generates a random colour
    background.backgroundColour = colour:random()
end
-- This might look different - but we're doing the same thing! Passing a function.
button:mouseLeftPressed(onClick)

Add this code in instead of your pevious click script, click rerun and see what happens.
What happens when you click several times:

Full code

We’re done but feel free to customise and mess around - and if you create something cool, create your own tutorial! The Docs are fab for this. Happy deving!

local background = engine.construct("guiFrame", engine.interface, {
    backgroundColour = colour(0,0.6,0.6),
    -- We're going BIG!
    size = guiCoord(0.3, 0, 0.3, 0),
    -- Moves it into the centre
    position = guiCoord(0.35, 0, 0.35, 0)
})

local button = engine.construct("guiButton", background, {
    -- We're going for a white background this time.
    backgroundColour = colour(0.5,0.5,0.5),
    -- We're going BIG!
    size = guiCoord(0.5, 0, 0.5, 0),
    -- Moves it into the centre
    position = guiCoord(0.25, 0, 0.25, 0), 
    -- Put anything you want here!
    text = "Click me!!",
    -- As we've made our button white, we need to change the text colour or it'll be white on white
   textColour = colour(0,0,0) -- 0,0,0 is black
})

function onClick ()
    -- Edit our background from earlier, set it's background colour.
    background.backgroundColour = colour:random()
end
-- This might look different - but we're doing the same thing! Passing a function.
button:mouseLeftPressed(onClick)

All done :slight_smile:

6 Likes

Creative tutorial to show how events work in Teverse. Thank you for this tutorial!

1 Like