Editor Quick Start

NUI Editor Quick Start

To get started with creating interfaces using the NUI editor, have a copy of Terasology handy - preferably one running from a local workspace. No external modules or facades are required!

Starting Up

Setting up the editor is a fairly easy process. There are three ways to do so:

• Via hotkey - press F10 to launch the NUI screen editor or F11 for the skin editor. Note that to edit screens from custom modules, you'll have to launch the editor from a game running with the modules enabled.
• Via console command - the editScreen <uri> or editSkin <uri> commands will start the relevant editor and instantly select a specified screen to be edited.
• Via Developer Tools menu - from the in-game pause menu, select "Developer Tools" (located in the bottom right corner) and launch the relevant editor. This menu also includes several other developer tools including the behaviour tree editor, GLSL editor and so on.

Interface Guide

Main editor interface

• Asset selection dropdown - gives the option to select an existing asset or create a new one, which will generate a initial asset that can then be further extended. Selecting any option will populate the editor tree view and preview widget.
• Editor tree view - the main interface component dealing with the actual editing.
• Screen selection dropdown - a skin editor-only component to choose a screen to be shown in the preview area.
• Preview widget - in the screen editor, this are contains the contents of the tree view converted to a JSON object, then to a UIWidget rendered by the NUI manager. In the skin editor, it (optionally) contains a specified screen with the skin that is being edited applied to it.
• Toolbar -
  • Save - overrides the asset currently being edited with the contents of the editor, also reloading it in-game. Disabled if no changes are present or if the asset cannot be overriden (i.e. is located in the engine module - since it is a ClasspathModule located in a JAR file, its' assets are not editable).
  • Save As - opens a file chooser dialog to save the edited asset as a .ui or .skin file. Disabled if no changes are present.
  • Copy - converts the contents of the tree view to a JSON object and copies it to the system clipboard. They can then be copied to an IDE or text editor.
  • Paste - attempts to convert the contents of the system clipboard to a JSON asset. If successful, resets the tree view and preview widget based on the asset.
  • Undo - reverts the editor to a state before the last change done in the tree view, also resetting the preview widget.
  • Redo - reverts the effects of the last undo action.
  • Settings - opens the editor settings screen.
  • Close - closes the editor while storing the edited asset and other state info. Re-opening the editor will restore the previous state.

Editor settings

• Disable tree view icons - disables the icons drawn next to nodes in the tree view depending on their type or value.
• Disable autosave - if Terasology is closed while unsaved changes are present in the asset file, the changes are backed up to a JSON file and restored when the editor is next run. This setting disables the autosave system.
• Preview widget locale - changes the locale of strings in the preview widget. Does not affect the locale of Terasology itself.

Controls and Keybinds

General controls

• F10/F11 - opens the screen/skin editor respectively. If they're active, closes them while preserving editor state.
• ESC - closes the currently open editor while preserving state.
• Ctrl + Z - reverts the editor to a state before the last change done in the tree view, also resetting the preview widget. An alternative to the Undo button.
• Ctrl + Y - reverts the effects of the last undo action. Identical to the Redo button.

Tree view controls

• Left-clicking on a tree view node selects it. While it is selected:
  • ↑ & ↓ - moves the item up or down the list of its parents' children.
  • Ctrl + C - copies a selected node. (Not to be confused with copying the entire tree using the 'Copy' button.)
  • Ctrl + V - pastes the copied node as a child of the currently selected node.
  • Delete - removes the node, and all of its children, from the object tree.
  • F2 - creates an inline editor widget to edit the key or value for the node. After the node is edited, the state of the tree view and the preview widget are updated.
• Double-clicking on a node is another way to edit it.
• Right-clicking on a tree view node brings up a context menu with the following options:
  • Add Widget - adds a new widget to the node.
  • Add... - opens a secondary context menu with a list of fields that can be added to the node. When added, the fields will contain their default values (except Boolean fields, which will be initialized with the opposite of their defaults).
  • Copy - identical to Ctrl + C.
  • Delete - identical to Delete.
  • Edit - edits the node; another alternative to pressing F2 when the node is selected or double-clicking it.
  • Paste - identical to Ctrl + V.
• Drag&dropping a node allows you to make it a child of a different node; a small line will be drawn to indicate where the node will end up after the mouse is released. Note that a node cannot be made a child of one of its' own children - that would be paradoxical.