5 Storyboard Designer Pro-Tips

Storyboard Designer is loaded with many helpful quality-of-life features to speed along development.
However, even after spending a long time in Designer, you may not know them all.
Today let’s take a look at 5 helpful tips for working in Storyboard Designer that you may not know about.

1. Copy Path

When you have to specify the fully qualified name of an element, you may be tempted just to write it manually. However, Designer has a convenient feature where you can Right Click an element (Screens, Layers, Groups, Controls, even GDE variables), and select Copy Path which copies the path to your clipboard.


And once it's on your clipboard you can easily paste it in code: 

2. Control Anchor Grid

You may have noticed there is a 3x3 grid within a Control’s Dimensions properties:

Each cell within this grid is actually selectable and corresponds to the anchor points on a control. To better illustrate, when you select a control you can actually see the anchor points as part of the selection border:

Selecting a cell in the grid will update the X and Y parameters to display the position of the selected anchor point. You can also adjust these values in order to specify the position of the anchor point.

This allows for fine-tuning positions of controls, which can be very useful when laying out your UI.

3. Search Text for References to GDE Elements

In a sufficiently large project, you may encounter a situation where you wish you knew all the places in your Lua code that a certain element was referenced.

Designer provides a quick way to do this if you Right Click any element>References>Search Text 

This will populate your Search tab with all references to that element in your text files.

4. Inline Math for Number Fields

Any number entry field in Designer actually supports using inline math.
So instead of crunching the numbers in a calculator beforehand in order to position an element at the correct value, you can just: write out the equation in the entry field, press enter or select outside the field to perform the calculation.

5. Control Alignment Keyboard Shortcuts

On the topic of positioning elements, if you simply need to align an element to the one of the edges of the screen or the center of the screen there are some built in shortcuts that you can use.

If you Right Click any Control and go to the Align section you will see all the quick alignments you can perform

Additionally, you can also see the keyboard shortcuts to perform this as well. Memorizing these can really speed up development.