Skip to content

Intro to Panels

Panels are the containers for other gooey widgets, and arguably the most important widgets.

Panel structure

A panel in gooey is akin to a window in an operating system. Panels are made up of a (nine-sliced) sprite that serves as the panel background (the sprite can also be undefined if an invisible panel is needed, i.e., if you only want to show the widgets). Apart from this, a panel has the following components1:

Panel structure Panel structure

Moving panels: Panel drag bar

This is the top part of the panel and where users can click and drag to move the panel around. The width of the drag bar occupies the entire panel width, and by default, gooey assigns the drag bar a height of 32px; however, the height is configurable using setDragBarHeight().

Panels are movable by default, unless you disable that behavior by using setMovable().

Resizing panels: Panel resize border

This is the border around the panel where a user can click and drag to resize the panel in any direction. By default, gooey assigns a resize border width of 4px, however you can tweak this using the setResizeBorderWidth() method.

Panels are resizable by default, however you can configure them to be of a fixed size, by using setResizable().

Panel title

The panel can optionally have a title element, which is rendered if set. You can set the title of the panel using setTitle(), and you can further customize it with other methods (be sure to take a look at the full API reference).

Title of a Panel

Since gooey 2025.4, the title of a panel is a proper UIText. That means you can handle it with any of the text widget methods. Consequently, the get/setTitleFormat methods have been deprecated, in favor of getTitleWidget.

Panel body

The body of the panel is the basis of the container and where widgets are added. A panel body is configured to clip contents - this is, widgets whose coordinates are outside of the panel's dimensions will get hidden. You can configure whether a panel clips its contents by using setClipsContent().

Constructor

If you've seen the Hello World tutorial, you already know how this works. The panel constructor has the following signature:

UIPanel(_id, _x, _y, _width, _height, _sprite, _relative_to=UI_DEFAULT_ANCHOR_POINT)

In this constructor:

  • The _id argument represents the widget's string ID, as explained in the Widgets tutorial.
  • The following arguments are the _x and _y offsets for the panel.
  • The following two arguments represent the width and height of the panel, in pixels.
  • The next argument is the sprite resource we will use to render the panel.
  • The last argument is optional, and defines the anchor point that gooey will use to position and render the panel.

Example

For this made-up example, I want to create a panel as a basis for setting up a space colony UI for a futuristic RTS game. For this purpose, I used Wenrexa's free hologram UI pack (as well as Screaming Brain Studios' seamless space backgrounds pack for the background). The original sprite looks like this:

Panel structure

Before importing the sprite, I cropped the image so the sprite borders are flush with the canvas border (eliminating some whitespace). Then, after importing, I changed the origin point to top-left and set up nine-slice as seen in the following GameMaker screenshot:

Nine-slice setup

After doing this, I'm ready to create my panel in an object's Create event:

1
    var _panel = new UIPanel("MyPanel", 0, 0, 300, 500, spr_Panel_2, UI_RELATIVE_TO.MIDDLE_CENTER);

I want my panel to have a title to reflect it's the space colony UI, so I set the title of the panel and, while I'm at it, I set the transparency of the sprite to 80% for a cool effect. I'm using Agency FB as the default font (by setting scribble_font_set_default()) instead of using the [fnt_Test] tag in the string):

2
    _panel.setTitle("SPACE COLONY").setImageAlpha(0.8);

The result is the following (click and drag over the drag bar to move the panel, click and drag on the border to resize):

  1. Actually, panels have a bit more complexity - make sure to read the whole section on panels to fully understand what other components form a panel. ↩