Skip to content

Hello World example

Let's create our very first UI element using gooey.

Prerequisites

Have gooey already setup in your project (see Setup)

Once we have gooey in your project, we can start creating and interacting with widgets - the building blocks of gooey. When creating UI with gooey, you just use the built-in constructors (e.g. UIPanel) to instantiate new widgets, and you can use the convenience functions (e.g. ui_get) to interact with existing widgets or the system itself.

Coding the example

For now, let's go ahead and create an empty object, obj_Game, and place it in our room. We will then use the Create event to define a new panel:

1
2
var _panel = new UIPanel("HelloWorld_Panel", 100, 100, 500, 350, green_panel);
_panel.setTitle("Hello world!");

Interactive example

After running the project, you will see a green panel being rendered in your GUI layer! You can play around with the interactive example below:

  • Click and drag on the top of the panel to move the panel
  • Click and drag on any border to resize the panel

Understanding the example

The code above is really succint, but if it's your first time using gooey, you might be a bit overwhelmed. Let's go through the code example line by line.

First, on line 1, we are using the UIPanel constructor to create a new panel. Panels are the containers for everything else, so normally you'll find yourself creating panels - even if you don't want the panel to show!

The constructor signature is the following:

UIPanel(_id, _x, _y, _width, _height, _sprite, _relative_to=UI_DEFAULT_ANCHOR_POINT)
  • The _id argument represents a string ID we will use to later refer to this panel. You can name it anything you want. Here, we're using HelloWorld_Panel as our ID.
  • The following arguments are the _x and _y offsets for the panel. Note that we are talking about offsets instead of coordinates and you will see why later. For the sake of this example however, you can think of these arguments as the coordinates relative to the GUI layer's top left corner, as usual, so we are placing the panel in the (100, 100) position of the layer.
  • The following two arguments represent the width and height of the panel, in pixels. We are using a 500x350 px panel in this example.
  • The next argument is the sprite resource we will use to draw the panel. In this example, we are using a sprite from the included Kenney's amazing UI pack - it so happens that green_panel is the name of a particular Kenney sprite in the gooey folder in the asset browser1.
  • The last argument is optional, and defines the anchor point that gooey will use to position and render the panel. We will not mess with it for this example, but you'll learn about it a lot in the following tutorials.

Note that we are assigning the result of the constructor instantiation (the new operator) to a local variable called _panel. The sole purpose of this is to create a temporary reference to the widget in question, so we can handle it within the same event. You do not need to do this as there are more general ways of getting already created elements for manipulation (such as the convenience function ui_get), but when working inside the same event, using a local variable is a bit easier. For the same reason, you do not need to store the result in an instance variable for later manipulation in other events.

Now let's talk about the second line. In this line we are setting a property of the panel, using the setter methods - namely, the panel's title. The syntax is straightforward, in this case the setter only uses one argument, which is a Scribble-formatted string. There are many, many more setters and getters, some of which apply to any widget and some of which are specific to a particular type of widget.

The gooey version notice

After running the project, you can check out the log output in your GameMaker log window, which will indicate:

  • the version of ScribbleDX being run
  • the version of gooey being run

As an example, you will see this output:

...
ScribbleDX: Welcome to Scribble Deluxe by Juju Adams! This is version 9.3.5, 2024-12-13
ScribbleDX: Verbose mode is off, set SCRIBBLE_VERBOSE to <true> to see more information
ScribbleDX: Using handle_parse() where possible
TimeLine_Prepare() 
Object_Prepare() 
Room_Prepare() 
Finished PrepareGame() 
Run_Start
Done g_EffectsManager.Init()
Done RenderStateManager
CreateColPairs took 0.000000s 0 usecs for 3 object types obj_col_numb=0 physobjcount=0 resizes 0 final size 0
Done ObjectLists
Done Extension_Initialize
About to startroom
[gooey] <NOTICE> Welcome to gooey 2025.2.0, an user interface library by manta ray
...

Common misconceptions

I would like to discuss a couple of misunderstood concepts about how gooey operates:

  1. The object that houses the above code (or any gooey code) is not doing the rendering or handling UI interaction. This is actually being done in the background by a manager object which is automatically created when the first widget is instantiated. This means you can place gooey code in several objects or even functions within scripts However, it is recommended to place all your gooey code in a single controller object.
  2. Each created widget is a instance of a constructor, not a GameMaker object. There are many UI libraries that rely on objects - however this is not the case with gooey. It's not bad or good - it's just a design decision.

Wrapping up

You have successfully created your first UI with gooey! It doesn't do much, but it has helped showcase how the system works. Now you can head on to the following tutorial - learning about Widgets.

  1. I know, I know, I should have renamed it to spr_Panel_Green or something. But this is from way back when I first created the library and I was lazy that day. ↩