Panel Editor

From Tombstone Engine Wiki
Revision as of 07:11, 24 October 2018 by Eric Lengyel (talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search
Figure 1. The Panel Editor window.

The Panel Editor, shown in the image to the right, is a tool included with the Tombstone Engine that is used to create and edit graphical user interfaces of two different types. First, the panel editor can be used to create windows, dialogs, and heads-up displays that are rendered on top of a game on a two-dimensional desktop, and these interfaces are saved in individual panel resource files. Second, the panel editor can be used to create interactive in-game interface panels that are saved as part of the world in which they exist.

An interface panel is composed of a set of widgets, and many different types of widgets, including simple text and image widgets and more complex widgets like list boxes, are built into the engine. Custom widget subclasses can be defined in the game code and registered with the engine so they appear in the Panel Editor.

Each widget can have one or more mutators attached to it that produce animations of various kinds. Widgets belonging to in-game interface panels can also have scripts attached to them that get executed when the user interacts with the widgets.

Creating and Editing Panels

Desktop Panel Resources

New panel resources can be created, and existing panel resources can be edited, by choosing the New Panel or Open Panel commands in the Tombstone Menu. The panel command can also be entered in the Command Console to open an existing panel resource.

The dimensions, window title, and various flags for a desktop user interface panel are set by choosing Window Settings from the Panel menu.

After saving the panel, the created .pan file can then be used in your game with the Window class.

In-Game Panel Effects

An interface panel can be created in the World Editor by using the Panel Effect tool in the Effects Page. When a panel effect is selected, the Panel Editor can be opened for it by choosing “Edit Script or Panel” from the Node menu, which has the shortcut Ctrl-E (Cmd-E on the Mac). The Panel Editor is also accessible from the Controller pane in the Node Info window.

The Panel Effect tool draws a rectangular region representing the boundary of the panel. When a panel is first created, it automatically has a Panel Controller assigned to it that can be accessed under the Controller pane in the Node Info window.

An in-game panel possesses both its physical size in the world, as drawn with the Panel Effect tool, and an internal interface resolution. The resolution is adjusted in the properties for the Panel Controller. The interface resolution determines how big the virtual screen is on which items will be placed with the Panel Editor. Whatever resolution is chosen, the entire panel is fit precisely into the physical dimensions determined by the rectangle drawn in the World Editor. Thus, it's usually desirable to match the aspect ratios of both the panel's physical size and its interface resolution to avoid stretching the contents of the panel.

Under the Panel tab in the Node Info window, there are three check boxes that affect how the panel is rendered.

  • The Apply depth offset flag causes the panel to be rendered with a small depth offset forward. This avoids z-fighting artifacts that could otherwise appear if a panel was drawn in the same plane as background geometry.
  • The Render two-sided flag causes the panel to be rendered regardless of on which side of the panel's plane the camera currently is. This lets the panel be seen from the back if it's drawn on a transparent surface or floating in mid-air.
  • The Render with fog flag allows fog to be rendered over a panel. This must be explicitly enabled in order for a panel to be rendered in a fogged environment.

A panel effect can be made interactive by assigning the Interaction property to it under the Properties pane of the Node Info window. An interactive panel can display a cursor on top of the panel while the user is engaged with it. The cursor's texture image is specified in the panel controller's settings in the Node Info window.

Panel Editor Tools

There are eight tool buttons at the top of the Panel Editor window, and they have the following uses. In addition to clicking on the tool button, some of these tools can also be selected by pressing the number key shown in the table.




Tool select.png


Select Widgets. This tool can be used to safely select items without the possibility of accidentally moving them. To select a single widget inside a group instead of the group itself, hold in the Control key (Command key on the Mac) while clicking.

Tool move.png


Move Widgets. Selects and moves widgets. Holding down the Shift key while moving constrains the movement to a single axis.

Tool rotate.png


Rotate Widgets. Selects and rotates widgets. Click and drag a handle for a selected widget to rotate. Holding down the Shift key while rotating snaps the angle to 45 degree increments.

Tool resize.png


Resize Widgets. Selects and resizes widgets. Click and drag a handle for a selected widget to resize. Holding down the Shift key while resizing constrains the proportional width and height.

Tool texoffset.png

Offset Texture. Offsets the texture within the selected image widgets.

Tool texscale.png

Scale Texture. Scales the texture within the selected image widgets.

Tool scroll.png


Scroll. Scrolls the panel viewport. Holding down the Alt key (Option on the Mac) temporarily selects the scroll tool.

Tool zoom.png


Zoom. Zooms the panel viewport. Dragging vertically with this tool zooms in and out of a viewport. Using the mouse wheel with any other tool also zooms.


The following table describes the individual pages that are currently available in the Panel Editor.



Panel widgets.png

Widgets. To place a new widget in the panel, select a type of widget from the list in this page and drag out a rectangle in the viewport.

Panel transform.png

Transform. This page allows you to enter the position, rotation angle, and size of a selected widget. The position and size are measured in pixels, and the rotation angle is measured in degrees.

Panel grid.png

Grid. The toggle buttons in this page control grid visibility and whether grid snapping is enabled.

Widget Settings

When one or more widgets are selected, their properties can be edited on the right side of the window. Different properties are shown depending on the types of the selected widgets, but all widgets have an identifier, a color, two flags indicating whether the widget is initially disabled or hidden, and settings for a help balloon. Settings that differ among multiple selected widgets are displayed in an indeterminate state until they are modified.

See the list of widgets for a description of the settings that are specific to each type of widget.

Common Settings

  • The Widget identifier is a string of up to 15 characters used to identify widgets from C++ code or a script. It can be left blank for widgets that will not be referenced. This identifier does not need to be unique. When a script uses an identifier to operate on widgets in a panel, it affects all widgets within the panel having that same widget identifier.
  • TheWidget color is the primary color used by a widget. The exact way in which this color is used depends on the type of the widget.
  • The Initially disabled check box indicates whether the widget is initially disabled so that it can't be clicked.
  • The Initially hidden check box indicates whether the item is initially hidden so that it isn't rendered.
  • The Balloon type menu specifies what kind of help balloon is assigned to the widget.
  • The Balloon string is a string that is interpreted based on the type of balloon. If the balloon type is a text string, then the balloon string is displayed directly in the help balloon for the widget. If the balloon type is a panel resource, then the balloon string is the name of the panel resource that gets loaded and displayed in the balloon.

Menu Commands

(For shortcuts on the Mac, replace the Ctrl key with the Cmd key.)

Panel Menu






Closes the panel editor window.

Save Panel


Saves the current panel.

Save Panel As...


Saves the current panel after prompting for a file name. (Available only for panel resources, not in-game panel effects.)

Window Settings...


Opens a dialog in which the window dimensions, its title, and various options can be set. (Panel resources only.)

Edit Menu






Undoes the last action. (Supports multiple undo.)



Cuts the current selection to the clipboard.



Copies the current selection to the clipboard.



Pastes the contents of the clipboard to the panel.



Deletes the current selection.

Select All


Selects every widget in the panel.



Duplicates the selected widgets.

Widget Menu




Bring to Front


Brings the selected widgets to the front so that they are rendered last.

Bring Forward


Brings each selected widget forward ahead of the next widget that would be rendered.

Send Backward


Sends each selected widget backward behind the previous widget that would be rendered.

Send to Back


Sends the selected widgets to the back so that they are rendered first.

Hide Selection


Hides the selected widgets.

Unhide All


Shows all widgets in the panel.

Lock Selection


Locks the selected widgets so that they can no longer be selected.

Unlock All


Unlocks all widgets in the panel.

Group Selection


Groups the selected widgets. (No groups can be selected.)

Ungroup Selection


Ungroups the selected groups.

Reset Rotation


Removes any rotation from the selected widgets.

Reset Texcoords


Resets the texture coordinates for selected image widgets to the default values.

Auto-scale Texture


Scales, or “fixes”, the texture coordinates of selected image widgets so that the aspect ratio is 1:1.

Edit Script


Opens the script editor for the selected widget. (Available only for in-game panel effects.)

Delete Script

Removes any scripts from the selected widgets.

Arrange Menu




Nudge Left


Nudges the selected widgets one pixel to the left.

Nudge Right


Nudges the selected widgets one pixel to the right.

Nudge Up


Nudges the selected widgets one pixel upward.

Nudge Down


Nudges the selected widgets one pixel downward.

Align Left Sides


Aligns the left sides of the selected widgets to the leftmost point in the selection.

Align Right Sides


Aligns the right sides of the selected widgets to the rightmost point in the selection.

Align Top Sides


Aligns the top sides of the selected widgets to the topmost point in the selection.

Align Bottom Sides


Aligns the bottom sides of the selected widgets to the bottommost point in the selection.

Align Horizontal Centers

Aligns the horizontal centers of the selected widgets to the average between the leftmost and rightmost points in the selection.

Align Vertical Centers

Aligns the vertical centers of the selected widgets to the average between the topmost and bottommost points in the selection.

See Also