Skill Tree Designer

Getting started

Install Skill Tree Designer 3.0 from its official Roblox Creator Store listing, then open the plugin from the Roblox Studio toolbar. The plugin creates and edits node-based progression interfaces in StarterGui.

Every new tree is isolated in its own ScreenGui. Inside it, the main Frame stores the nodes, layout settings and runtime attributes. The same ScreenGui also contains the generated client runtime, the SkillTreeAPI folder, optional mobile controls and a disabled runtime README.

The default workflow is:

1. Click Create and choose a starting pattern.
2. Arrange, name and connect nodes in the visual editor.
3. Configure the tree’s runtime animation and mobile controls.
4. Add your game UI to each node’s Content frame.
5. Use the client API when another LocalScript or custom control needs to move or present the tree.

When the plugin opens or Studio selection changes, Skill Tree Designer can load the selected tree, node or node content automatically. Its shortcuts only run while the plugin is focused, so normal Studio input remains separate.

Editor controls

The top toolbar contains the main operations:

• Create opens the pattern picker and optional container-name field.
• Load loads the selected skill-tree ScreenGui, container, node or node content.
• Delete removes the selected node or nodes.
• Center Tree centers the complete layout without changing zoom.
• Zoom Node centers one selected node at 800% or the midpoint of a multi-selection.
• Zoom Fit calculates the full node bounds and fits every node inside the visible canvas.
• Names shows or hides node labels.
• Links shows or hides connection lines.
• The settings cog opens the Look, Tree, Defaults, Keys and About pages.
• Undo and Redo use the designer’s tree-aware history.
• Docs opens the About page, where the documentation address can be selected or copied.

The Tree Inspector on the left contains node size, spacing and layout controls; selected-node details and actions; honeycomb presets; and Fix Tree. Sections can be collapsed to keep a narrow docked window manageable.

Canvas navigation

• Scroll the mouse wheel to zoom toward the pointer.
• Drag with the middle mouse button to pan.
• Hold the configured Pan key, Space by default, and drag with the left mouse button to pan.
• Double-click a node to focus it.
• Left-drag empty canvas space to draw a selection box when Drag Box Selection is enabled.
• Right-click a node or an empty location to open its action menu.

The editor remembers pan and zoom settings for the tree. Use Center Tree, Zoom Node and Zoom Fit when you want to navigate without manually resetting those values.

Patterns and layout

The Create dialog offers six starting patterns:

The Tree Inspector also keeps the larger 7x7, 9x9 and 11x11 honeycomb presets. Applying an inspector preset replaces the current nodes after confirmation while preserving the tree container, settings and runtime components.

Layout settings

• Size X / Size Y control node width and height percentages.
• Spacing X / Spacing Y control horizontal and vertical spacing.
• Node Layout switches between staggered six-direction Honeycomb positioning and aligned Table rows and columns.
• The size and spacing locks preserve the current X-to-Y ratio while either paired value changes.

The Tree settings page also lets you set the node image or shape, show or hide names, connections and the grid, and enable or disable drag-box selection. The Defaults page stores equivalent values for future trees without overwriting the active tree.

Selection and node actions

Left-click a node to select it. Double-click it to zoom in. Right-click it to open the compact action menu. The Selected Node section shows the primary node’s name, hex coordinates, link count and content-item count.

To select many nodes, drag a box across empty canvas space. A node joins the live selection preview when at least 51% of its editor rectangle falls inside the box. On release, the highlighted nodes become the Studio selection as well as the plugin selection.

Available node actions include:

• Content selects the node’s Content frame in Studio.
• Copy starts a one-target visual copy.
• Mass Copy starts a multi-target copy.
• Zoom Node(s) focuses one node or the midpoint of the current multi-selection.
• Delete removes every selected node.

Rename the primary node in the Selected Node name field. The designer keeps connection references synchronized after a successful rename.

Right-click empty canvas space to place a node at the nearest free hex coordinate, including a disconnected location far from the existing tree. The same menu provides Center Tree and Zoom Fit. The hover-plus controls remain the fastest way to add adjacent nodes.

Copy and Mass Copy

Copy transfers supported visual properties, custom attributes, visual children and content children from the source to one target. It preserves the target’s name, hex coordinate, position, size and connections.

