01 - Introduction

A window should automatically open, showing the usual interface areas: the view area, the outline with its different “folders”, and the properties panel. 

As you can see, there is no button option or anything like that. We only have box, pie, text, template, and particleFX. There is no ready-made component for us like in Godot or Unity. We have to build them ourselves!

Let’s start by using a box to begin our adventure!

A box node is a rectangle used for backgrounds, button images, and more. It can display a texture from an atlas and supports 9-slice scaling. You will use it a lot!

In the Outline, click on the box node to display its properties. In the Properties panel, change the Id of the box and name it "ROOT".

The root node should match the size of the game and be centered on the screen. Set its Size to 960 x 640 and its Position to 480 x 320.

Then, uncheck the Visible property so the root box does not render, but can still be used to group and control the rest of the interface. Finally, set its Adjust Mode to Fit.

Ok, our root is set up. Let’s add a background so we can experiment a bit. Add a new box node, name it background_main, and set its size to 960 x 640. You should now see a white rectangle filling the whole game area.​

Now we need to assign an image texture to this box. To do this, right-click on the Textures folder in the Outline, then select Add ▸ Textures and choose interface_atlas.

Then go back to the background_main node. For the Texture property, choose simple_background from the list.​

Now let’s see how our GUI looks in the game. In the Assets browser, find main.collection and open it.​

You should see an empty collection for now. Add a new game object and attach the GUI to it:

1. Right-click in the collection outline and choose Add Game Object, then name it "gui".​

2. Right-click the gui game object, choose Add Component File, and select simple_gui.​
   
   

You should now have this setup in your main.collection: one gui game object with the simple_gui GUI component attached.​

Run the game with F5 and try resizing the window. Because the root node uses Fit as its adjust mode, your GUI should always stay perfectly scaled inside the window.

As you can see, the background now resizes with the window.

Now let’s switch the root node to Zoom. You can set the background’s adjust mode to either Fit or Stretch if you want, both will let you see the difference.

Now, with the Zoom mode, our background seems to adapt its size proportionally to the window while trying to cover all the available space.
This is why it often makes more sense to set the root node to Stretch, so your GUI stays responsive on any device and adapts correctly on mobile, tablets, and more.

In my case, I think Fit is more intuitive for beginners at first, because your GUI always stays in the game aspect ratio you set, making it easier to manage.
But for now, let’s keep it on Stretch.

Now, if we launch the game, we should see this.

So let’s create three layers. Name the first one "general_bottom", the second "general_middle", and the last one "general_top".

Then let’s assign the background_main node to general_bottom, and assign our button to general_middle.

Next, add a Text node inside the button node. You’ll probably see an error because the font property isn’t set. Since we haven’t added any fonts to this GUI yet, let’s add one.

(And just as a note: I renamed the box node to button.)

And voilà! 🎉 Thanks to the layers, the renderer groups nodes so that each one is drawn within its own layer. This lets us control exactly how nodes overlap.

I have to admit, in this simple example, setting up a layering system wasn’t really necessary. Our nodes are already listed in order in the folder, so the visual result would be the same without layers. However, it’s important to understand that a layer system exists and how it works. By grouping nodes into layers, you can also improve draw call performance in more complex GUIs.