Introducing guiCoord (Briefly)

This tutorial should be followable by beginners!

When displaying things on a screen, we typically use two dimensional vectors(x, y) to define positions and sizes.

Ultimately, if we were to define sizes using just two numbers, it would be quite difficult to create responsive scalable interfaces - as Teverse can run on any device.

We use guiCoord when defining screen coordinates. Although using four numbers instead of two may seem a tad complicated, guiCoords are incredibly simple to use! A guiCoord consists of four numbers:

  • Scale (X) - This number represents how much of the parent’s size this object should take. e.g: Setting scaleX to 0.5 means that this object will be 50% of the parent’s absolute width.

  • Offset(X) - This number represents pure pixels and is added to the absolute value of Scale(X).

  • Scale (Y) - This number represents how much of the parent’s size this object should take. e.g: Setting scaleY to 0.5 means that this object will be 50% of the parent’s absolute height.

  • Offset(Y) - This number represents pure pixels and is added to the absolute value of Scale(Y).

Using guiCoord in practice:
In this snippet of code (instructions on how to run Lua in teverse can be found here), we create a textbox at position guiCoord(0.5, 0, 0.5, 0).

This means that the top left of the textbox will always be at 50% of the parent’s width and at 50% of the parent’s height (dead centre!).

We set the size of the textbox to guiCoord(0, 200, 0, 20), we set scale values to 0 for both x and y, so the size of this gui will always be 200x20 pixels.

engine.construct("guiTextBox", engine.interface, {
    text = "guiCoord(0.5, 0, 0.5, 0)",
    textColour = colour(1, 0, 0),
    position = guiCoord(0.5, 0, 0.5, 0),
    size = guiCoord(0, 200, 0, 20)
})

Now, we can see that this gui’s top left is in the centre of the screen, but the rest of it isn’t… To make this gui appear dead centre, we’ll need to apply offsets to the position guiCoord.

Change the position from

position = guiCoord(0.5, 0, 0.5, 0)

to

position = guiCoord(0.5, -100, 0.5, -10)

And now that we’ve applied the pixel offsets, this element is always dead centre on the user’s screen!

If you’re not sure why we used -100, -10 for the offset values, have a look at the size of the object that we defined earlier (200, 20).

3 Likes

I like the simplicity behind this tutorial.

Through introduction of the basics, those who are in the Workshop can experiment with guiCoord to an advanced level. Love that this is well documented and easily understandable for even the most citizen developer.

I’m loving how you show what scale and offset both are for people that don’t already know what it stands for. Great tutorial, keep it up!

2 Likes