For Mass Copy:

1. Select a source node and click Mass Copy.
2. Click each target node to add or remove it from the target set.
3. Review the live target count above the canvas.
4. Click Confirm (N) or press the configured confirmation key, Enter by default.
5. Click Cancel or press Escape to leave without applying the copy.

Copy and Mass Copy are recorded in the designer’s history and can be undone.

Plugin appearance

Version 3.0 adds a dedicated Look page for the editor itself. These choices are saved locally in Roblox Studio and do not change the player’s skill-tree UI.

• Theme provides Obsidian, Graphite, Slate, Deep Blue, Royal, Midnight Purple, Teal, Emerald, Rose, Crimson, Warm Amber, Sunset, Arctic and Mono palettes.
• Plugin Font provides Fredoka, Gotham and Source Sans.
• Font Weight provides Regular, Medium, SemiBold and Bold.
• Text Size accepts values from 12 through 22.
• Text Stroke accepts values from 0 through 3.
• UI Motion enables or disables editor hover, press and transition motion.

Use Reset Plugin Appearance to restore the default Obsidian, Fredoka and motion-enabled presentation. This reset is separate from Reset Defaults and Keybinds.

Runtime experience

Version 3.0 generates an aspect-aware client runtime for each tree. The tree retains its design ratio as the player’s viewport changes, and runtime movement uses scale-based values so the same layout can adapt across screen sizes.

Player inputs supported by the generated controller are:

• Left-drag or touch-drag the tree.
• Drag with the middle mouse button.
• Use the mouse wheel to zoom toward the pointer.
• Use the optional mobile navigation pad.
• Fire commands through SkillTreeAPI from another LocalScript.

The runtime zoom range is clamped from 1.6 through 10. Reset View returns to zoom 3 and centers the tree.

Runtime attributes

Entrance tweens start only after the tree UI becomes visible. The runtime waits briefly, confirms that the tree is still visible and then plays the chosen effect. Turn Entrance Tweens off when your own code will handle node presentation.

The generated FrameHandler begins with ENABLE_SKILL_TREE_RUNTIME = true. Set it to false only when you intend to replace all generated runtime behavior with your own LocalScript system.

Client runtime API

The generated API is client-side. It uses BindableEvents and BindableFunctions inside the tree’s ScreenGui, so call it from a LocalScript. It controls presentation and navigation; keep server-authoritative progression and purchases in your own game systems.

Resolve the API name from the tree instead of assuming the default. This also supports older ScreenGui objects that contain more than one tree:

local Players = game:GetService("Players")
local playerGui = Players.LocalPlayer:WaitForChild("PlayerGui")
local gui = playerGui:WaitForChild("SkillTree")

local tree
for _, child in ipairs(gui:GetChildren()) do
    if child:IsA("Frame") and child:GetAttribute("HexTreeSchemaVersion") then
        tree = child
        break
    end
end

assert(tree, "Skill Tree container not found")
local apiName = tree:GetAttribute("HexRuntimeApiName") or "SkillTreeAPI"
local api = gui:WaitForChild(apiName)

Movement and zoom events

Example:

api.Pan:Fire(0.08, 0)
api.PanPixels:Fire(40, 0)
api.SetPosition:Fire(0.5, 0.5)
api.ZoomBy:Fire(0.5)
api.SetZoom:Fire(4)
api.Center:Fire()
api.ResetView:Fire()

Presentation events

api.PlayEntrance:Fire("Drop")
api.SetEntranceTweens:Fire(false)
api.SetMobileControls:Fire(true)

State functions

GetState returns a table containing zoom, positionX, positionY, visible, mobileControlsEnabled and entranceTweensEnabled. IsVisible returns one boolean.

local state = api.GetState:Invoke()
print(state.zoom, state.positionX, state.positionY, state.visible)
print(api.IsVisible:Invoke())

Mobile controls

Turn on Tree > Runtime Experience > Mobile Navigation to show the built-in control pad. It contains Up, Down, Left, Right, Zoom In and Zoom Out buttons in a responsive 2x3 frame. The setting is off by default and can be saved as a default for future trees.

Players can also drag the tree directly with touch. The buttons are helpful when you want explicit directional controls or when dragging alone is not discoverable enough for your interface.

Custom mobile buttons

You do not need to use the generated pad. Leave Mobile Navigation off and connect your own GuiButton objects to the API:

upButton.Activated:Connect(function()
    api.MoveUp:Fire()
end)

zoomInButton.Activated:Connect(function()
    api.ZoomIn:Fire()
end)

Use Pan, PanPixels, ZoomBy or SetZoom when custom controls need different step sizes. Activated works across mouse, touch and gamepad-style GUI activation.

Keyboard shortcuts

The version 3.0 defaults are:

Enter one key or a combination such as Ctrl+C, Shift+G or Alt+T on the Keys settings page. The canvas hints and Mass Copy prompt update to match saved changes.

Upgrading and repairing trees

Use Fix Tree to audit a tree before changing it. The confirmation lists the proposed repairs, which can include:

• Upgrading the stored tree schema to version 3.
• Adding the responsive design aspect ratio and UIAspectRatioConstraint.
• Converting legacy position and size offsets to scale-based runtime values.
• Adding missing API events and functions.
• Adding the optional mobile-control frame and buttons.
• Adding the disabled runtime README.
• Restoring required container, node, visual, content, hitbox and connection properties.

Fix Tree does not rewrite the source of an existing FrameHandler or runtime README. A new generated script receives the current source once; after that, you retain control of any custom edits.

After an upgrade, use Zoom Fit and test the tree in Studio’s device emulator at several viewport sizes. Keep a normal Studio version or project backup before large structural changes.

Recommended workflow

1. Create a tree from the pattern closest to your progression design.
2. Choose Honeycomb or Table positioning and adjust size and spacing.
3. Add neighboring nodes with hover-plus controls or place disconnected nodes from the canvas menu.
4. Use drag-box selection, Copy and Mass Copy to repeat visual treatments efficiently.
5. Add each skill’s visual interface to its Content frame.
6. Choose Cascade, Drop or Pop and decide whether the built-in mobile pad should be visible.
7. Connect custom LocalScript controls through SkillTreeAPI when needed.
8. Run Fix Tree, use Zoom Fit, and test mouse and touch layouts before release.

Keep gameplay rules separate from editor layout and runtime presentation. Confirm the progression graph first, then refine spacing, animation and control behavior.

Troubleshooting

The tree is outside the visible editor area

Use Center Tree to preserve zoom while centering the full layout, Zoom Node to focus the selection, or Zoom Fit to frame every node. The default shortcuts are G, T and E respectively.

I cannot select several nodes

Open Settings > Tree and make sure Drag Box Selection is on. Begin the drag on empty canvas space. A node must be at least 51% inside the box to join the selection.

The mobile pad does not appear

Open Settings > Tree > Runtime Experience and enable Mobile Navigation for the loaded tree, or call api.SetMobileControls:Fire(true) from a LocalScript. If the tree was created with an older version, run Fix Tree first.

My custom controls cannot find SkillTreeAPI

Read HexRuntimeApiName from the tree frame and wait for that child under the tree’s ScreenGui. Multi-tree legacy interfaces use unique API folder names.

Entrance animations do not play

Confirm that Entrance Tweens is on, the tree frame is visible and its ScreenGui is enabled. PlayEntrance also requires the tree to be visible. If you disabled ENABLE_SKILL_TREE_RUNTIME, the generated controller and API listeners are not running.

I want to provide my own animations

Turn Entrance Tweens off in Tree settings or call SetEntranceTweens with false. This leaves node presentation to your code without disabling the rest of the runtime.

The tree stretches on a different device

Run Fix Tree to add the version 3 responsive aspect-ratio data and constraint. Then test at multiple emulator sizes. Avoid removing TreeAspectRatio unless your own runtime replaces the generated sizing behavior.

Enter does not confirm Mass Copy

Click the visible Confirm (N) button. The configured confirmation key is optional.

I cannot place a node far from the tree

Right-click empty canvas space and choose Place Node. Arbitrary free hex coordinates are allowed; occupied coordinates are rejected.

A component is missing or outdated

Run Fix Tree and review the proposed list before applying it. Fix Tree repairs generated components while preserving source in existing scripts.

How do I open these docs from Studio?

Click Docs, then select or copy https://goldastro.cc/docs/skill-tree-designer/ from the About page.